Description - Semi Design Next

Demos

How to import

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

Basic Usage

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

key and value in data accept only strings or numbers. For custom rendering, pass renderKey(item, index) and renderValue(item, index), where index is the item's position in data (hidden items included); they are not called for hidden items.

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

Code

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

const data: DescriptionsData[] = [
    { key: '实际用户数量', value: '1,480,000' },
    { key: '7天留存', value: '98%' },
    { key: '安全等级', value: '3级' },
    { key: '垂类标签', value: '电商' },
    { key: '认证状态', value: '未认证' },
];

const renderValue = (item: DescriptionsData, index: number) => {
    if (index === 1) {
        return (
            <div>
                {item.value}
                <IconArrowUp size="small" style={{ color: 'var(--semi-color-success)', 'margin-left': '2px' }} />
            </div>
        );
    }
    return index === 3 ? <Tag style={{ margin: '0' }}>{item.value}</Tag> : item.value;
};

export default function DescriptionsDemo() {
    return <Descriptions data={data} renderValue={renderValue} />;
}

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 { For } from 'solid-js';
import { Card, Descriptions, type DescriptionsAlign, type DescriptionsData, Tag } from '@fibrous/semi-ui-solid';

const data: DescriptionsData[] = [
    { key: '实际用户数量', value: '1,480,000' },
    { key: '7天留存', value: '98%' },
    { key: '安全等级', value: '3级' },
    { key: '垂类标签', value: '电商' },
    { key: '认证状态', value: '未认证' },
];

const renderValue = (item: DescriptionsData, index: number) => (index === 3 ? <Tag style={{ margin: '0' }}>{item.value}</Tag> : item.value);

const aligns: DescriptionsAlign[] = ['center', 'justify', 'left', 'plain'];

const cardStyle = { margin: '10px' };

export default function DescriptionsDemo() {
    return (
        <div style={{ display: 'flex', 'flex-wrap': 'wrap' }}>
            <For each={aligns}>
                {(align) => (
                    <Card shadows="always" style={cardStyle}>
                        <Descriptions align={align} data={data} renderValue={renderValue} />
                    </Card>
                )}
            </For>
        </div>
    );
}

Descriptions Using Descriptions.Item

Besides data, data can also be declared with Descriptions.Item as children of Descriptions: itemKey is the key, and the children are the value.

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

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

Code

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

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, type DescriptionsData, Space, Tag } from '@fibrous/semi-ui-solid';

const data: DescriptionsData[] = [{ key: '抖音号', value: 'SemiDesign' }, { key: '主播类型', value: '自由主播' }, { key: '安全等级', value: '3级' }, { key: '垂类标签' }, { key: '作品数量', value: '88888888' }, { key: '认证状态', value: '这是一个很长很长很长很长很长很长很长很长很长的值', span: 3 }];

const renderValue = (item: DescriptionsData, index: number) =>
    index === 3 ? (
        <Space>
            <Tag size="small" shape="circle" color="amber">
                互联网资讯
            </Tag>
            <Tag size="small" shape="circle" color="violet">
                编程
            </Tag>
        </Space>
    ) : (
        item.value
    );

export default function DescriptionsDemo() {
    return <Descriptions layout="vertical" align="plain" data={data} column={4} renderValue={renderValue} />;
}

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, type DescriptionsData, Tag } from '@fibrous/semi-ui-solid';

const data: DescriptionsData[] = [
    { key: '抖音号', value: 'SemiDesign' },
    { key: '主播类型', value: '自由主播' },
    { key: '安全等级', value: '3级' },
    { key: '垂类标签', value: '编程' },
    { key: '作品数量', value: '88888888' },
    { key: '认证状态', value: '这是一个很长很长很长很长很长很长很长很长很长的值', span: 3 },
    { key: '上次直播时间', value: '2024-05-01 12:00:00', span: 3 },
];

const renderValue = (item: DescriptionsData, index: number) =>
    index === 3 ? (
        <Tag size="small" shape="circle" color="violet">
            {item.value}
        </Tag>
    ) : (
        item.value
    );

