mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-12 07:09:55 +08:00
e361b30ded
* 🎬 update Card demo * refactor card code * 🎬 update Tabs demo * update snapshot
1.7 KiB
1.7 KiB
order | title | ||||
---|---|---|---|---|---|
8 |
|
zh-CN
可承载更多内容。
en-US
More content can be hosted.
import { Card } from 'antd';
const tabList = [
{
key: 'tab1',
tab: 'tab1',
},
{
key: 'tab2',
tab: 'tab2',
},
];
const contentList = {
tab1: <p>content1</p>,
tab2: <p>content2</p>,
};
const tabListNoTitle = [
{
key: 'article',
tab: 'article',
},
{
key: 'app',
tab: 'app',
},
{
key: 'project',
tab: 'project',
},
];
const contentListNoTitle = {
article: <p>article content</p>,
app: <p>app content</p>,
project: <p>project content</p>,
};
class TabsCard extends React.Component {
state = {
key: 'tab1',
noTitleKey: 'app',
};
onTabChange = (key, type) => {
console.log(key, type);
this.setState({ [type]: key });
};
render() {
return (
<>
<Card
style={{ width: '100%' }}
title="Card title"
extra={<a href="#">More</a>}
tabList={tabList}
activeTabKey={this.state.key}
onTabChange={key => {
this.onTabChange(key, 'key');
}}
>
{contentList[this.state.key]}
</Card>
<br />
<br />
<Card
style={{ width: '100%' }}
tabList={tabListNoTitle}
activeTabKey={this.state.noTitleKey}
tabBarExtraContent={<a href="#">More</a>}
onTabChange={key => {
this.onTabChange(key, 'noTitleKey');
}}
>
{contentListNoTitle[this.state.noTitleKey]}
</Card>
</>
);
}
}
ReactDOM.render(<TabsCard />, mountNode);