Descriptions 描述列表

描述列表用于键值对的呈现。

代码演示

如何引入

import { Descriptions } from '@kousum/semi-ui-vue';

基本用法

可以通过 props.data 以键值对 { key: value } 数组方式传入数据
key、value 均支持 ReactNode 类型，你可以传入字符串或更高自由度的 ReactNode 自由定制渲染效果

0px x 0px

baseDesc.vue

tsconfig.json

Import Map

xxxxxxxxxx

19

 

1

<script setup lang="ts">

2

import { h, ref } from 'vue';

3

import { Descriptions, Tag } from '@kousum/semi-ui-vue';

4

​

5

const data = [

6

  { key: '抖音号', value: 'SemiDesign' },

7

  { key: '主播类型', value: '自由主播' },

8

  { key: '安全等级', value: '3级' },

9

  { key: '垂类标签', value: h(Tag, {size: 'small', shape:'circle', color: 'violet'}, ()=>'编程')},

10

  { key: '作品数量', value: '88888888' },

11

  { key: '认证状态', value: '这是一个很长很长很长很长很长很长很长很长很长的值', span: 3 },

12

  { key: '上次直播时间', value: '2024-05-01 12:00:00', span: 3 },

13

];

14

</script>

15

<template>

16

  <Descriptions :data="data" />

17

</template>

18

​

19

​

Show Error

Auto Save

设置对齐方式

可以通过设置 align 值选择对齐方式，支持 center, justify, left, 和 plain。默认对齐方式为 center
当 row 为 true 时，该配置无效

0px x 0px

alignDesc.vue

tsconfig.json

Import Map

xxxxxxxxxx

36

 

1

<script setup lang="ts">

2

import { h, ref } from 'vue';

3

import { Descriptions, Tag, Card } from '@kousum/semi-ui-vue';

4

​

5

const data = [

6

  { key: '抖音号', value: 'SemiDesign' },

7

  { key: '主播类型', value: '自由主播' },

8

  { key: '安全等级', value: '3级' },

9

  { key: '垂类标签', value: h(Tag, {size: 'small', shape:'circle', color: 'violet'}, ()=>'编程')},

10

  { key: '作品数量', value: '88888888' },

11

  { key: '认证状态', value: '这是一个很长很长很长很长很长很长很长很长很长的值', span: 3 },

12

  { key: '上次直播时间', value: '2024-05-01 12:00:00', span: 3 },

13

];

14

const style = {

15

  margin: '10px',

16

};

17

​

18

</script>

19

<template>

20

  <div :style="{ display: 'flex', flexWrap: 'wrap' }">

21

  <Card shadows='always' :style="style">

22

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

23

  </Card>

24

  <Card shadows='always' :style="style">

25

    <Descriptions align="justify" :data="data" />

26

  </Card>

27

  <Card shadows='always' :style="style">

28

    <Descriptions align="left" :data="data" />

29

  </Card>

30

  <Card shadows='always' :style="style">

31

    <Descriptions align="plain" :data="data" />

32

  </Card>

33

  </div>

34

</template>

35

​

36

​

Show Error

Auto Save

子元素 写法

除了通过 props.data 声明数据外，还可以通过 children 写法声明数据 注意 DescriptionItem 应当是 Description 的直接子元素。

0px x 0px

childrenDesc.vue

tsconfig.json

Import Map

xxxxxxxxxx

18

 

1

<script setup lang="ts">

2

import { h, ref } from 'vue';

3

import { Descriptions, Tag, Card, DescriptionsItem } from '@kousum/semi-ui-vue';

4

import { IconArrowUp } from '@kousum/semi-icons-vue';

5

​

6

</script>

7

<template>

8

  <div>

9

    <Descriptions>

10

      <DescriptionsItem itemKey="实际用户数量">1,480,000</DescriptionsItem>

11

      <DescriptionsItem itemKey="7天留存">98%</DescriptionsItem>

12

      <DescriptionsItem itemKey="安全等级">3级</DescriptionsItem>

13

      <DescriptionsItem itemKey="垂类标签">电商</DescriptionsItem>

14

      <DescriptionsItem itemKey="认证状态">未认证</DescriptionsItem>

15

    </Descriptions>

16

  </div>

17

</template>

18

​

Show Error

Auto Save

设置布局模式

可以通过 layout 设置布局模式（v2.54.0 后支持）, 默认为 vertical 纵向布局 。

0px x 0px

verticalDesc.vue

tsconfig.json

Import Map

xxxxxxxxxx

20

 

1

<script setup lang="ts">

2

import { h, ref } from 'vue';

3

import { Descriptions, Tag, Divider } from '@kousum/semi-ui-vue';

4

​

5

const data = [

6

  { key: '抖音号', value: 'SemiDesign' },

7

  { key: '主播类型', value: '自由主播' },

8

  { key: '安全等级', value: '3级' },

9

  { key: '垂类标签', value: h(Tag, {size: 'small', shape:'circle', color: 'violet'}, ()=>'编程')},

10

  { key: '作品数量', value: '88888888' },

11

  { key: '认证状态', value: '这是一个很长很长很长很长很长很长很长很长很长的值', span: 3 },

12

  { key: '上次直播时间', value: '2024-05-01 12:00:00', span: 3 },

13

];

14

</script>

15

<template>

16

  <div>

17

    <Descriptions layout='vertical' align='plain' :data="data" :column="5" />

18

  </div>

19

</template>

20

​

Show Error

Auto Save

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

0px x 0px

horizontalDesc.vue

tsconfig.json

Import Map

