Components
    Show · Description

    Description

    The description list is used to render key-value pairs.

    Demos

    How to import

    <script setup lang="ts">
    import { Descriptions } from '@fibrous/semi-ui-vue';
</script>

    Descriptions.Item can also be imported by name as DescriptionsItem.

    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 scoped slots #itemKey and #value, 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 setup lang="ts">
    import { IconArrowUp } from '@fibrous/semi-icons-vue';
    import { Descriptions, Tag } from '@fibrous/semi-ui-vue';

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

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

    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 setup lang="ts">
    import { Card, Descriptions, Tag } from '@fibrous/semi-ui-vue';

    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>

<template>
    <div :style="{ display: 'flex', flexWrap: 'wrap' }">
        <Card v-for="align in aligns" :key="align" shadows="always" :style="{ margin: '10px' }">
            <Descriptions :align="align" :data="data">
                <template #value="{ item, index }">
                    <Tag v-if="index === 3" :style="{ margin: 0 }">电商</Tag>
                    <template v-else>{{ item.value }}</template>
                </template>
            </Descriptions>
        </Card>
    </div>
</template>

    Descriptions Using Descriptions.Item

    Besides data, data can also be declared with Descriptions.Item in the default slot: the key goes in the #itemKey slot and the value in the default slot.

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

    实际用户数量 1,480,000
    7天留存 98%
    安全等级 3级
    垂类标签 电商
    认证状态 未认证
    Code
    <script setup lang="ts">
    import { Descriptions } from '@fibrous/semi-ui-vue';
</script>

<template>
    <Descriptions>
        <Descriptions.Item>
            <template #itemKey>实际用户数量</template>
            1,480,000
        </Descriptions.Item>
        <Descriptions.Item>
            <template #itemKey>7天留存</template>
            98%
        </Descriptions.Item>
        <Descriptions.Item>
            <template #itemKey>安全等级</template>
            3级
        </Descriptions.Item>
        <Descriptions.Item>
            <template #itemKey>垂类标签</template>
            电商
        </Descriptions.Item>
        <Descriptions.Item>
            <template #itemKey>认证状态</template>
            未认证
        </Descriptions.Item>
    </Descriptions>
</template>

    Set layout mode

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

    抖音号:SemiDesign
    主播类型:自由主播
    安全等级:3级
    垂类标签:
    互联网资讯
    编程
    作品数量:88888888
    认证状态:这是一个很长很长很长很长很长很长很长很长很长的值
    Code
    <script setup lang="ts">
    import { Descriptions, Space, Tag } from '@fibrous/semi-ui-vue';

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

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

    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 setup lang="ts">
    import { Descriptions, Tag } from '@fibrous/semi-ui-vue';

    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>

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

    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 setup lang="ts">
    import { IconArrowUp } from '@fibrous/semi-icons-vue';
    import { Descriptions } from '@fibrous/semi-ui-vue';

    const data = [
        { key: '实际用户数量', value: '1,480,000' },
        { key: '7天留存', value: '98%' },
        { key: '安全等级', value: '3级' },
    ];
    const style = {
        boxShadow: 'var(--semi-shadow-elevated)',
        backgroundColor: 'var(--semi-color-bg-2)',
        borderRadius: '4px',
        padding: '10px',
        marginRight: '20px',
        width: '600px',
    };
</script>

<template>
    <div>
        <template v-for="size in ['small', 'medium', 'large'] as const" :key="size">
            <Descriptions :data="data" row :size="size" :style="style">
                <template #value="{ item, index }">
                    <span v-if="index === 1">
                        98%
                        <IconArrowUp size="small" :style="{ color: 'red', marginLeft: '4px' }" />
                    </span>
                    <template v-else>{{ item.value }}</template>
                </template>
            </Descriptions>
            <br v-if="size !== 'large'" />
        </template>
    </div>
</template>

    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 setup lang="ts">
    import { Descriptions, type DescriptionsData } from '@fibrous/semi-ui-vue';

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

<template>
    <Descriptions align="center" :data="data" />
