Description - Semi Design Next

Demos

How to import

import { Descriptions } from '@fibrous/semi-ui-react';

Basic Usage

Data can be passed in as an array of key-value pairs { key: value } through data.

Both key and value support the ReactNode type. You can pass in a string or a higher degree of freedom ReactNode to freely customize the render dom.

实际用户数量	1,480,000
7天留存	98%
安全等级	3级
垂类标签	电商
认证状态	未认证

Code

import { IconArrowUp } from '@fibrous/semi-icons-react';
import { Descriptions, Tag } from '@fibrous/semi-ui-react';

export default function DescriptionsDemo() {
    const data = [
        { key: '实际用户数量', value: '1,480,000' },
        {
            key: '7天留存',
            value: (
                <div>
                    98%
                    <IconArrowUp size="small" style={{ color: 'var(--semi-color-success)', marginLeft: '2px' }} />
                </div>
            ),
        },
        { key: '安全等级', value: '3级' },
        { key: '垂类标签', value: <Tag style={{ margin: 0 }}>电商</Tag> },
        { key: '认证状态', value: '未认证' },
    ];
    return <Descriptions data={data} />;
}

Alignment

You can use align to set alignment of key-value. Supporting values including: center(default), justify, left, and plain. When row is true, this configuration is invalid
left means the start side: in RTL it mirrors to the right, like center and justify

实际用户数量	1,480,000
7天留存	98%
安全等级	3级
垂类标签	电商
认证状态	未认证

实际用户数量	1,480,000
7天留存	98%
安全等级	3级
垂类标签	电商
认证状态	未认证

实际用户数量	1,480,000
7天留存	98%
安全等级	3级
垂类标签	电商
认证状态	未认证

实际用户数量:1,480,000

7天留存:98%

安全等级:3级

垂类标签:

电商

认证状态:未认证

Code

import { Descriptions, Tag, Card } from '@fibrous/semi-ui-react';

export default function DescriptionsDemo() {
    const data = [
        { key: '实际用户数量', value: '1,480,000' },
        { key: '7天留存', value: '98%' },
        { key: '安全等级', value: '3级' },
        { key: '垂类标签', value: <Tag style={{ margin: 0 }}>电商</Tag> },
        { key: '认证状态', value: '未认证' },
    ];
    const style = {
        margin: '10px',
    };
    return (
        <>
            <div style={{ display: 'flex', flexWrap: 'wrap' }}>
                <Card shadows="always" style={style}>
                    <Descriptions align="center" data={data} />
                </Card>
                <Card shadows="always" style={style}>
                    <Descriptions align="justify" data={data} />
                </Card>
                <Card shadows="always" style={style}>
                    <Descriptions align="left" data={data} />
                </Card>
                <Card shadows="always" style={style}>
                    <Descriptions align="plain" data={data} />
                </Card>
            </div>
        </>
    );
}

Descriptions Using Descriptions.Item

Besides props.data, data can also be declared with children in JSX.

Note that Descriptions.Item must be a direct child of Descriptions.

实际用户数量	1,480,000
7天留存	98%
安全等级	3级
垂类标签	电商
认证状态	未认证

Code

import { Descriptions } from '@fibrous/semi-ui-react';

export default function DescriptionsDemo() {
    return (
        <Descriptions>
            <Descriptions.Item itemKey="实际用户数量">1,480,000</Descriptions.Item>
            <Descriptions.Item itemKey="7天留存">98%</Descriptions.Item>
            <Descriptions.Item itemKey="安全等级">3级</Descriptions.Item>
            <Descriptions.Item itemKey="垂类标签">电商</Descriptions.Item>
            <Descriptions.Item itemKey="认证状态">未认证</Descriptions.Item>
        </Descriptions>
    );
}

Set layout mode

The layout mode can be set through layout. Default is vertical.

抖音号:SemiDesign
主播类型:自由主播
安全等级:3级
垂类标签: 互联网资讯编程
作品数量:88888888
认证状态:这是一个很长很长很长很长很长很长很长很长很长的值

Code

import { Descriptions, Space, Tag } from '@fibrous/semi-ui-react';

