展示类 · Card
卡片
常规的卡片容器,可以承载标题、段落、图片、列表等内容。

代码演示

如何引入

基础卡片

基础卡片包含标题、内容等部分。

简洁卡片

卡片可以只设置内容区域。

封面

可以使用 cover 属性设置封面。

边线和外边框

可以使用 bordered 设置卡片是否有外边框,默认为 true 。同时,也可以使用 headerLine 设置内容区和标题区是否有边线, footerLine 设置内容区和页尾区是否有边线。

阴影

可以使用 shadows 设置显示阴影的时机,可选值为: hover(hover 时显示阴影)、always(始终显示阴影),如果不设置该属性则没有阴影。

更灵活的内容展示

可以利用 Card.Meta 支持更灵活的内容,允许设置 titleavatardescription

内部卡片

卡片内部可以嵌套其他卡片。

栅格卡片

在系统概览页面常常和栅格进行配合。

内置预加载

可以使用 Cardloading 属性来设置卡片内容区是否显示占位元素,当它为 true 时将显示占位元素,反之则不显示。

更丰富的预加载效果

Card 自带的 loading 属性只能设置内容区的预加载效果,如果你想要设置其他部分的预加载,或者自定义更丰富的预加载效果,你可以结合 Skeleton 组件来实现。

带页签的卡片

可以结合 Tabs 组件,实现带页签的卡片。

卡片操作区

actions 接收 ReactNode 数组,元素间将以 12px 的水平间距展示于内容区底部。

卡片组

CardGroup 中的卡片将呈现为等间距排列,利用 spacing 属性可以设置卡片间距大小。

网格型卡片组

使用 CardGrouptype 属性,可以将卡片组设置为网格型。

API 参考

Card
属性说明类型默认值版本
actions卡片操作组,位于卡片内容区的底部Array<ReactNode>-1.21.0
bodyStyle卡片内容区内联样式CSSProperties-1.21.0
bordered是否设置卡片的外边框booleantrue1.21.0
className卡片的样式类名string-1.21.0
cover卡片封面ReactNode-1.21.0
headerExtraContent卡片标题右侧的额外内容ReactNode-1.21.0
footer自定义卡片页脚ReactNode-1.21.0
footerLine卡片页脚区与内容区是否有边线booleanfalse1.21.0
footerStyle卡片页脚区内联样式CSSProperties-1.21.0
header自定义卡片头部,若传入将覆盖 titleheaderExtraContentReactNode-1.21.0
headerLine卡片标题区与内容区是否有边线booleantrue1.21.0
headerStyle卡片标题区内联样式CSSProperties-1.21.0
loading是否设置加载时的占位booleanfalse1.21.0
shadows设置显示阴影的时机,如果不设置该属性则没有阴影,可选值:hoveralwaysstring-1.21.0
style卡片内联样式CSSProperties-1.21.0
title卡片标题ReactNode-1.21.0
CardGroup
属性说明类型默认值版本
className卡片组的样式类名string-1.21.0
spacing间距尺寸,支持数值或数组,数组形如: [水平间距,垂直间距]number | number[]12px1.21.0
style卡片组的内联样式CSSProperties-1.21.0
type可以把卡片组设置为网格型,设置完该属性后将覆盖 spacing 属性,可选值:gridstring-1.21.0
Card.Meta
属性说明类型默认值版本
avatar头像ReactNode-1.21.0
className类名string-1.21.0
description描述ReactNode-1.21.0
style内联样式CSSProperties-1.21.0
title标题ReactNode-1.21.0

Accessibility

  • Card 支持传入 aria-label 来表示该 Card 作用
  • Card loading 时,将开启 aria-busy
  • Card 为容器型组件,卡片内部的任何元素需要遵循各自的可访问性指南

文案规范

  • 卡片标题
    • 卡片标题应具有信息描述性,聚焦最重要的信息
    • 尽量将标题限制在 1 个短语或句段中
    • 卡片标题应句子大小写书写
    • 不要以标点符号结尾(除了问号)
  • 正文
    • 可操作的:使用祈使句而不是“你可以”来描述正文,可以更好的告诉用户可以做什么
✅ 推荐用法❌ 不推荐用法
Get order progress for detailsYou can get order progress for details
  • 总是优先说最重要的信息
  • 使用 “Need to”而不是”must“

设计变量