代码演示
如何引入
jsx
import { Card } from '@kousum/semi-ui-vue';基础卡片
基础卡片包含标题、内容等部分。
简洁卡片
卡片可以只设置内容区域。
封面
可以使用 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 为容器型组件，卡片内部的任何元素需要遵循各自的可访问性指南
文案规范
- 卡片标题
- 卡片标题应具有信息描述性，聚焦最重要的信息
- 尽量将标题限制在 1 个短语或句段中
- 卡片标题应句子大小写书写
- 不要以标点符号结尾（除了问号）
- 正文
- 可操作的：使用祈使句而不是“你可以”来描述正文，可以更好的告诉用户可以做什么
| ✅ 推荐用法 | ❌ 不推荐用法 |
|---|---|
| Get order progress for details | You can get order progress for details |
- 总是优先说最重要的信息
- 使用 “Need to”而不是”must“