ant-design/components/card/demo/component-token.tsx
叶枫 502dac12aa
docs: format code ()
* docs: fix code

* feat: lint

* feat: prettier

* feat: test

* feat: review

* feat: format html

* feat: format html
2024-04-08 14:04:08 +08:00

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>
);