ant-design/components/card/index.en-US.md
Arvin Xu dda650cc7b
docs: Update components cover (#24744)
* docs: Update components cover

#24629

* docs: Update components cover
2020-06-05 13:50:09 +08:00

2.7 KiB

category type title cols cover
Components Data Display Card 1 https://gw.alipayobjects.com/zos/alicdn/keNB-R8Y9/Card.svg

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.

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 -
headStyle Inline style to apply to the card head CSSProperties -
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 string|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
tabList List of TabPane's head. Array<{key: string, tab: ReactNode}> -
tabBarExtraContent Extra content in tab bar React.ReactNode -
size Size of card default | small default
title Card title string|ReactNode -
type Card style type, can be set to inner or not set string -
onTabChange Callback when tab is switched (key) => void -
tabProps Tabs - -

Card.Grid

Property Description Type Default Version
className className of container string -
hoverable Lift up when hovering card grid boolean true
style style object of container CSSProperties -

Card.Meta

Property Description Type Default Version
avatar avatar or icon ReactNode -
className className of container string -
description description content ReactNode -
style style object of container CSSProperties -
title title content ReactNode -