mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-21 13:18:04 +08:00
502dac12aa
* docs: fix code * feat: lint * feat: prettier * feat: test * feat: review * feat: format html * feat: format html
53 lines
1.2 KiB
TypeScript
53 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
|
|
import { Card, ConfigProvider } from 'antd';
|
|
|
|
export default () => (
|
|
<ConfigProvider
|
|
theme={{
|
|
components: {
|
|
Card: {
|
|
headerBg: '#e6f4ff',
|
|
headerFontSize: 20,
|
|
headerFontSizeSM: 20,
|
|
headerHeight: 60,
|
|
headerHeightSM: 60,
|
|
actionsBg: '#e6f4ff',
|
|
actionsLiMargin: `2px 0`,
|
|
tabsMarginBottom: 0,
|
|
extraColor: 'rgba(0,0,0,0.25)',
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<Card
|
|
title="Card title"
|
|
actions={[
|
|
<SettingOutlined key="setting" />,
|
|
<EditOutlined key="edit" />,
|
|
<EllipsisOutlined key="ellipsis" />,
|
|
]}
|
|
extra="More"
|
|
tabList={[
|
|
{
|
|
key: 'tab1',
|
|
label: 'tab1',
|
|
},
|
|
{
|
|
key: 'tab2',
|
|
label: 'tab2',
|
|
},
|
|
]}
|
|
>
|
|
<p>Card content</p>
|
|
<p>Card content</p>
|
|
<p>Card content</p>
|
|
</Card>
|
|
<Card size="small" title="Small size card" extra={<a href="#">More</a>} style={{ width: 300 }}>
|
|
<p>Card content</p>
|
|
<p>Card content</p>
|
|
<p>Card content</p>
|
|
</Card>
|
|
</ConfigProvider>
|
|
);
|