mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-15 17:19:11 +08:00
40e77c40d3
* docs: add dark overview * docs: show dark cover in dark theme * docs: update cover
3.4 KiB
3.4 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
API
<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 | - | |
bodyStyle | Inline style to apply to the card content | CSSProperties | - | |
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 | - | |
headStyle | Inline style to apply to the card head | CSSProperties | - | |
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 | Array<{key: string, tab: ReactNode}> | - | |
tabProps | Tabs | - | - | |
title | Card title | ReactNode | - | |
type | Card style type, can be set to inner or not set |
string | - | |
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 | - |