磁贴

在网格布局中展示包含标题和说明的视觉预览。

使用磁贴来创建带有图案背景、标题和说明的视觉展示元素。磁贴非常适合在网格布局中展示组件预览、功能亮点或导航项。

折叠面板

两种变体

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

两种样式

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 · required

点击卡片时要跳转到的 URL。

title · string

显示在卡片预览下方的标题。

description · string

显示在标题下方的简短说明。

children · React.ReactNode · required

显示在卡片预览区域的内容，通常为图片或 SVG 图像。