Preview Updated 2026-05-10

Description list

Key-value display in dt/dd style — horizontal or vertical layout, multi-column, three sizes, optional borders.

Basic usage

Pass data via items: each entry has term and description. termWidth controls the term column width (horizontal layout). bordered adds borders between entries.

背景

订单信息

订单号: #2026-CF-00018
下单时间: 2026-05-09 14:23
联系人: 陈先生
电话: 138-0000-0000
配送地址: 上海市浦东新区世纪大道 100 号 18A 室

<script setup lang="ts">
import { CfDescriptionList } from '@chufix-design/vue';

const items = [
  { term: '订单号', description: '#2026-CF-00018' },
  { term: '下单时间', description: '2026-05-09 14:23' },
  { term: '联系人', description: '陈先生' },
  { term: '电话', description: '138-0000-0000' },
  { term: '配送地址', description: '上海市浦东新区世纪大道 100 号 18A 室' },
];
</script>

<template>
  <CfDescriptionList :items="items" :term-width="100" bordered title="订单信息" />
</template>

<script setup>
import { CfDescriptionList } from '@chufix-design/vue';

const items = [
  { term: '订单号', description: '#2026-CF-00018' },
  { term: '下单时间', description: '2026-05-09 14:23' },
  { term: '联系人', description: '陈先生' },
  { term: '电话', description: '138-0000-0000' },
  { term: '配送地址', description: '上海市浦东新区世纪大道 100 号 18A 室' },
];
</script>

<template>
  <CfDescriptionList :items="items" :term-width="100" bordered title="订单信息" />
</template>

const items = [
{ term: 'Order ID', description: '#2026-CF-00018' },
{ term: 'Created at', description: '2026-05-09 14:23' },
{ term: 'Shipping address', description: 'Room 18A, 100 Century Avenue, Pudong, Shanghai' },
];

<CfDescriptionList items={items} termWidth={100} bordered title="Order info" />

const items = [
{ term: 'Order ID', description: '#2026-CF-00018' },
{ term: 'Created at', description: '2026-05-09 14:23' },
{ term: 'Shipping address', description: 'Room 18A, 100 Century Avenue, Pudong, Shanghai' },
];

<CfDescriptionList items={items} termWidth={100} bordered title="Order info" />

Horizontal vs vertical layout

layout="horizontal" (default) — term and description on the same row; works well for property tables and detail pages. layout="vertical" — term on top, description below; good for longer descriptions or narrow mobile screens.

背景

layout = horizontal（默认）

姓名: 张三
邮箱: zhang@example.com
部门: 研发

layout = vertical

姓名: 张三
邮箱: zhang@example.com
部门: 研发

<script setup lang="ts">
import { CfDescriptionList } from '@chufix-design/vue';

const items = [
  { term: '姓名', description: '张三' },
  { term: '邮箱', description: 'zhang@example.com' },
  { term: '部门', description: '研发' },
];
</script>

<template>
  <div class="demo-stack">
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">layout = horizontal（默认）</div>
      <CfDescriptionList :items="items" layout="horizontal" :term-width="80" bordered />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">layout = vertical</div>
      <CfDescriptionList :items="items" layout="vertical" bordered />
    </div>
  </div>
</template>

<script setup>
import { CfDescriptionList } from '@chufix-design/vue';

const items = [
  { term: '姓名', description: '张三' },
  { term: '邮箱', description: 'zhang@example.com' },
  { term: '部门', description: '研发' },
];
</script>

<template>
  <div class="demo-stack">
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">layout = horizontal（默认）</div>
      <CfDescriptionList :items="items" layout="horizontal" :term-width="80" bordered />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">layout = vertical</div>
      <CfDescriptionList :items="items" layout="vertical" bordered />
    </div>
  </div>
</template>

<CfDescriptionList items={items} layout="horizontal" termWidth={80} bordered />
<CfDescriptionList items={items} layout="vertical" bordered />

