mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 09:26:06 +08:00
a42b9a29b1
Some checks failed
Publish Any Commit / build (push) Has been cancelled
🔀 Sync mirror to Gitee / mirror (push) Has been cancelled
✅ test / lint (push) Has been cancelled
✅ test / test-react-legacy (16, 1/2) (push) Has been cancelled
✅ test / test-react-legacy (16, 2/2) (push) Has been cancelled
✅ test / test-react-legacy (17, 1/2) (push) Has been cancelled
✅ test / test-react-legacy (17, 2/2) (push) Has been cancelled
✅ test / test-node (push) Has been cancelled
✅ test / test-react-latest (dom, 1/2) (push) Has been cancelled
✅ test / test-react-latest (dom, 2/2) (push) Has been cancelled
✅ test / build (push) Has been cancelled
✅ test / test lib/es module (es, 1/2) (push) Has been cancelled
✅ test / test lib/es module (es, 2/2) (push) Has been cancelled
✅ test / test lib/es module (lib, 1/2) (push) Has been cancelled
✅ test / test lib/es module (lib, 2/2) (push) Has been cancelled
👁️ Visual Regression Persist Start / test image (push) Has been cancelled
✅ test / test-react-latest-dist (dist, 1/2) (push) Has been cancelled
✅ test / test-react-latest-dist (dist, 2/2) (push) Has been cancelled
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Has been cancelled
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Has been cancelled
✅ test / test-coverage (push) Has been cancelled
57 lines
1.3 KiB
TypeScript
57 lines
1.3 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',
|
|
bodyPaddingSM: 22,
|
|
headerPaddingSM: 20,
|
|
headerPadding: 18,
|
|
bodyPadding: 26,
|
|
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>
|
|
);
|