跳到导航
编写内容组件

卡片组件

以 Markdown 格式查看

<Card> 组件可在视觉上独立的方框中组织相关内容和操作。可选元素包括图标、标题和链接。

您可以使用单个卡片，也可以通过 <CardGroup> 组件将多个卡片排列成响应式网格布局。卡片组适用于功能列表、导航选项或分步指南。

用法

浇水指南

icon 字段引用一个 Font Awesome 图标。

Markdown
<Card 
    title="浇水指南" 
    icon="regular droplet" 
    href="/learn/docs/writing-content/components/cards"
>
    icon 字段引用一个 Font Awesome 图标。
</Card>

变体

卡片组

浇水

了解如何为植物浇水

光照

了解不同植物的光照需求

土壤

为植物的最佳生长选择合适的土壤

肥料

施肥以保持植物健康

Markdown
<CardGroup cols={2}>
  <Card 
    title="浇水" 
    icon="regular droplet" 
    href="/learn/docs/writing-content/components/cards"
  >
    了解如何为植物浇水
  </Card>
  <Card 
    title="光照" 
    icon="regular sun" 
    href="/learn/docs/writing-content/components/cards"
  >
    了解不同植物的光照需求
  </Card>
  <Card 
    title="土壤" 
    icon="regular seedling" 
    href="/learn/docs/writing-content/components/cards"
  >
    为植物的最佳生长选择合适的土壤
  </Card>
  <Card 
    title="肥料" 
    icon="regular flask" 
    href="/learn/docs/writing-content/components/cards"
  >
    施肥以保持植物健康
  </Card>
</CardGroup>

自定义图标

您可以通过传入 image 标签或指向 SVG 文件的相对路径来使用自定义图标。

Plant icon
植物护理

传入 image 标签以使用自定义图标。

Markdown
<Card 
    title="植物护理" 
    icon={<img src="https://images.unsplash.com/photo-1466781783364-36c955e42a7f?w=100" alt="Plant icon"/>} 
    href="/learn/docs/writing-content/components/cards"
>
    传入 image 标签以使用自定义图标。
</Card>

使用项目中存储的 SVG 文件的相对路径：

Markdown
<Card 
    title="蕨类植物种类" 
    icon="./images/fern-leaf.svg"
    href="/learn/docs/writing-content/components/cards"
>
    使用相对路径引用项目中的 SVG 文件。
</Card>

自定义图标位置

位置

您可以将图标位置设置为 left 或 top。

Markdown
<Card 
    title="位置" 
    icon="regular globe" 
    iconPosition="left"
>
    您可以将图标位置设置为 `left` 或 `top`。
</Card>

自定义图标大小

大小

图标大小按 iconSize * 4 像素计算。例如要得到 40px 图标，请将 iconSize 设置为 10（10 * 4 = 40px）。

Markdown
<Card
    title="大小"
    icon="regular globe"
    iconSize={10}
>
    图标大小按 `iconSize * 4` 像素计算。例如要得到 `40px` 图标，请将 `iconSize` 设置为 `10`（10 * 4 = 40px）。
</Card>

图片

卡片支持在内容旁边显示图片。图片会自动调整大小以适应卡片尺寸，因此通常无需指定 imageWidth 或 imageHeight，除非您希望覆盖默认行为。

植物护理指南
植物护理指南

在卡片内容旁边显示图片。图片会自动缩放以适配卡片。

Markdown
<Card 
    title="植物护理指南" 
    src="https://images.unsplash.com/photo-1466781783364-36c955e42a7f"
    imagePosition="left"
>
    在卡片内容旁边显示图片。图片会自动缩放以适配卡片。
</Card>
植物入门指南
植物入门指南

将图片置于卡片顶部，呈现横幅样式的布局。

Markdown
<Card
    title="植物入门指南" 
    src="https://images.unsplash.com/photo-1459411552884-841db9b3cc2a"
    imagePosition="top"
>
    将图片置于卡片顶部，呈现横幅样式的布局。
</Card>

属性

<CardGroup> 属性

cols
numberDefaults to 2

网格中显示的列数

<Card> 属性

title
string

卡片中显示的标题文本

icon
string | img

Font Awesome 图标类名（例如 ‘brands python’）、指向 SVG 文件的相对路径（例如 ’./images/icon.svg’），或自定义图像元素

href
string

可选的 URL，使整张卡片可点击

iconPosition
'top' | 'left'Defaults to top

图标相对于文本的位置。

iconSize
numberDefaults to 8

图标的大小（宽度和高度），按 iconSize * 4 像素计算（例如，6 = 24px × 24px，8 = 32px × 32px）。

color
string

图标的十六进制颜色值（例如 #FF0F00）。如果同时设置了 lightModeColor 和 darkModeColor，则忽略此值

darkModeColor
string

深色模式下图标的十六进制颜色值（例如 #FF0F00）

lightModeColor
string

浅色模式下图标的十六进制颜色值（例如 #FF0F00）

src
string

要在卡片中显示的图片 URL。设置后，卡片会在内容旁边显示该图片。

imagePosition
'top' | 'left' | 'right' | 'bottom'Defaults to top

图片相对于卡片内容的位置。使用 imagePosition 控制布局。

imageWidth
string

图片宽度（例如 200px、50%）。仅在需要覆盖默认尺寸时使用。默认情况下，图片会自动调整大小以适配卡片。

imageHeight
string

图片高度（例如 150px、100%）。仅在需要覆盖默认尺寸时使用。默认情况下，图片会自动调整大小以适配卡片。