</template>

    You can also use it with Descriptions.Item:

    姓名 李四
    年龄 28
    职业 前端工程师
    Code
    <script setup lang="ts">
    import { Descriptions } from '@fibrous/semi-ui-vue';

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

<template>
    <Descriptions align="center">
        <Descriptions.Item :keyStyle="keyStyle">
            <template #itemKey>姓名</template>
            李四
        </Descriptions.Item>
        <Descriptions.Item :keyStyle="keyStyle">
            <template #itemKey>年龄</template>
            28
        </Descriptions.Item>
        <Descriptions.Item :keyStyle="keyStyle">
            <template #itemKey>职业</template>
            前端工程师
        </Descriptions.Item>
    </Descriptions>
</template>

    API Reference

    Descriptions

    Props

    PropertyDescriptionTypeDefault
    alignAlignment: center, justify, left or plain; ignored when row is true.DescriptionsAlignsemiDefault("Descriptions", "align", "center")
    rowWhether to display key and value in two rows.booleansemiDefault("Descriptions", "row", false)
    sizeSize in two-row mode: small, medium or large.DescriptionsSizesemiDefault("Descriptions", "size", "medium")
    dataData to display; when empty, the Descriptions.Item elements in the default slot are used.DescriptionsData[]semiDefault("Descriptions", "data", [])
    layoutLayout mode: vertical or horizontal.DescriptionsLayoutsemiDefault("Descriptions", "layout", "vertical")
    columnTotal number of columns per row in the horizontal layout.numbersemiDefault("Descriptions", "column", 3)

    Events

    EventDescriptionCallback parameters
    None

    Slots

    SlotDescriptionScope parameters
    defaultDescriptions.Item children, used when data is empty; the horizontal layout only recognizes direct children.any
    itemKeyKey of each data item, rendering item.key by default.DescriptionsSlotProps
    valueValue of each data item, rendering item.value by default.DescriptionsSlotProps

    Exposes

    NameDescriptionType
    None

    class, style and native attributes are passed through attrs and land on the root element of Descriptions.

    DataItem

    PropertiesInstructionstypeDefault
    keyKey value; use the #itemKey slot to customize renderingstring | number-
    valueData value; use the #value slot to customize renderingstring | number-
    hiddenToggle whether the data should be displayedboolean-
    spanThe number of columns the cell should spannumber1
    keyStyleCustom style for key, can be used to set width, alignment, etc.StyleValue-

    Descriptions.Item

    Props

    PropertyDescriptionTypeDefault
    hiddenWhether to hide the item.booleanfalse
    spanNumber of columns the cell spans.numberundefined
    keyStyleCustom style of the key.StyleValueundefined

    Events

    EventDescriptionCallback parameters
    None

    Slots

    SlotDescriptionScope parameters
    defaultThe value.any
    itemKeyThe key.any

    Exposes

    NameDescriptionType
    None

    In the vertical layout, class, style and native attributes land on the outer wrapper tr through attrs. In the horizontal layout the Item renders only its cells, so attrs 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 variableValueUsage
    $font-descriptions-lineHeight20px文字行高
    $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-paddingRight48px双行显示 item 右侧内边距 - 小尺寸
    $spacing-descriptions_item_medium-paddingRight60px双行显示 item 右侧内边距 - 中尺寸
    $spacing-descriptions_item_large-paddingRight80px双行显示 item 右侧内边距 - 大尺寸
    $spacing-descriptions_key_medium-paddingBottom$spacing-extra-tight双行显示 key 底部内边距 - 中尺寸
    $spacing-descriptions_key_large-paddingBottom$spacing-extra-tight双行显示 key 底部内边距 - 大尺寸
    $color-descriptions_key-text-defaultvar(--semi-color-text-2)key 文字颜色
    $color-descriptions_value-text-defaultvar(--semi-color-text-0)value 文字颜色
    $spacing-descriptions_value_plain-paddingLeft8px普通显示 plain 模式下 value 左侧内边距
    $spacing-descriptions_item_double-padding0双行显示右侧 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 文字大小 - 小尺寸