代码演示
如何引入
基础卡片
基础卡片包含标题、内容等部分。
简洁卡片
卡片可以只设置内容区域。
封面
可以使用
cover 属性设置封面。边线和外边框
可以使用
bordered 设置卡片是否有外边框，默认为 true 。同时，也可以使用 headerLine 设置内容区和标题区是否有边线， footerLine 设置内容区和页尾区是否有边线。阴影
可以使用
shadows 设置显示阴影的时机，可选值为: hover（hover 时显示阴影）、always（始终显示阴影），如果不设置该属性则没有阴影。更灵活的内容展示
可以利用
Card.Meta 支持更灵活的内容，允许设置 title、avatar、description。内部卡片
卡片内部可以嵌套其他卡片。
栅格卡片
在系统概览页面常常和栅格进行配合。
内置预加载
可以使用
Card 的 loading 属性来设置卡片内容区是否显示占位元素，当它为 true 时将显示占位元素，反之则不显示。更丰富的预加载效果
Card 自带的 loading 属性只能设置内容区的预加载效果，如果你想要设置其他部分的预加载，或者自定义更丰富的预加载效果，你可以结合 Skeleton 组件来实现。带页签的卡片
可以结合 Tabs 组件，实现带页签的卡片。
卡片操作区
actions 接收 ReactNode 数组，元素间将以 12px 的水平间距展示于内容区底部。卡片组
CardGroup 中的卡片将呈现为等间距排列，利用 spacing 属性可以设置卡片间距大小。网格型卡片组
使用
CardGroup 的 type 属性，可以将卡片组设置为网格型。API 参考
Card
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| actions | 卡片操作组，位于卡片内容区的底部 | Array<ReactNode> | - | 1.21.0 |
| bodyStyle | 卡片内容区内联样式 | CSSProperties | - | 1.21.0 |
| bordered | 是否设置卡片的外边框 | boolean | true | 1.21.0 |
| className | 卡片的样式类名 | string | - | 1.21.0 |
| cover | 卡片封面 | ReactNode | - | 1.21.0 |
| headerExtraContent | 卡片标题右侧的额外内容 | ReactNode | - | 1.21.0 |
| footer | 自定义卡片页脚 | ReactNode | - | 1.21.0 |
| footerLine | 卡片页脚区与内容区是否有边线 | boolean | false | 1.21.0 |
| footerStyle | 卡片页脚区内联样式 | CSSProperties | - | 1.21.0 |
| header | 自定义卡片头部，若传入将覆盖 title 和 headerExtraContent | ReactNode | - | 1.21.0 |
| headerLine | 卡片标题区与内容区是否有边线 | boolean | true | 1.21.0 |
| headerStyle | 卡片标题区内联样式 | CSSProperties | - | 1.21.0 |
| loading | 是否设置加载时的占位 | boolean | false | 1.21.0 |
| shadows | 设置显示阴影的时机，如果不设置该属性则没有阴影，可选值：hover、always | string | - | 1.21.0 |
| style | 卡片内联样式 | CSSProperties | - | 1.21.0 |
| title | 卡片标题 | ReactNode | - | 1.21.0 |
CardGroup
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| className | 卡片组的样式类名 | string | - | 1.21.0 |
| spacing | 间距尺寸，支持数值或数组，数组形如: [水平间距,垂直间距] | number | number[] | 12px | 1.21.0 |
| style | 卡片组的内联样式 | CSSProperties | - | 1.21.0 |
| type | 可以把卡片组设置为网格型，设置完该属性后将覆盖 spacing 属性，可选值：grid | string | - | 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 为容器型组件，卡片内部的任何元素需要遵循各自的可访问性指南。
