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