ant-design/components/descriptions/demo/padding.tsx
叶枫 88c629e4e9
fix: descriptions buttom right padding style (#49895)
* 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
2024-07-16 16:12:56 +08:00

45 lines
1.1 KiB
TypeScript

import React from 'react';
import { Descriptions, Flex } from 'antd';
import type { DescriptionsProps } from 'antd';
const items: DescriptionsProps['items'] = [
{
key: '1',
label: 'long',
children: 'loooooooooooooooooooooooooooooooooooooooooooooooong',
},
{
key: '2',
label: 'long',
children: 'loooooooooooooooooooooooooooooooooooooooooooooooong',
},
{
key: '3',
label: 'long',
children: 'loooooooooooooooooooooooooooooooooooooooooooooooong',
},
{
key: '4',
label: 'long',
children: 'loooooooooooooooooooooooooooooooooooooooooooooooong',
},
{
key: '5',
label: 'long',
children: 'loooooooooooooooooooooooooooooooooooooooooooooooong',
},
];
const App: React.FC = () => (
<Flex gap={8} vertical>
<div style={{ width: 600, border: '1px solid', padding: 20 }}>
<Descriptions title="User Info" column={2} items={items} />
</div>
<div style={{ width: 600, border: '1px solid', padding: 20 }}>
<Descriptions layout="vertical" title="User Info" column={2} items={items} />
</div>
</Flex>
);
export default App;