跳转到主要内容
使用磁贴来创建带有图案背景、标题和说明的视觉展示元素。磁贴非常适合在网格布局中展示组件预览、功能亮点或导航项。
折叠面板组件预览折叠面板组件预览（深色模式）

折叠面板

两种变体
Tile example
<Tile href="/components/accordions" title="折叠面板" description="两种变体">
  <img src="/images/tiles/accordion-light.svg" alt="折叠面板组件预览" className="block dark:hidden" />
  <img src="/images/tiles/accordion-dark.svg" alt="折叠面板组件预览(深色模式)" className="hidden dark:block" />
</Tile>

​
网格布局

将卡片与 Columns 组件 组合使用，以创建响应式预览网格。
Accordion 组件预览Accordion 组件预览（深色模式）

Accordion

两种样式

Accordion 组件预览Accordion 组件预览（深色模式）

Accordion

两种样式

Accordion 组件预览Accordion 组件预览（深色模式）

Accordion

两种样式

Grid layout example
<Columns cols={3}>
  <Tile href="/components/accordions" title="折叠面板" description="两种样式">
    <img src="/images/tiles/accordion-light.svg" alt="折叠面板组件预览" className="block dark:hidden" />
    <img src="/images/tiles/accordion-dark.svg" alt="折叠面板组件预览（深色模式）" className="hidden dark:block" />
  </Tile>
  <Tile href="/components/accordions" title="折叠面板" description="两种样式">
    <img src="/images/tiles/accordion-light.svg" alt="折叠面板组件预览" className="block dark:hidden" />
    <img src="/images/tiles/accordion-dark.svg" alt="折叠面板组件预览（深色模式）" className="hidden dark:block" />
  </Tile>
  <Tile href="/components/accordions" title="折叠面板" description="两种样式">
    <img src="/images/tiles/accordion-light.svg" alt="折叠面板组件预览" className="block dark:hidden" />
    <img src="/images/tiles/accordion-dark.svg" alt="折叠面板组件预览（深色模式）" className="hidden dark:block" />
  </Tile>
</Columns>

​
属性

​
href
string
必填
点击卡片时要跳转到的 URL。
​
title
string
显示在卡片预览下方的标题。
​
description
string
显示在标题下方的简短说明。
​
children
React.ReactNode
必填
显示在卡片预览区域的内容，通常为图片或 SVG 图像。