<CfDescriptionList items={items} layout="horizontal" termWidth={80} bordered />
<CfDescriptionList items={items} layout="vertical" bordered />

Multi-column

columns is a number controlling the internal grid column count. item.span lets a single entry span multiple columns. Useful when you have a wide header and many fields.

背景

版本: v0.0.1
协议: MIT
主作者: chenqi92
依赖: 0
组件数: 49+
更新: 2026-05-09

<script setup lang="ts">
import { CfDescriptionList } from '@chufix-design/vue';

const items = [
  { term: '版本', description: 'v0.0.1' },
  { term: '协议', description: 'MIT' },
  { term: '主作者', description: 'chenqi92' },
  { term: '依赖', description: '0' },
  { term: '组件数', description: '49+' },
  { term: '更新', description: '2026-05-09' },
];
</script>

<template>
  <CfDescriptionList :items="items" :columns="3" bordered :term-width="60" />
</template>

<script setup>
import { CfDescriptionList } from '@chufix-design/vue';

const items = [
  { term: '版本', description: 'v0.0.1' },
  { term: '协议', description: 'MIT' },
  { term: '主作者', description: 'chenqi92' },
  { term: '依赖', description: '0' },
  { term: '组件数', description: '49+' },
  { term: '更新', description: '2026-05-09' },
];
</script>

<template>
  <CfDescriptionList :items="items" :columns="3" bordered :term-width="60" />
</template>

<CfDescriptionList items={items} columns={3} bordered termWidth={60} />

<CfDescriptionList items={items} columns={3} bordered termWidth={60} />

Three sizes

size controls font size and padding — sm (compact), md (default), lg (large detail view).

背景

size = sm

总览: 在线 124 / 离线 8
更新时间: 2026-05-09 16:00

size = md

总览: 在线 124 / 离线 8
更新时间: 2026-05-09 16:00

size = lg

总览: 在线 124 / 离线 8
更新时间: 2026-05-09 16:00

<script setup lang="ts">
import { CfDescriptionList } from '@chufix-design/vue';

const items = [
  { term: '总览', description: '在线 124 / 离线 8' },
  { term: '更新时间', description: '2026-05-09 16:00' },
];
</script>

<template>
  <div class="demo-stack">
    <CfDescriptionList :items="items" size="sm" bordered title="size = sm" />
    <CfDescriptionList :items="items" size="md" bordered title="size = md" />
    <CfDescriptionList :items="items" size="lg" bordered title="size = lg" />
  </div>
</template>

<script setup>
import { CfDescriptionList } from '@chufix-design/vue';

const items = [
  { term: '总览', description: '在线 124 / 离线 8' },
  { term: '更新时间', description: '2026-05-09 16:00' },
];
</script>

<template>
  <div class="demo-stack">
    <CfDescriptionList :items="items" size="sm" bordered title="size = sm" />
    <CfDescriptionList :items="items" size="md" bordered title="size = md" />
    <CfDescriptionList :items="items" size="lg" bordered title="size = lg" />
  </div>
</template>

<CfDescriptionList items={items} size="sm" bordered title="size = sm" />
<CfDescriptionList items={items} size="md" bordered title="size = md" />
<CfDescriptionList items={items} size="lg" bordered title="size = lg" />

<CfDescriptionList items={items} size="sm" bordered title="size = sm" />
<CfDescriptionList items={items} size="md" bordered title="size = md" />
<CfDescriptionList items={items} size="lg" bordered title="size = lg" />

API

Prop	Type	Default	Description
`items`	`DescriptionItem[]`	`[]`	Data array
`layout`	`'horizontal' \| 'vertical'`	`'horizontal'`	term/description direction
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Font size and padding
`columns`	`number`	`1`	Total columns
`bordered`	`boolean`	`false`	Outer border and row dividers
`termWidth`	`number \| string`	`'120px'`	Term column width (horizontal only)
`title`	`string \| ReactNode`	`—`	Top title

DescriptionItem: { key?, term, description?, span? }.