export default function DescriptionsDemo() {
    const data = [
        { key: '抖音号', value: 'SemiDesign' },
        { key: '主播类型', value: '自由主播' },
        { key: '安全等级', value: '3级' },
        {
            key: '垂类标签',
            value: (
                <Space>
                    <Tag size="small" shape="circle" color="amber">
                        互联网资讯
                    </Tag>
                    <Tag size="small" shape="circle" color="violet">
                        编程
                    </Tag>
                </Space>
            ),
        },
        { key: '作品数量', value: '88888888' },
        { key: '认证状态', value: '这是一个很长很长很长很长很长很长很长很长很长的值', span: 3 },
    ];
    return (
        <>
            <Descriptions layout="vertical" align="plain" data={data} column={4} />
        </>
    );
}

Set layout to horizontal for horizontal layout. When horizontal is set, column can be used to specify the maximum number of columns per row.

抖音号:SemiDesign	主播类型:自由主播	安全等级:3级	垂类标签: 编程	作品数量:88888888
认证状态:这是一个很长很长很长很长很长很长很长很长很长的值			上次直播时间:2024-05-01 12:00:00

Code

import { Descriptions, Tag } from '@fibrous/semi-ui-react';

export default function DescriptionsDemo() {
    const data = [
        { key: '抖音号', value: 'SemiDesign' },
        { key: '主播类型', value: '自由主播' },
        { key: '安全等级', value: '3级' },
        {
            key: '垂类标签',
            value: (
                <Tag size="small" shape="circle" color="violet">
                    编程
                </Tag>
            ),
        },
        { key: '作品数量', value: '88888888' },
        { key: '认证状态', value: '这是一个很长很长很长很长很长很长很长很长很长的值', span: 3 },
        { key: '上次直播时间', value: '2024-05-01 12:00:00', span: 3 },
    ];
    return (
        <>
            <Descriptions layout="horizontal" align="plain" data={data} column={5} />
        </>
    );
}

Row Display

Set row to display the data to two-row, supporting three sizes: small, medium(default), and large. The align configuration no longer takes effect.

实际用户数量	1,480,000
7天留存	98%
安全等级	3级

实际用户数量	1,480,000
7天留存	98%
安全等级	3级

实际用户数量	1,480,000
7天留存	98%
安全等级	3级

Code

import { IconArrowUp } from '@fibrous/semi-icons-react';
import { Descriptions } from '@fibrous/semi-ui-react';

export default function DescriptionsDemo() {
    const data = [
        { key: '实际用户数量', value: '1,480,000' },
        {
            key: '7天留存',
            value: (
                <span>
                    98%
                    <IconArrowUp size="small" style={{ color: 'red', marginLeft: '4px' }} />
                </span>
            ),
        },
        { key: '安全等级', value: '3级' },
    ];
    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>
    );
}

Custom Key Style

You can customize the style of key through keyStyle property, such as setting a fixed width to achieve alignment. This property supports all CSS styles, such as width, maxWidth, textAlign, color, etc.

用户名	张三
电子邮箱	zhangsan@example.com
联系电话	138-0000-0000
地址	北京市朝阳区

Code

import { Descriptions, type DescriptionsData } from '@fibrous/semi-ui-react';

export default function DescriptionsDemo() {
    const data: DescriptionsData[] = [
        { key: '用户名', value: '张三', keyStyle: { width: 100, textAlign: 'right' } },
        { key: '电子邮箱', value: 'zhangsan@example.com', keyStyle: { width: 100, textAlign: 'right' } },
        { key: '联系电话', value: '138-0000-0000', keyStyle: { width: 100, textAlign: 'right' } },
        { key: '地址', value: '北京市朝阳区', keyStyle: { width: 100, textAlign: 'right' } },
    ];
    return <Descriptions data={data} align="center" />;
}

You can also use it with Descriptions.Item:

姓名	李四
年龄	28
职业	前端工程师

Code

import { Descriptions } from '@fibrous/semi-ui-react';

export default function DescriptionsDemo() {
    return (
        <Descriptions align="center">
            <Descriptions.Item itemKey="姓名" keyStyle={{ width: 120, color: 'var(--semi-color-primary)' }}>
                李四
            </Descriptions.Item>
            <Descriptions.Item itemKey="年龄" keyStyle={{ width: 120, color: 'var(--semi-color-primary)' }}>
                28
            </Descriptions.Item>
            <Descriptions.Item itemKey="职业" keyStyle={{ width: 120, color: 'var(--semi-color-primary)' }}>
                前端工程师
            </Descriptions.Item>
        </Descriptions>
    );
}

API Reference

Descriptions

Props

