Demos
How to import
import { Descriptions } from '@douyinfe/semi-ui';
Basic Usage
import React from 'react';
import { Descriptions, Tag } from '@douyinfe/semi-ui';
() => {
const data = [
{ key: 'Actual Users', value: '1,480,000' },
{ key: '7-day Rentention', value: '98%' },
{ key: 'Security Level', value: 'III' },
{ key: 'Category Tag', value: <Tag style={{ margin: 0 }}>E-commerce</Tag> },
{ key: 'Authorized State', value: 'Unauthorized' },
];
return <Descriptions data={data} />;
};
Alignment
You can use align to set alignment of key-value. Supporting values including: center(default), justify, left, and plain.
import React from 'react';
import { Descriptions, Tag } from '@douyinfe/semi-ui';
() => {
const data = [
{ key: 'Actual Users', value: '1,480,000' },
{ key: '7-day Rentention', value: '98%' },
{ key: 'Security Level', value: 'III' },
{ key: 'Category Tag', value: <Tag style={{ margin: 0 }}>E-commerce</Tag> },
{ key: 'Authorized State', value: 'Unauthorized' },
];
const style = {
boxShadow: 'var(--semi-shadow-elevated)',
backgroundColor: 'var(--semi-color-bg-2)',
borderRadius: '4px',
padding: '10px',
margin: '10px',
width: '240px',
};
return (
<>
<div style={{ display: 'flex', flexWrap: 'wrap' }}>
<Descriptions align="center" data={data} style={style} />
<Descriptions align="justify" data={data} style={style} />
<Descriptions align="left" data={data} style={style} />
<Descriptions align="plain" data={data} style={style} />
</div>
</>
);
};
Row Display
Set row to display the data to two-row, supporting three sizes: small, medium(default), and large.
import React from 'react';
import { Descriptions } from '@douyinfe/semi-ui';
import { IconArrowUp } from '@douyinfe/semi-icons';
() => {
const data = [
{ key: 'Actual Users', value: '1,480,000' },
{
key: '7-day Rentention',
value: (
<span>
98%
<IconArrowUp size="small" style={{ color: 'red', marginLeft: '4px' }} />
</span>
),
},
{ key: 'Security Level', value: 'III' },
];
const style = {
boxShadow: 'var(--semi-shadow-elevated)',
backgroundColor: 'var(--semi-color-bg-2)',
borderRadius: '4px',
padding: '10px',
marginRight: '20px',
width: '600px',
};
return (
<div>
<Descriptions data={data} row size="small" style={style} />
<br />
<Descriptions data={data} row style={style} />
<br />
<Descriptions data={data} row size="large" style={style} />
</div>
);
};
Descriptions Using JSX
Version: >= 1.17.0
import React from 'react';
import { Descriptions } from '@douyinfe/semi-ui';
() => {
return (
<Descriptions>
<Descriptions.Item itemKey="Actual Users">1,480,000</Descriptions.Item>
<Descriptions.Item itemKey="7-day Rentention">98%</Descriptions.Item>
<Descriptions.Item itemKey="Security Level">III</Descriptions.Item>
<Descriptions.Item itemKey="Category Tag">E-commerce</Descriptions.Item>
<Descriptions.Item itemKey="Authorized State">Unauthorized</Descriptions.Item>
</Descriptions>
);
};
API Reference
Descriptions
| Properties | Instructions | type | Default |
|---|
| align | Alignment of the key-value data, one of center, left, plain | string | center |
| className | Classname | string | - |
| data | Data to display | DataItem[] | - |
| row | Toggle whether to display data in double-row | boolean | false |
| size | Size of the list for double-row display, one of small, medium, large | string | medium |
| style | Inline style | CSSProperties | - |
DataItem
| Properties | Instructions | type | Default |
|---|
| key | Key value | ReactNode | - |
| value | Data value | ReactNode | (() => ReactNode) | - |
| hidden | Toggle whether the data should be displayed v>=1.12.0 | boolean | - |
Descriptions.Item
v>=1.17.0
| Properties | Instructions | type | Default |
|---|
| itemKey | Key value | ReactNode | - |
| hidden | Toggle whether the data should be displayed | boolean | - |
| className | Classname | string | - |
| style | Inline style | CSSProperties | - |
Content Guidelines
- Field names and values are written in upper and lower case according to the Sentence case principle
