磁贴
磁贴以图案背景和醒目的图像区域展示内容预览，适用于集成、模板和图片画廊。
磁贴以图片为主展示内容预览，并带有图案背景。当截图或徽标比文字更重要时，使用磁贴代替卡片，例如用于集成页面、模板画廊和图片较多的页面。
屏幕截图显示的是英文界面。
适合使用磁贴的场景：
- 视觉预览比文字描述更重要
- 展示集成及其徽标或截图
- 构建画廊，展示模板、主题或示例
- 展示截图以及标题和可选描述
用法
<Tile href="/components/tabs" title="Tabs Component">
<img src="/_jd/images/tabs-preview.webp?v=mwdojjfh" alt="Tabs" />
</Tile>基本 Tile
包含预览图片和标题的简单磁贴：
<Tile href="/components/tabs" title="Tabs Component">
<img src="/_jd/images/tabs-preview.webp?v=mwdojjfh" alt="Tabs" />
</Tile>带描述的 Tile
添加描述以提供更多背景信息：
<Tile
href="/components/tabs"
title="Tabs Component"
description="Organize content into switchable tabbed sections"
>
<img src="/_jd/images/tabs-preview.webp?v=mwdojjfh" alt="Tabs" />
</Tile>Tile 与 Card
| 特性 | 磁贴 | 卡片 |
|---|---|---|
| 视觉重点 | 图片优先，带图案背景 | 图标 + 标题 + 描述 |
| 适用场景 | 集成、模板、画廊 | 导航、功能列表、行动号召 |
| 图片处理 | 大型预览区域 | 小图标 |
| 文字内容 | 标题 + 可选描述 | 标题 + 描述 + 图标 |
**经验法则：**截图或徽标适合使用磁贴；文字较多的内容适合使用卡片。
网格布局
使用 Columns 以网格形式显示多个磁贴：
深色模式图片
使用 Tailwind 类在浅色和深色模式下显示不同的图片：
<Tile href="/customization/theming" title="Theming">
<img src="/_jd/images/logo-light.webp?v=mwdojjfh" alt="Theme" className="dark:hidden" data-no-style="true" />
<img src="/_jd/images/logo-dark.webp?v=mwdojjfh" alt="Theme" className="hidden dark:block" data-no-style="true" />
</Tile>noStyle 属性会关闭默认图片样式。若不使用该属性，深色模式类将无法正常工作。
属性
磁贴链接指向的 URL。接受内部路径（/docs/intro）或外部 URL（https://example.com）。外部链接会在新标签页中打开。
显示在预览区域下方的标题文本。
标题下方的可选描述文本。
在预览区域中显示的内容，通常是图片或 SVG。
接下来做什么？