卡片

通用卡片容器。最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。

安装

yarn add @uyun/pro

import { Card } from "@uyun/pro";

包含标题、内容、操作区域。

在灰色背景上使用无边框的卡片。

只包含内容区域。

在系统概览页面常常和栅格进行配合。

数据读入前会有文本块样式。

一种常见的卡片内容区隔模式。

可以放在普通卡片内部，展示多层级结构的信息。

可承载更多内容。

一种支持封面、头像、标题和描述信息的卡片。

可以利用 Card.Meta 、Card.Data 和 Card.Label 支持更灵活的内容。

组合样式改变会改变原来的卡片样式，包括：

参数	说明	类型	默认值
actions	卡片操作组，位置在卡片底部	Array<ReactNode>	-
activeTabKey	当前激活页签的 key	string	-
bodyStyle	内容区域自定义样式	object	-
bordered	是否有边框	boolean	true
cover	卡片封面	ReactNode	-
defaultActiveTabKey	初始化选中页签的 key，如果没有设置 activeTabKey	string	第一个页签
extra	卡片右上角的操作区域	string \| ReactNode	-
headStyle	自定义标题区域样式	object	-
integrated	组合样式改变	boolean	-
hoverable	鼠标移过时可浮起	boolean	false
loading	当卡片内容还在加载中时，可以用 loading 展示一个占位	boolean	false
tabList	页签标题列表	Array<`{key: string, tab: ReactNode}`>	-
title	卡片标题	string \| ReactNode	-
type	卡片类型，可设置为 `inner`、`data` 或不设置	string	-
onTabChange	页签切换的回调	(key) => void	-

参数	说明	类型	默认值
className	网格容器类名	string	-
style	定义网格容器类名的样式	object	-

参数	说明	类型	默认值
colon	配合 label 属性使用，表示是否显示 label 后面的冒号	boolean	true
label	label 标签的文本	string \| ReactNode
labelCol	label 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}`	object
wrapperCol	需要为值设置布局样式时，使用该属性，用法同 labelCol	object