Simple rectangular container.

API

Card

• [ ] actions: The action list, shows at the bottom of the Card Array<ReactNode> -
• [x] bodyStyle: Inline style to apply to the card content CSSProperties -
• [x] 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 -
• [x] extra: Content to render in the top-right corner of the card ReactNode -
• [x] headStyle: Inline style to apply to the card head CSSProperties -
• [ ] hoverable: Lift up when hovering card boolean false
• [x] loading: Shows a loading indicator while the contents of the card are being fetched boolean false
• [x] 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
• [ ] onTabChange: Callback when tab is switched
• [ ] activeTabKey: Current TabPane's key string -
• [x] title: Card title
• [ ] type: Card style type, can be set to inner or not set string -

Card.Grid

• [ ] className: The className of container string -
• [ ] hoverable: Lift up when hovering card grid boolean true
• [ ] style: The style object of container

Card.Card.Meta

• [ ] 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

Example

<Card

title="Default size card"
extra={<a href="#">More</a>}
style={{ width: 300 }}

<p>Card content</p>
<p>Card content</p>
<p>Card content</p>

Properties

• title :string
• size :string, values: ~w(default small), default: "default"
• extra :any
• bordered :boolean
• loading :boolean
• bodyStyle :string
• headStyle :string
• class :css_class
• style :string, default: "foo: bar"