xxxxxxxxxx

49

 

1

<script setup lang="ts">

2

import { h, ref } from 'vue';

3

import { Descriptions, Tag, Divider } from '@kousum/semi-ui-vue';

4

​

5

const data = [

6

  { key: '抖音号', value: 'SemiDesign' },

7

  { key: '主播类型', value: '自由主播' },

8

  { key: '安全等级', value: '3级' },

9

  { key: '垂类标签', value: h(Tag, {size: 'small', shape:'circle', color: 'violet'}, ()=>'编程')},

10

  { key: '作品数量', value: '88888888' },

11

  { key: '认证状态', value: '这是一个很长很长很长很长很长很长很长很长很长的值', span: 3 },

12

  { key: '上次直播时间', value: '2024-05-01 12:00:00', span: 3 },

13

];

14

​

15

const data2 = [

16

  { key: '抖音号', value: 'SemiDesign' },

17

  { key: '主播类型', value: '自由主播' },

18

  { key: '安全等级', value: '3级' },

19

  { key: '垂类标签', value: h(Tag, {size: 'small', shape:'circle', color: 'violet'}, ()=>'编程')},

20

  { key: '作品数量', value: '88888888' },

21

  { key: '认证状态', value: '这是一个很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的值' },

22

​

23

];

24

​

25

const data3 = [

26

  { key: '抖音号', value: 'SemiDesign' },

27

  { key: '主播类型', value: '自由主播' },

28

  { key: '认证状态', value: '这是一个很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的值' },

29

  { key: '认证状态', value: '这是一个很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的值', span: 5 },

30

  { key: '认证状态', value: '这是一个很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的值' },

31

​

32

];

33

</script>

34

<template>

35

  <div>

36

    <Descriptions layout='horizontal' align='plain' :data="data" :column="5" />

37

    <Divider margin="12px" />

38

    <Descriptions layout='horizontal' align='plain' :data="data2" :column="5" />

39

    <Divider margin="12px" />

40

    <Descriptions layout='horizontal' align='plain' :data="data3" :column="5" />

41

    <Divider margin="12px" />

42

    <Descriptions layout='horizontal' :data="data" :column="5" />

43

    <Divider margin="12px" />

44

    <Descriptions layout='horizontal' :data="data2" :column="5" />

Show Error

Auto Save

双行显示

可以通过设置 row 可选择双行显示，支持三种不同的大小：small, medium, large。默认大小为 medium，此时 align 配置不再生效

0px x 0px

rowDesc.vue

tsconfig.json

Import Map

xxxxxxxxxx

33

 

1

<script setup lang="ts">

2

import { h, ref } from 'vue';

3

import { Descriptions, Tag, Card } from '@kousum/semi-ui-vue';

4

import { IconArrowUp } from '@kousum/semi-icons-vue';

5

​

6

const data = [

7

  { key: '实际用户数量', value: '1,480,000' },

8

  {

9

    key: '7天留存',

10

    value: h('span', {}, ['98%', h(IconArrowUp, { size: 'small', style: { color: 'red', marginLeft: '4px' } })]),

11

  },

12

  { key: '安全等级', value: '3级' },

13

];

14

​

15

const style = {

16

  boxShadow: 'var(--semi-shadow-elevated)',

17

  backgroundColor: 'var(--semi-color-bg-2)',

18

  borderRadius: '4px',

19

  padding: '10px',

20

  marginRight: '20px',

21

  width: '600px',

22

};

23

</script>

Show Error

Auto Save

API 参考

Descriptions

属性	说明	类型	默认值
align	描述列表的对齐方式，可选 center、 justify、 left、 plain	string	center
className	类名	string	无
data	列表显示的内容	DataItem[]	无
row	是否双行显示	boolean	false
size	设置双行显示时的列表的大小，可选 small、 medium、 large	string	medium
style	列表的样式	CSSProperties	无
layout	列表布局模式，可选 vertical、horizontal v>=2.54.0	string	vertical
column	horizontal 横向布局下，每行的总列数 v>=2.54.0	number	3

DataItem

属性	说明	类型	默认值
key	键值	ReactNode	-
value	属性值	ReactNode | (() => ReactNode)	-
hidden	该数据是否需要展示 v>=1.12.0	boolean	-
span	单元格应跨越的列数 v>=2.54.0	number	1

DescriptionItem

属性	说明	类型	默认值
itemKey	键值	ReactNode	-
hidden	该数据是否需要展示	boolean	-
className	Item 外部wrapper: tr 的类名	string	-
style	Item 外部wrapper: tr 的内联样式	CSSProperties	-
span	单元格应跨越的列数 v>=2.54.0	number	1

文案规范

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

设计变量

font

spacing

color

变量	默认值	用法
$font-descriptions-lineHeight	20px	文字行高
$font-descriptions_value-fontWeight	$font-weight-bold	双行显示 value 文字字重
$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 文字大小 - 小尺寸

显示第 1 条-第 8 条，共 8 条

• 1

变量	默认值	用法
$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 底部内边距 - 大尺寸
$spacing-descriptions_value_plain-paddingLeft	8px	普通显示 plain 模式下 value 左侧内边距
$spacing-descriptions_item_double-padding	0	双行显示右侧 item 内边距

显示第 1 条-第 9 条，共 9 条

• 1

变量	默认值	用法
$color-descriptions_key-text-default	var(--semi-color-text-2)	key 文字颜色
$color-descriptions_value-text-default	var(--semi-color-text-0)	value 文字颜色

显示第 1 条-第 2 条，共 2 条

• 1