export default function DescriptionsDemo() {
    return <Descriptions layout="horizontal" align="plain" data={data} column={5} renderValue={renderValue} />;
}

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-solid';
import { Descriptions, type DescriptionsData } from '@fibrous/semi-ui-solid';

const data: DescriptionsData[] = [
    { key: '实际用户数量', value: '1,480,000' },
    { key: '7天留存', value: '98%' },
    { key: '安全等级', value: '3级' },
];

const renderValue = (item: DescriptionsData, index: number) =>
    index === 1 ? (
        <span>
            {item.value}
            <IconArrowUp size="small" style={{ color: 'red', 'margin-left': '4px' }} />
        </span>
    ) : (
        item.value
    );

const style = {
    'box-shadow': 'var(--semi-shadow-elevated)',
    'background-color': 'var(--semi-color-bg-2)',
    'border-radius': '4px',
    padding: '10px',
    'margin-right': '20px',
    width: '600px',
};

export default function DescriptionsDemo() {
    return (
        <div>
            <Descriptions data={data} renderValue={renderValue} row size="small" style={style} />
            <br />
            <Descriptions data={data} renderValue={renderValue} row style={style} />
            <br />
            <Descriptions data={data} renderValue={renderValue} 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-solid';

const keyStyle = { width: '100px', 'text-align': 'right' } as const;

const data: DescriptionsData[] = [
    { key: '用户名', value: '张三', keyStyle },
    { key: '电子邮箱', value: 'zhangsan@example.com', keyStyle },
    { key: '联系电话', value: '138-0000-0000', keyStyle },
    { key: '地址', value: '北京市朝阳区', keyStyle },
];

export default function DescriptionsDemo() {
    return <Descriptions data={data} align="center" />;
}

You can also use it with Descriptions.Item:

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

Code

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

const keyStyle = { width: '120px', color: 'var(--semi-color-primary)' };

export default function DescriptionsDemo() {
    return (
        <Descriptions align="center">
            <Descriptions.Item itemKey="姓名" keyStyle={keyStyle}>
                李四
            </Descriptions.Item>
            <Descriptions.Item itemKey="年龄" keyStyle={keyStyle}>
                28
            </Descriptions.Item>
            <Descriptions.Item itemKey="职业" keyStyle={keyStyle}>
                前端工程师
            </Descriptions.Item>
        </Descriptions>
    );
}

API Reference

Descriptions

Props

Property	Description	Type	Default
align	Alignment: center, justify, left or plain; ignored when row is true.	`DescriptionsAlign`	`"center"`
column	Total number of columns per row in the horizontal layout.	`number`	`3`
data	Data to display; when empty, the Descriptions.Item children are used.	`Data[]`	-
layout	Layout mode: vertical or horizontal.	`DescriptionsLayout`	`"vertical"`
renderKey	Renders the key of each data item, called with (item, index) where index counts hidden items; not called for hidden items. Defaults to item.key.	`Type`	-
renderValue	Renders the value of each data item, called with (item, index) where index counts hidden items; not called for hidden items. Defaults to item.value.	`Type`	-
row	Whether to display key and value in two rows.	`boolean`	`false`
size	Size in two-row mode: small, medium or large.	`DescriptionsSize`	`"medium"`

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

DataItem

Properties	Instructions	type	Default
key	Key value; custom rendering uses `renderKey`	string \| number	-
value	Data value; custom rendering uses `renderValue`	string \| number	-
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.	JSX.CSSProperties \| string	-

Descriptions.Item

Props

Property	Description	Type	Default
children	Value: a JSX element, or a function called when rendered.	`Type`	-
hidden	Whether to hide the item.	`boolean`	-
itemKey	Key, a JSX element.	`JSX.Element`	-
keyStyle	Custom style of the key: a style object or a string.	`JSX.CSSProperties \| string`	-
span	Number of columns the cell spans.	`number`	-

In the vertical layout, class, style, ref and native attributes 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 文字大小 - 小尺寸