ant-design/components/card/index.zh-CN.md
Tom Xu d44f404eae
docs: sort api (#27251)
* chore: improve sort api table scripts

* sort api

* add ignore

* Revert "sort api"

This reverts commit 343505d5f09d69349ce1fbdaea2a9faa7e852207.

* sort api

* Update package.json

* sort api

* Delete sort-api.js

* sort api

* sort api

* sort api

* fix

* Update index.zh-CN.md

* fix input-number

* fix input-number

* sort func

* fix

* Method moved to the end

* carousel method
2020-10-21 10:33:43 +08:00

2.2 KiB
Raw Blame History

category type title subtitle cols cover
Components 数据展示 Card 卡片 1 https://gw.alipayobjects.com/zos/antfincdn/NqXt8DJhky/Card.svg

通用卡片容器。

何时使用

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

API

<Card title="卡片标题">卡片内容</Card>

Card

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

Card.Grid

参数 说明 类型 默认值 版本
className 网格容器类名 string -
hoverable 鼠标移过时可浮起 boolean true
style 定义网格容器类名的样式 CSSProperties -

Card.Meta

参数 说明 类型 默认值 版本
avatar 头像/图标 ReactNode -
className 容器类名 string -
description 描述内容 ReactNode -
style 定义容器类名的样式 CSSProperties -
title 标题内容 ReactNode -