mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
locadex-agent[bot]
be513d4fcf
Co-authored-by: locadex-agent[bot] <217277504+locadex-agent[bot]@users.noreply.github.com>
145 lines
3.8 KiB
Plaintext
145 lines
3.8 KiB
Plaintext
---
|
|
title: "卡片"
|
|
description: "使用可自定义布局和图标突出显示关键信息或链接。"
|
|
keywords: ["卡片", "可视化容器"]
|
|
---
|
|
|
|
import IconsOptional from "/snippets/zh/icons-optional.mdx";
|
|
|
|
使用卡片为内容创建可视化容器。卡片是一种灵活的容器，可以包含文本、图标、图片和链接。
|
|
|
|
<div id="basic-card">
|
|
## 基础卡片
|
|
</div>
|
|
|
|
<Card title="卡片标题" icon="text-align-start" href="/zh/components/columns">
|
|
这是带有图标和链接的卡片用法。点击此卡片
|
|
将跳转到 Columns 页面。
|
|
</Card>
|
|
|
|
```mdx Card example
|
|
<Card title="卡片标题" icon="text-align-start" href="/zh/components/columns">
|
|
这是使用带有图标和链接的卡片的示例。点击此卡片会跳转到列组件页面。
|
|
</Card>
|
|
```
|
|
|
|
<div id="card-variations">
|
|
## 卡片样式变体
|
|
</div>
|
|
|
|
卡片支持多种布局和样式选项，可满足不同的内容需求。
|
|
|
|
<div id="horizontal-layout">
|
|
### 水平布局
|
|
</div>
|
|
|
|
添加 `horizontal` 属性，以更紧凑的水平布局显示卡片。
|
|
|
|
<Card title="水平卡片" icon="text-align-start" horizontal>
|
|
这是一个水平卡片示例。
|
|
</Card>
|
|
|
|
```mdx Horizontal card example
|
|
<Card title="横向卡片" icon="text-align-start" horizontal>
|
|
这是横向卡片的示例。
|
|
</Card>
|
|
```
|
|
|
|
<div id="image-cards">
|
|
### 图片卡片
|
|
</div>
|
|
|
|
添加一个 `img` 属性即可在卡片顶部显示图片。
|
|
|
|
<Card title="图片卡片" img="https://mintlify-assets.b-cdn.net/yosemite.jpg">
|
|
这是一个带图片的卡片示例。
|
|
</Card>
|
|
|
|
```mdx Image card example
|
|
<Card title="图片卡片" img="/images/card-with-image.png">
|
|
这是一个带图片的卡片示例。
|
|
</Card>
|
|
```
|
|
|
|
<div id="link-cards-with-custom-ctas">
|
|
### 带有自定义 CTA 的链接卡片
|
|
</div>
|
|
|
|
你可以自定义号召性用语的文本，并控制是否显示箭头。默认情况下，箭头只会显示在外部链接上。
|
|
|
|
<Card title="链接卡片" icon="link" href="/zh/components/columns" arrow="true" cta="点击这里">
|
|
这是一个带有图标和链接的卡片示例。点击此卡片会将你带到 Columns 页面。
|
|
</Card>
|
|
|
|
```mdx Link card example
|
|
<Card
|
|
title="链接卡片"
|
|
icon="link"
|
|
href="/zh/components/columns"
|
|
arrow="true"
|
|
cta="点击这里"
|
|
>
|
|
这是一个带有图标和链接的卡片示例。点击此卡片可跳转到列组件页面。
|
|
</Card>
|
|
```
|
|
|
|
<div id="group-cards">
|
|
## 分组卡片
|
|
</div>
|
|
|
|
使用 [Columns 组件](/zh/components/columns) 将多个卡片并排展示。Columns 组件支持 1 到 4 列，并会自动适配小屏幕。
|
|
|
|
<Columns cols={2}>
|
|
<Card title="第一张卡片" icon="panel-left-close">
|
|
这是第一张卡片。
|
|
</Card>
|
|
|
|
<Card title="第二张卡片" icon="panel-right-close">
|
|
这是第二张卡片。
|
|
</Card>
|
|
</Columns>
|
|
|
|
```mdx Columns example
|
|
<Columns cols={2}>
|
|
<Card title="第一张卡片" icon="panel-left-close">
|
|
这是第一张卡片。
|
|
</Card>
|
|
<Card title="第二张卡片" icon="panel-right-close">
|
|
这是第二张卡片。
|
|
</Card>
|
|
</Columns>
|
|
```
|
|
|
|
<div id="properties">
|
|
## 属性
|
|
</div>
|
|
|
|
<ResponseField name="title" type="string" required>
|
|
显示在卡片上的标题。
|
|
</ResponseField>
|
|
|
|
<IconsOptional />
|
|
|
|
<ResponseField name="color" type="string">
|
|
图标颜色，使用十六进制色值（例如 `#FF6B6B`）。
|
|
</ResponseField>
|
|
|
|
<ResponseField name="href" type="string">
|
|
卡片被点击时跳转到的 URL。
|
|
</ResponseField>
|
|
|
|
<ResponseField name="horizontal" type="boolean">
|
|
以紧凑的横向布局显示卡片。
|
|
</ResponseField>
|
|
|
|
<ResponseField name="img" type="string">
|
|
在卡片顶部显示的图片 URL 或本地路径。
|
|
</ResponseField>
|
|
|
|
<ResponseField name="cta" type="string">
|
|
操作按钮的自定义文本。
|
|
</ResponseField>
|
|
|
|
<ResponseField name="arrow" type="boolean">
|
|
是否显示链接箭头图标。
|
|
</ResponseField> |