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 室

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" :term-width="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（默认）

姓名: 张三
邮箱: [email protected]
部门: 研发

layout = vertical

姓名: 张三
邮箱: [email protected]
部门: 研发

<CfDescriptionList :items="items" layout="horizontal" :term-width="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

<CfDescriptionList :items="items" :columns="3" bordered :term-width="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

<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? }.