## Card 组件示例
### 典型卡片
包含标题、内容、操作区域。
```tsx
import React from 'react';
import { Card, Space } from 'antd';
const App: React.FC = () => (
More} style={{ width: 300 }}>
Card content
Card content
Card content
More} style={{ width: 300 }}>
Card content
Card content
Card content
);
export default App;
```
### 无边框
在灰色背景上使用无边框的卡片。
```tsx
import React from 'react';
import { Card } from 'antd';
const App: React.FC = () => (
Card content
Card content
Card content
);
export default App;
```
### 简洁卡片
只包含内容区域。
```tsx
import React from 'react';
import { Card } from 'antd';
const App: React.FC = () => (
Card content
Card content
Card content
);
export default App;
```
### 更灵活的内容展示
可以利用 `Card.Meta` 支持更灵活的内容。
```tsx
import React from 'react';
import { Card } from 'antd';
const { Meta } = Card;
const App: React.FC = () => (
}
>
);
export default App;
```
### 栅格卡片
在系统概览页面常常和栅格进行配合。
```tsx
import React from 'react';
import { Card, Col, Row } from 'antd';
const App: React.FC = () => (
Card content
Card content
Card content
);
export default App;
```
### 预加载的卡片
数据读入前会有文本块样式。
```tsx
import React, { useState } from 'react';
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
import { Avatar, Card, Flex, Switch } from 'antd';
const actions: React.ReactNode[] = [
,
,
,
];
const App: React.FC = () => {
const [loading, setLoading] = useState(true);
return (
setLoading(!checked)} />
}
title="Card title"
description={
<>
This is the description
This is the description
}
/>
}
title="Card title"
description={
<>
This is the description
This is the description
}
/>
);
};
export default App;
```
### 网格型内嵌卡片
一种常见的卡片内容区隔模式。
```tsx
import React from 'react';
import { Card } from 'antd';
const gridStyle: React.CSSProperties = {
width: '25%',
textAlign: 'center',
};
const App: React.FC = () => (
Content
Content
Content
Content
Content
Content
Content
);
export default App;
```
### 内部卡片
可以放在普通卡片内部，展示多层级结构的信息。
```tsx
import React from 'react';
import { Card } from 'antd';
const App: React.FC = () => (
More}>
Inner Card content
More}
>
Inner Card content
);
export default App;
```
### 带页签的卡片
可承载更多内容。
```tsx
import React, { useState } from 'react';
import { Card } from 'antd';
const tabList = [
{
key: 'tab1',
tab: 'tab1',
},
{
key: 'tab2',
tab: 'tab2',
},
];
const contentList: Record = {
tab1: content1
,
tab2: content2
,
};
const tabListNoTitle = [
{
key: 'article',
label: 'article',
},
{
key: 'app',
label: 'app',
},
{
key: 'project',
label: 'project',
},
];
const contentListNoTitle: Record = {
article: article content
,
app: app content
,
project: project content
,
};
const App: React.FC = () => {
const [activeTabKey1, setActiveTabKey1] = useState('tab1');
const [activeTabKey2, setActiveTabKey2] = useState('app');
const onTab1Change = (key: string) => {
setActiveTabKey1(key);
};
const onTab2Change = (key: string) => {
setActiveTabKey2(key);
};
return (
<>
More}
tabList={tabList}
activeTabKey={activeTabKey1}
onTabChange={onTab1Change}
>
{contentList[activeTabKey1]}
More}
onTabChange={onTab2Change}
tabProps={{ size: 'medium' }}
>
{contentListNoTitle[activeTabKey2]}
);
};
export default App;
```
### 支持更多内容配置
一种支持封面、头像、标题和描述信息的卡片。
```tsx
import React from 'react';
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
import { Avatar, Card } from 'antd';
const { Meta } = Card;
const App: React.FC = () => (
}
actions={[
,
,
,
]}
>
}
title="Card title"
description="This is the description"
/>
);
export default App;
```
### 自定义语义结构的样式和类
通过 `classNames` 和 `styles` 传入对象/函数可以自定义 Card 的[语义化结构](#semantic-dom)样式。
```tsx
import React from 'react';
import { EditOutlined, HeartOutlined, ShareAltOutlined } from '@ant-design/icons';
import { Avatar, Button, Card, Flex } from 'antd';
import type { CardMetaProps, CardProps } from 'antd';
import { createStyles } from 'antd-style';
const { Meta } = Card;
const useStyles = createStyles(({ token }) => ({
root: {
width: 300,
backgroundColor: token.colorBgContainer,
borderRadius: token.borderRadius,
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
border: `1px solid ${token.colorBorderSecondary}`,
},
header: {
borderBottom: 'none',
paddingBottom: 8,
},
body: {
paddingTop: 0,
},
}));
const stylesCard: CardProps['styles'] = {
root: {
boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
borderRadius: 8,
},
title: {
fontSize: 16,
fontWeight: 500,
},
};
const stylesCardFn: CardProps['styles'] = (info) => {
if (info.props.variant === 'outlined') {
return {
root: {
borderColor: '#696FC7',
boxShadow: '0 2px 8px #A7AAE1',
borderRadius: 8,
},
extra: {
color: '#696FC7',
},
title: {
fontSize: 16,
fontWeight: 500,
color: '#A7AAE1',
},
} satisfies CardProps['styles'];
}
};
const stylesCardMeta: CardMetaProps['styles'] = {
title: {
color: '#A7AAE1',
},
description: {
color: '#A7AAE1',
},
};
const actions = [
,
,
,
];
const App: React.FC = () => {
const { styles: classNames } = useStyles();
const sharedCardProps: CardProps = {
classNames,
actions,
};
const sharedCardMetaProps: CardMetaProps = {
avatar: ,
description: 'This is the description',
};
return (
More}
variant="borderless"
>
More
}
>
);
};
export default App;
```
### 封面和操作区不渲染 body
```tsx
import React from 'react';
import { Card } from 'antd';
const App: React.FC = () => (
}
actions={[setting, edit]}
/>
);
export default App;
```
### 组件 Token
Component Token Debug.
```tsx
import React from 'react';
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
import { Card, ConfigProvider } from 'antd';
export default () => (
,
,
,
]}
extra="More"
tabList={[
{
key: 'tab1',
label: 'tab1',
},
{
key: 'tab2',
label: 'tab2',
},
]}
>
Card content
Card content
Card content
More} style={{ width: 300 }}>
Card content
Card content
Card content
);
```