mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-24 15:46:10 +08:00
88c629e4e9
* fix: descriptions buttom right padding style * feat: demo * feat: demo * feat: test * feat: style * feat: paddingInlineEnd * feat: test * feat: remove long demo * feat: add demo * feat: add demo * feat: add demo
145 lines
2.8 KiB
TypeScript
145 lines
2.8 KiB
TypeScript
import React, { useState } from 'react';
|
|
import type { DescriptionsProps, RadioChangeEvent } from 'antd';
|
|
import { Button, ConfigProvider, Descriptions, Radio } from 'antd';
|
|
|
|
const borderedItems: DescriptionsProps['items'] = [
|
|
{
|
|
key: '1',
|
|
label: 'Product',
|
|
children: 'Cloud Database',
|
|
},
|
|
{
|
|
key: '2',
|
|
label: 'Billing',
|
|
children: 'Prepaid',
|
|
},
|
|
{
|
|
key: '3',
|
|
label: 'Time',
|
|
children: '18:00:00',
|
|
},
|
|
{
|
|
key: '4',
|
|
label: 'Amount',
|
|
children: '$80.00',
|
|
},
|
|
{
|
|
key: '5',
|
|
label: 'Discount',
|
|
children: '$20.00',
|
|
},
|
|
{
|
|
key: '6',
|
|
label: 'Official',
|
|
children: '$60.00',
|
|
},
|
|
{
|
|
key: '7',
|
|
label: 'Config Info',
|
|
children: (
|
|
<>
|
|
Data disk type: MongoDB
|
|
<br />
|
|
Database version: 3.4
|
|
<br />
|
|
Package: dds.mongo.mid
|
|
<br />
|
|
Storage space: 10 GB
|
|
<br />
|
|
Replication factor: 3
|
|
<br />
|
|
Region: East China 1
|
|
<br />
|
|
</>
|
|
),
|
|
},
|
|
];
|
|
const items: DescriptionsProps['items'] = [
|
|
{
|
|
key: '1',
|
|
label: 'Product',
|
|
children: 'Cloud Database',
|
|
},
|
|
{
|
|
key: '2',
|
|
label: 'Billing',
|
|
children: 'Prepaid',
|
|
},
|
|
{
|
|
key: '3',
|
|
label: 'Time',
|
|
children: '18:00:00',
|
|
},
|
|
{
|
|
key: '4',
|
|
label: 'Amount',
|
|
children: '$80.00',
|
|
},
|
|
{
|
|
key: '5',
|
|
label: 'Discount',
|
|
children: '$20.00',
|
|
},
|
|
{
|
|
key: '6',
|
|
label: 'Official',
|
|
children: '$60.00',
|
|
},
|
|
];
|
|
|
|
const App: React.FC = () => {
|
|
const [size, setSize] = useState<'default' | 'middle' | 'small'>('default');
|
|
|
|
const onChange = (e: RadioChangeEvent) => {
|
|
console.log('size checked', e.target.value);
|
|
setSize(e.target.value);
|
|
};
|
|
|
|
return (
|
|
<ConfigProvider
|
|
theme={{
|
|
components: {
|
|
Descriptions: {
|
|
labelBg: 'red',
|
|
titleColor: 'red',
|
|
titleMarginBottom: 2,
|
|
itemPaddingBottom: 8,
|
|
itemPaddingEnd: 8,
|
|
colonMarginRight: 10,
|
|
colonMarginLeft: 20,
|
|
contentColor: 'green',
|
|
extraColor: 'blue',
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<div>
|
|
<Radio.Group onChange={onChange} value={size}>
|
|
<Radio value="default">default</Radio>
|
|
<Radio value="middle">middle</Radio>
|
|
<Radio value="small">small</Radio>
|
|
</Radio.Group>
|
|
<br />
|
|
<br />
|
|
<Descriptions
|
|
bordered
|
|
title="Custom Size"
|
|
size={size}
|
|
extra={<div>extra color: blue</div>}
|
|
items={borderedItems}
|
|
/>
|
|
<br />
|
|
<br />
|
|
<Descriptions
|
|
title="Custom Size"
|
|
size={size}
|
|
extra={<Button type="primary">Edit</Button>}
|
|
items={items}
|
|
/>
|
|
</div>
|
|
</ConfigProvider>
|
|
);
|
|
};
|
|
|
|
export default App;
|