2017-08-09 14:34:10 +08:00
|
|
|
---
|
|
|
|
order: 8
|
|
|
|
title:
|
|
|
|
zh-CN: 带页签的卡片
|
|
|
|
en-US: With tabs
|
|
|
|
---
|
|
|
|
|
|
|
|
## zh-CN
|
|
|
|
|
|
|
|
可承载更多内容。
|
|
|
|
|
|
|
|
## en-US
|
|
|
|
|
|
|
|
More content can be hosted.
|
|
|
|
|
2019-05-07 14:57:32 +08:00
|
|
|
```jsx
|
2021-10-30 14:46:34 +08:00
|
|
|
import React, { useState } from 'react';
|
2017-08-09 14:34:10 +08:00
|
|
|
import { Card } from 'antd';
|
|
|
|
|
2019-05-07 14:57:32 +08:00
|
|
|
const tabList = [
|
|
|
|
{
|
|
|
|
key: 'tab1',
|
|
|
|
tab: 'tab1',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'tab2',
|
|
|
|
tab: 'tab2',
|
|
|
|
},
|
|
|
|
];
|
2017-08-09 14:34:10 +08:00
|
|
|
|
|
|
|
const contentList = {
|
|
|
|
tab1: <p>content1</p>,
|
|
|
|
tab2: <p>content2</p>,
|
|
|
|
};
|
|
|
|
|
2019-05-07 14:57:32 +08:00
|
|
|
const tabListNoTitle = [
|
|
|
|
{
|
|
|
|
key: 'article',
|
|
|
|
tab: 'article',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'app',
|
|
|
|
tab: 'app',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'project',
|
|
|
|
tab: 'project',
|
|
|
|
},
|
|
|
|
];
|
2017-08-14 21:43:32 +08:00
|
|
|
|
|
|
|
const contentListNoTitle = {
|
|
|
|
article: <p>article content</p>,
|
|
|
|
app: <p>app content</p>,
|
|
|
|
project: <p>project content</p>,
|
|
|
|
};
|
|
|
|
|
2021-10-30 14:46:34 +08:00
|
|
|
const TabsCard = () => {
|
|
|
|
const [activeTabKey1, setActiveTabKey1] = useState('tab1');
|
|
|
|
const [activeTabKey2, setActiveTabKey2] = useState('app');
|
2018-06-27 15:55:04 +08:00
|
|
|
|
2021-10-30 14:46:34 +08:00
|
|
|
const onTab1Change = key => {
|
|
|
|
setActiveTabKey1(key);
|
|
|
|
};
|
|
|
|
const onTab2Change = key => {
|
|
|
|
setActiveTabKey2(key);
|
2019-05-07 14:57:32 +08:00
|
|
|
};
|
2018-06-27 15:55:04 +08:00
|
|
|
|
2021-10-30 14:46:34 +08:00
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Card
|
|
|
|
style={{ width: '100%' }}
|
|
|
|
title="Card title"
|
|
|
|
extra={<a href="#">More</a>}
|
|
|
|
tabList={tabList}
|
|
|
|
activeTabKey={activeTabKey1}
|
|
|
|
onTabChange={key => {
|
|
|
|
onTab1Change(key);
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{contentList[activeTabKey1]}
|
|
|
|
</Card>
|
|
|
|
<br />
|
|
|
|
<br />
|
|
|
|
<Card
|
|
|
|
style={{ width: '100%' }}
|
|
|
|
tabList={tabListNoTitle}
|
|
|
|
activeTabKey={activeTabKey2}
|
|
|
|
tabBarExtraContent={<a href="#">More</a>}
|
|
|
|
onTabChange={key => {
|
|
|
|
onTab2Change(key);
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{contentListNoTitle[activeTabKey2]}
|
|
|
|
</Card>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
};
|
2017-08-09 14:34:10 +08:00
|
|
|
|
2018-07-29 15:30:47 +08:00
|
|
|
ReactDOM.render(<TabsCard />, mountNode);
|
2019-05-07 14:57:32 +08:00
|
|
|
```
|