通用卡片容器
何时使用
最基础的卡片容器,可承载文字、列表、图片、段落,常用于后台概览页面。
API
Card
| 参数 |
说明 |
类型 |
默认值 |
版本 |
| activeTabKey |
当前激活页签的 key |
string |
- |
|
| bodyStyle |
内容区域自定义样式 |
object |
- |
|
| bordered |
是否有边框 |
boolean |
true |
|
| defaultActiveTabKey |
初始化选中页签的 key,如果没有设置 activeTabKey |
string |
第一个页签 |
|
| extra |
卡片右上角的操作区域 |
string|slot |
- |
|
| headStyle |
自定义标题区域样式 |
object |
- |
|
| hoverable |
鼠标移过时可浮起 |
boolean |
false |
|
| loading |
当卡片内容还在加载中时,可以用 loading 展示一个占位 |
boolean |
false |
|
| size |
card 的尺寸 |
default | small |
default |
|
| tabList |
页签标题列表, 可以通过 customTab(v3.0) 插槽自定义 tab |
Array<{key: string, tab: any}> |
- |
|
| title |
卡片标题 |
string|slot |
- |
|
| type |
卡片类型,可设置为 inner 或 不设置 |
string |
- |
|
Card 插槽
| 插槽名称 |
说明 |
参数 |
|
| actions |
卡片操作组,位置在卡片底部 |
- |
|
| cover |
卡片封面 |
- |
|
| customTab |
自定义 tabList tab 标签 |
{ item: tabList[number] } |
|
| extra |
卡片右上角的操作区域 |
- |
|
| tabBarExtraContent |
tab bar 上额外的元素 |
- |
|
| title |
卡片标题 |
- |
|
事件
| 事件名称 |
说明 |
回调参数 |
版本 |
|
| tabChange |
页签切换的回调 |
(key) => void |
- |
|
Card.Grid
Card.Meta
| 参数 |
说明 |
类型 |
默认值 |
版本 |
| avatar |
头像/图标 |
slot |
- |
|
| description |
描述内容 |
string|slot |
- |
|
| title |
标题内容 |
string|slot |
- |
|