Property	Description	Type	Default
align	Alignment: `center`, `justify`, `left` or `plain`, where `left` is the start side. Ignored when `row` is `true`.	`DescriptionsAlign`	`"center"`
children	Rendered when `data` is empty, usually `Descriptions.Item` elements.	`React.ReactNode`	-
className	Class name of the root element (`div`).	`string`	-
column	Total number of columns per row in the horizontal layout.	`number`	`3`
data	Data to display; when empty, `children` are rendered.	`Data[]`	`[]`
layout	Layout mode: `vertical` or `horizontal`.	`DescriptionLayout`	`"vertical"`
ref	Reference to the root element (`div`).	`Type`	-
row	Whether to show key and value in two rows; `align` is ignored when `true`.	`boolean`	`false`
size	Size in two-row mode: `small`, `medium` or `large`.	`DescriptionsSize`	`"medium"`
style	Style of the root element (`div`).	`React.CSSProperties`	-

className, style, ref and native attributes (such as id, data-* and aria-*) land on the root div element of Descriptions.

DataItem

Properties	Instructions	type	Default
key	Key value	ReactNode	-
value	Data value	ReactNode \| (() => ReactNode)	-
hidden	Toggle whether the data should be displayed	boolean	-
span	The number of columns the cell should span	number	1
keyStyle	Custom style for key, can be used to set width, alignment, etc.	CSSProperties	-

Descriptions.Item

Props

Property	Description	Type	Default
children	Value: a `ReactNode`, or a function called when rendered.	`Type`	-
className	Class name of the outer wrapper `tr` in vertical layout; ignored in horizontal layout.	`string`	-
hidden	Whether to hide the item.	`boolean`	-
itemKey	Key, a `ReactNode`.	`React.ReactNode`	-
keyStyle	Custom style of the key, such as its width or alignment.	`React.CSSProperties`	-
ref	Reference to the outer wrapper `tr` in vertical layout; ignored in horizontal layout.	`Type`	-
span	Number of columns the cell spans; 1 when unset.	`number`	-
style	Style of the outer wrapper `tr` in vertical layout; ignored in horizontal layout.	`React.CSSProperties`	-

In the vertical layout, className, style, ref and native attributes (such as id, data-* and aria-*) land on the outer wrapper tr. In the horizontal layout the Item renders only its cells, so these have no element to land on.

Content Guidelines

Field names and values are written in upper and lower case according to the Sentence case principle

Design Tokens

These are the component's internal Sass variables and cannot be overridden. To customize styles, override the --semi-* CSS variables (see the Design Token page) or write unlayered CSS rules.

Sass variable	Value	Usage
$font-descriptions-lineHeight	20px	文字行高
$font-descriptions_value-fontWeight	$font-weight-bold	双行显示 value 文字字重
$spacing-descriptions_th-paddingRight	$spacing-loose	普通显示 key 右侧内边距
$spacing-descriptions_item-paddingBottom	$spacing-base-tight	普通显示 item 底部内边距
$spacing-descriptions_item_small-paddingRight	48px	双行显示 item 右侧内边距 - 小尺寸
$spacing-descriptions_item_medium-paddingRight	60px	双行显示 item 右侧内边距 - 中尺寸
$spacing-descriptions_item_large-paddingRight	80px	双行显示 item 右侧内边距 - 大尺寸
$spacing-descriptions_key_medium-paddingBottom	$spacing-extra-tight	双行显示 key 底部内边距 - 中尺寸
$spacing-descriptions_key_large-paddingBottom	$spacing-extra-tight	双行显示 key 底部内边距 - 大尺寸
$color-descriptions_key-text-default	var(--semi-color-text-2)	key 文字颜色
$color-descriptions_value-text-default	var(--semi-color-text-0)	value 文字颜色
$spacing-descriptions_value_plain-paddingLeft	8px	普通显示 plain 模式下 value 左侧内边距
$spacing-descriptions_item_double-padding	0	双行显示右侧 item 内边距
$font-descriptions_key_small-fontSize	$font-size-small	双行显示 key 文字大小 - 小尺寸
$font-descriptions_value_small-fontSize	$font-size-header-6	双行显示 value 文字大小 - 小尺寸
$font-descriptions_key_medium-fontSize	$font-size-regular	双行显示 key 文字大小 - 小尺寸
$font-descriptions_value_medium-fontSize	$font-size-header-4	双行显示 value 文字大小 - 小尺寸
$font-descriptions_key_large-fontSize	$font-size-regular	双行显示 key 文字大小 - 小尺寸
$font-descriptions_value_large-fontSize	$font-size-header-2	双行显示 value 文字大小 - 小尺寸