mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
4b465465dd
Generated-By: mintlify-agent Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com>
85 lines
3.8 KiB
Plaintext
85 lines
3.8 KiB
Plaintext
---
|
|
title: "磁贴"
|
|
description: "使用 tiles 组件在响应式网格布局中展示带有图片缩略图、标题和描述的视觉预览。"
|
|
keywords: ["磁贴", "视觉预览", "网格", "展示"]
|
|
boost: 3
|
|
---
|
|
|
|
使用磁贴来创建带有图案背景、标题和说明的视觉展示元素。磁贴非常适合在网格布局中展示组件预览、功能亮点或导航项。
|
|
|
|
<Tile href="/zh/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>
|
|
|
|
```mdx 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>
|
|
```
|
|
|
|
<div id="grid-layout">
|
|
## 网格布局
|
|
</div>
|
|
|
|
将卡片与 [Columns 组件](/zh/components/columns) 组合使用，以创建响应式预览网格。
|
|
|
|
<Columns cols={3}>
|
|
<Tile href="/zh/components/accordions" title="Accordion" description="两种样式">
|
|
<img src="/images/tiles/accordion-light.svg" alt="Accordion 组件预览" className="block dark:hidden" />
|
|
|
|
<img src="/images/tiles/accordion-dark.svg" alt="Accordion 组件预览（深色模式）" className="hidden dark:block" />
|
|
</Tile>
|
|
|
|
<Tile href="/zh/components/accordions" title="Accordion" description="两种样式">
|
|
<img src="/images/tiles/accordion-light.svg" alt="Accordion 组件预览" className="block dark:hidden" />
|
|
|
|
<img src="/images/tiles/accordion-dark.svg" alt="Accordion 组件预览（深色模式）" className="hidden dark:block" />
|
|
</Tile>
|
|
|
|
<Tile href="/zh/components/accordions" title="Accordion" description="两种样式">
|
|
<img src="/images/tiles/accordion-light.svg" alt="Accordion 组件预览" className="block dark:hidden" />
|
|
|
|
<img src="/images/tiles/accordion-dark.svg" alt="Accordion 组件预览（深色模式）" className="hidden dark:block" />
|
|
</Tile>
|
|
</Columns>
|
|
|
|
```mdx 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>
|
|
```
|
|
|
|
<div id="properties">
|
|
## 属性
|
|
</div>
|
|
|
|
<ResponseField name="href" type="string" required>
|
|
点击卡片时要跳转到的 URL。
|
|
</ResponseField>
|
|
|
|
<ResponseField name="title" type="string">
|
|
显示在卡片预览下方的标题。
|
|
</ResponseField>
|
|
|
|
<ResponseField name="description" type="string">
|
|
显示在标题下方的简短说明。
|
|
</ResponseField>
|
|
|
|
<ResponseField name="children" type="React.ReactNode" required>
|
|
显示在卡片预览区域的内容，通常为图片或 SVG 图像。
|
|
</ResponseField>
|