描述列表 Description - Svelte

代码演示

如何引入

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

Svelte 不提供 Descriptions.Item，只用 data 声明数据。

基本用法

可以通过 data 以键值对 { key: value } 数组方式传入数据

data 中的 key、value 只接受字符串或数字。需要自定义渲染时，使用 itemKey、value snippet，参数为 { item, index }，其中 index 是该项在 data 中的位置（包含 hidden 的项）。

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

代码

<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>

设置对齐方式

可以通过设置 align 值选择对齐方式，支持 center, justify, left, 和 plain。默认对齐方式为 center
当 row 为 true 时，该配置无效
left 指起始侧，在 RTL 下随页面方向镜像为靠右，与 center、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级

垂类标签:

电商

认证状态: 未认证

代码

<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.Item 写法

Svelte 不提供 Descriptions.Item：数据只写在 data 中，自定义内容用 {#snippet itemKey({ item, index })}...{/snippet}、{#snippet value({ item, index })}...{/snippet}，效果与下面的示例相同。

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

代码

<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>

设置布局模式

可以通过 layout 设置布局模式，默认为 vertical 纵向布局。

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

代码

<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>

横向布局可设置 layout为 horizontal 。当设置 horizontal 时，可配合 column 指定每行最大列数

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

代码

<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 可选择双行显示，支持三种不同的大小：small, medium, large。默认大小为 medium，此时 align 配置不再生效

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

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

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

代码

<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>

自定义 Key 样式

可以通过 keyStyle 属性自定义 key 的样式，例如设置固定宽度实现对齐效果。该属性支持所有 CSS 样式，如 width、maxWidth、textAlign、color 等。

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

代码

<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} />

也可以配合 itemKey、value snippet 使用：

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

代码

<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 参考

Descriptions

Props

属性	说明	类型	默认值
align	对齐方式，可选 center、justify、left、plain；row 为 true 时无效。	`DescriptionsAlign`	`"center"`
column	横向布局下每行的总列数。	`number`	`3`
data	列表显示的数据，每项为 `DescriptionsData`。	`DescriptionsData[]`	`[]`
itemKey	每个数据项 key 的 snippet，参数为 `{ item, index }`，`index` 是该项在 `data` 中的位置（含 hidden 的项）；默认渲染 item.key。	`Type`	-
layout	布局模式，可选 vertical、horizontal。	`DescriptionsLayout`	`"vertical"`
row	是否双行显示。	`boolean`	`false`
size	双行显示时的尺寸，可选 small、medium、large。	`DescriptionsSize`	`"medium"`
value	每个数据项值的 snippet，参数为 `{ item, index }`，`index` 是该项在 `data` 中的位置（含 hidden 的项）；默认渲染 item.value。	`Type`	-

class、style 与原生属性（如 id、data-*、aria-*）落在 Descriptions 的根元素（div）上。

DataItem

属性	说明	类型	默认值
key	键值，自定义渲染使用 `itemKey` snippet	string \| number	-
value	属性值，自定义渲染使用 `value` snippet	string \| number	-
hidden	该数据是否需要展示	boolean	-
span	单元格应跨越的列数	number	1
keyStyle	key 的自定义样式，可用于设置宽度、对齐方式等	string	-

DescriptionItem

Svelte 不提供 Descriptions.Item，数据项只用 data 的 DataItem 声明。

文案规范

字段名和值都按 Sentence case 原则书写大小写

设计变量

下表是组件内部的 Sass 变量，不能覆写。定制样式请覆写 --semi-* CSS 变量（见 Design Token 页），或写不分层的 CSS 规则。

Sass 变量	值	用法
$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 文字大小 - 小尺寸