mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 05:28:20 +08:00
cbfb126690
* feat: Desc items support responsive * refactor: useBreakPoint * docs: update docs * test: add test case * chore: update def * chore: fix def
4.0 KiB
4.0 KiB
category | group | title | cover | coverDark |
---|---|---|---|---|
Components | Data Display | Descriptions | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*fHdlTpif6XQAAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*d27AQJrowGAAAAAAAAAAAAAADrJ8AQ/original |
Display multiple read-only fields in groups.
When To Use
Commonly displayed on the details page.
// works when >= 5.8.0, recommended ✅
const items: DescriptionsProps['items'] = [
{
key: '1',
label: 'UserName',
children: <p>Zhou Maomao</p>,
},
{
key: '2',
label: 'Telephone',
children: <p>1810000000</p>,
},
{
key: '3',
label: 'Live',
children: <p>Hangzhou, Zhejiang</p>,
},
{
key: '4',
label: 'Remark',
children: <p>empty</p>,
},
{
key: '5',
label: 'Address',
children: <p>No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China</p>,
},
];
<Descriptions title="User Info" items={items} />;
// works when <5.8.0 , deprecated when >=5.8.0 🙅🏻♀️
<Descriptions title="User Info">
<Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
<Descriptions.Item label="Telephone">1810000000</Descriptions.Item>
<Descriptions.Item label="Live">Hangzhou, Zhejiang</Descriptions.Item>
<Descriptions.Item label="Remark">empty</Descriptions.Item>
<Descriptions.Item label="Address">
No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
</Descriptions.Item>
</Descriptions>;
Examples
Basic
border
border
Custom size
responsive
Vertical
Vertical border
Customize label & wrapper style
JSX demo
Component Token
API
Common props ref:Common props
Descriptions
Property | Description | Type | Default | Version |
---|---|---|---|---|
bordered | Whether to display the border | boolean | false | |
colon | Change default props colon value of Descriptions.Item |
boolean | true | |
column | The number of DescriptionItems in a row,could be a number or a object like { xs: 8, sm: 16, md: 24} ,(Only set bordered={true} to take effect) |
number | Record<Breakpoint, number> | 3 | |
contentStyle | Customize content style | CSSProperties | - | 4.10.0 |
extra | The action area of the description list, placed at the top-right | ReactNode | - | 4.5.0 |
items | Describe the contents of the list item | DescriptionsItem[] | - | 5.8.0 |
labelStyle | Customize label style | CSSProperties | - | 4.10.0 |
layout | Define description layout | horizontal | vertical |
horizontal |
|
size | Set the size of the list. Can be set to middle ,small , or not filled |
default | middle | small |
- | |
title | The title of the description list, placed at the top | ReactNode | - |
DescriptionItem
Property | Description | Type | Default | Version |
---|---|---|---|---|
contentStyle | Customize content style | CSSProperties | - | 4.9.0 |
label | The description of the content | ReactNode | - | |
labelStyle | Customize label style | CSSProperties | - | 4.9.0 |
span | The number of columns included | number | Screens | 1 | screens: 5.9.0 |
The number of span Description.Item. Span={2} takes up the width of two DescriptionItems. When both
style
andlabelStyle
(orcontentStyle
) configured, both of them will work. And next one will overwrite first when conflict.