mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-28 05:05:48 +08:00
6ed0254ad5
* feat: support classNames and styles for card * feat: add lost info * docs: update context of card * feat: optimize classNames and styles code of card * test: update card test case * feat: remove headWrapper * test: correct test * feat: remove redundant snapshot * feat: update config provider for card * feat: update classNames and styles of card * feat: add warning for headStyle and bodyStyle of card * test: replace bodyStyle to styles.body in demo of flex * docs: add jsDoc about deprecated for headStyle and bodyStyle * snap: update table counts of card from 3 to 4 * docs: update version for styles and classnames of card --------- Signed-off-by: zhoulixiang <18366276315@163.com> Co-authored-by: vagusX <vagusxl@gmail.com>
4.1 KiB
4.1 KiB
| category | group | title | cover | coverDark |
|---|---|---|---|---|
| Components | Data Display | Card | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*VXtCTp93KPAAAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a-8zR6rrupgAAAAAAAAAAAAADrJ8AQ/original |
Simple rectangular container.
When To Use
A card can be used to display content related to a single subject. The content can consist of multiple elements of varying types and sizes.
Examples
Basic card
No border
Simple card
Customized content
Card in column
Loading card
Grid card
Inner card
With tabs
Support more content configuration
Component Token
API
Common props ref：Common props
<Card title="Card title">Card content</Card>
Card
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| actions | The action list, shows at the bottom of the Card | Array<ReactNode> | - | |
| activeTabKey | Current TabPane's key | string | - | |
| bordered | Toggles rendering of the border around the card | boolean | true | |
| cover | Card cover | ReactNode | - | |
| defaultActiveTabKey | Initial active TabPane's key, if activeTabKey is not set |
string | - | |
| extra | Content to render in the top-right corner of the card | ReactNode | - | |
| hoverable | Lift up when hovering card | boolean | false | |
| loading | Shows a loading indicator while the contents of the card are being fetched | boolean | false | |
| size | Size of card | default | small |
default |
|
| tabBarExtraContent | Extra content in tab bar | ReactNode | - | |
| tabList | List of TabPane's head | TabItemType[] | - | |
| tabProps | Tabs | - | - | |
| title | Card title | ReactNode | - | |
| type | Card style type, can be set to inner or not set |
string | - | |
| classNames | Config Card build-in module's className | Record<SemanticDOM, string> | - | 5.14.0 |
| styles | Config Card build-in module's style | Record<SemanticDOM, string> | - | 5.14.0 |
| onTabChange | Callback when tab is switched | (key) => void | - |
Card.Grid
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| className | The className of container | string | - | |
| hoverable | Lift up when hovering card grid | boolean | true | |
| style | The style object of container | CSSProperties | - |
Card.Meta
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| avatar | Avatar or icon | ReactNode | - | |
| className | The className of container | string | - | |
| description | Description content | ReactNode | - | |
| style | The style object of container | CSSProperties | - | |
| title | Title content | ReactNode | - |
styles 和 classNames attribute
| 名称 | 说明 | 版本 |
|---|---|---|
| header | set header of card |
5.14.0 |
| body | set body of card |
5.14.0 |
| extra | set extra of card |
5.14.0 |
| title | set title of card |
5.14.0 |
| actions | set actions of card |
5.14.0 |
| cover | set cover of card |
5.14.0 |