代码演示
如何引入
基础卡片
基础卡片包含标题、内容等部分。
简洁卡片
卡片可以只设置内容区域。
封面
可以使用
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 为容器型组件,卡片内部的任何元素需要遵循各自的可访问性指南。