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

折叠面板

两种变体
Tile example
<Tile href="/components/accordions" title="折叠面板" description="两种样式">
  <img src="/images/tiles/accordion-light.svg" className="block dark:hidden" />
  <img src="/images/tiles/accordion-dark.svg" className="hidden dark:block" />
</Tile>

​
网格布局

将 Tile 与 Columns 组件 搭配使用，构建一个响应式的视觉预览网格。

Accordion

两种变体

Accordion

两种变体

Accordion

两种变体

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

​
属性

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