Description - Svelte - Semi Design Next

Demos

How to import

<script lang="ts">
    import { Descriptions } from '@fibrae/semi-ui-svelte';
</script>

Svelte has no Descriptions.Item; declare data with data only.

Basic Usage

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

The key and value in data only accept strings or numbers. To customize the rendering, use the itemKey and value snippets, whose parameter is { item, index }; index is the position of the item in data, including hidden items.

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

Code

<script lang="ts">
    import { IconArrowUp } from '@fibrae/semi-icons-svelte';
    import { Descriptions, Tag } from '@fibrae/semi-ui-svelte';

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

<Descriptions {data}>
    {#snippet value({ item, index })}
        {#if index === 1}
            <div>
                98%
                <IconArrowUp size="small" style="color: var(--semi-color-success); margin-left: 2px" />
            </div>
        {:else if index === 3}
            <Tag style="margin: 0">电商</Tag>
        {:else}
            {item.value}
        {/if}
    {/snippet}
</Descriptions>

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

<script lang="ts">
    import { Card, Descriptions, Tag } from '@fibrae/semi-ui-svelte';

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

<div style="display: flex; flex-wrap: wrap">
    {#each aligns as align (align)}
        <Card shadows="always" style="margin: 10px">
            <Descriptions {align} {data}>
                {#snippet value({ item, index })}
                    {#if index === 3}
                        <Tag style="margin: 0">电商</Tag>
                    {:else}
                        {item.value}
                    {/if}
                {/snippet}
            </Descriptions>
        </Card>
    {/each}
</div>

Descriptions Using Descriptions.Item

Svelte has no Descriptions.Item: write the data in data only, and customize the content with {#snippet itemKey({ item, index })}...{/snippet} and {#snippet value({ item, index })}...{/snippet}, which gives the same result as the demo below.

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

Code

<script lang="ts">
    import { Descriptions } from '@fibrae/semi-ui-svelte';

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

<Descriptions {data}>
    {#snippet itemKey({ item })}{item.key}{/snippet}
    {#snippet value({ item })}{item.value}{/snippet}
</Descriptions>

Set layout mode

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

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

Code

<script lang="ts">
    import { Descriptions, Space, Tag } from '@fibrae/semi-ui-svelte';

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

<Descriptions align="plain" column={4} {data} layout="vertical">
    {#snippet value({ item, index })}
        {#if index === 3}
            <Space>
                <Tag color="amber" shape="circle" size="small">互联网资讯</Tag>
                <Tag color="violet" shape="circle" size="small">编程</Tag>
            </Space>
        {:else}
            {item.value}
        {/if}
    {/snippet}
</Descriptions>

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

<script lang="ts">
    import { Descriptions, Tag } from '@fibrae/semi-ui-svelte';

    const data = [
        { 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 },
    ];
</script>

<Descriptions align="plain" column={5} {data} layout="horizontal">
    {#snippet value({ item, index })}
        {#if index === 3}
            <Tag color="violet" shape="circle" size="small">编程</Tag>
        {:else}
            {item.value}
        {/if}
    {/snippet}
</Descriptions>

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

<script lang="ts">
    import { IconArrowUp } from '@fibrae/semi-icons-svelte';
    import { Descriptions } from '@fibrae/semi-ui-svelte';

    const data = [
        { key: '实际用户数量', value: '1,480,000' },
        { key: '7天留存', value: '98%' },
        { key: '安全等级', value: '3级' },
    ];
    const sizes = ['small', 'medium', 'large'] as const;
    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';
</script>

<div>
    {#each sizes as size (size)}
        <Descriptions {data} row {size} {style}>
            {#snippet value({ item, index })}
                {#if index === 1}
                    <span>
                        98%
                        <IconArrowUp size="small" style="color: red; margin-left: 4px" />
                    </span>
                {:else}
                    {item.value}
                {/if}
            {/snippet}
        </Descriptions>
        {#if size !== 'large'}
            <br />
        {/if}
    {/each}
</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

<script lang="ts">
    import { Descriptions, type DescriptionsData } from '@fibrae/semi-ui-svelte';

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

<Descriptions align="center" {data} />

You can also use it with the itemKey and value snippets:

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

Code

<script lang="ts">
    import { Descriptions, type DescriptionsData } from '@fibrae/semi-ui-svelte';

    const keyStyle = 'width: 120px; color: var(--semi-color-primary)';
    const data: DescriptionsData[] = [
        { key: '姓名', value: '李四', keyStyle },
        { key: '年龄', value: '28', keyStyle },
        { key: '职业', value: '前端工程师', keyStyle },
    ];
</script>

<Descriptions align="center" {data}>
    {#snippet itemKey({ item })}{item.key}{/snippet}
    {#snippet value({ item })}{item.value}{/snippet}
</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, each item a `DescriptionsData`.	`DescriptionsData[]`	`[]`
itemKey	Snippet for the key of each data item, with the parameter `{ item, index }`, where `index` is the position in `data` (hidden items included); renders item.key by default.	`Type`	-
layout	Layout mode: vertical or horizontal.	`DescriptionsLayout`	`"vertical"`
row	Whether to display key and value in two rows.	`boolean`	`false`
size	Size in two-row mode: small, medium or large.	`DescriptionsSize`	`"medium"`
value	Snippet for the value of each data item, with the parameter `{ item, index }`, where `index` is the position in `data` (hidden items included); renders item.value by default.	`Type`	-

class, style 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; use the `itemKey` snippet to customize rendering	string \| number	-
value	Data value; use the `value` snippet to customize rendering	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.	string	-

Descriptions.Item

Svelte has no Descriptions.Item; declare data items with DataItem in data only.

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 文字大小 - 小尺寸