Descriptions 描述列表

以键值对形式展示只读信息。常见于详情页、个人资料页和数据展示场景。

预览

Preview

基础布局（无边框，2列）

用户信息

姓名

张三

邮箱

zhangsan@example.com

电话

+86 138 0000 0000

地址

北京市朝阳区

带边框布局（3列，部分项跨列）

订单详情

订单号

ORD-2024-001

支付方式

微信支付

状态

已完成

下单时间

2024-01-15 14:32:00

订单金额

¥299.99

收货地址

北京市朝阳区幸福路100号

垂直排列布局（4列）

服务器配置

CPU

4 核

内存

16 GB

系统

Ubuntu 22.04 LTS

带宽

100 Mbps

技术档案印章（stamp 插槽）

机密档案

[ CONFIDENTIAL ]

编号

BX-2077-001

密级

Top Secret

安装

pnpm dlx brutx-vue@latest add descriptions

用法

<script setup>
import { Descriptions, DescriptionsItem } from 'brutx-ui-vue'
</script>

<template>
    <Descriptions title="用户信息" :column="2">
        <DescriptionsItem label="姓名">张三</DescriptionsItem>
        <DescriptionsItem label="邮箱">zhangsan@example.com</DescriptionsItem>
        <DescriptionsItem label="电话">+86 138 0000 0000</DescriptionsItem>
        <DescriptionsItem label="地址">北京市朝阳区</DescriptionsItem>
    </Descriptions>
</template>

带边框

<script setup>
import { Descriptions, DescriptionsItem } from 'brutx-ui-vue'
</script>

<template>
    <Descriptions title="订单详情" border>
        <DescriptionsItem label="订单号">ORD-2024-001</DescriptionsItem>
        <DescriptionsItem label="日期">2024-01-15</DescriptionsItem>
        <DescriptionsItem label="状态">已完成</DescriptionsItem>
        <DescriptionsItem label="金额">¥299.99</DescriptionsItem>
        <DescriptionsItem label="备注" :span="2">需要快递配送</DescriptionsItem>
    </Descriptions>
</template>

垂直方向

<script setup>
import { Descriptions, DescriptionsItem } from 'brutx-ui-vue'
</script>

<template>
    <Descriptions title="产品信息" direction="vertical" border>
        <DescriptionsItem label="名称">机械键盘</DescriptionsItem>
        <DescriptionsItem label="品牌">BrutxUI</DescriptionsItem>
        <DescriptionsItem label="价格">¥999.99</DescriptionsItem>
    </Descriptions>
</template>

不同尺寸

<script setup>
import { Descriptions, DescriptionsItem } from 'brutx-ui-vue'
</script>

<template>
    <Descriptions size="sm" border>
        <DescriptionsItem label="小尺寸">内容</DescriptionsItem>
    </Descriptions>

    <Descriptions size="default" border>
        <DescriptionsItem label="默认尺寸">内容</DescriptionsItem>
    </Descriptions>

    <Descriptions size="lg" border>
        <DescriptionsItem label="大尺寸">内容</DescriptionsItem>
    </Descriptions>
</template>

子组件

组件	说明
Descriptions	根容器组件
DescriptionsItem	单个描述项（标签 + 内容）

API 参考

Descriptions

Descriptions — 属性

名称	类型	默认值	说明
column	number | undefined	3	描述项网格的逻辑列数；边框横向布局会为标签和值使用双倍网格轨道，非法值归一化为至少一列。
详情 声明类型 number | undefined 默认值详情 声明 3 来源: packages/ui/src/components/descriptions/Descriptions.vue 解析值 3 来源 Descriptions.vue:8 packages/ui/src/components/descriptions/Descriptions.vue
border	boolean | undefined	false	显示带边框的描述项布局，并将配置提供给子项。
详情 声明类型 boolean | undefined 字面量 false true 默认值详情 声明 false 来源: packages/ui/src/components/descriptions/Descriptions.vue 解析值 false 来源 Descriptions.vue:10 packages/ui/src/components/descriptions/Descriptions.vue
direction	"vertical" | "horizontal" | undefined	"horizontal"	选择横向或纵向标签/值排列，并提供给子项。
详情 声明类型 "vertical" | "horizontal" | undefined 字面量 "horizontal" "vertical" 默认值详情 声明 'horizontal' 来源: packages/ui/src/components/descriptions/Descriptions.vue 解析值 "horizontal" 来源 Descriptions.vue:12 packages/ui/src/components/descriptions/Descriptions.vue
size	"default" | "lg" | "sm" | undefined	"default"	选择 small、default 或 large 尺寸对应的文字大小。
详情 声明类型 "default" | "lg" | "sm" | undefined 字面量 "default" "lg" "sm" 默认值详情 声明 'default' 来源: packages/ui/src/components/descriptions/Descriptions.vue 解析值 "default" 来源 Descriptions.vue:14 packages/ui/src/components/descriptions/Descriptions.vue
title	string | undefined	undefined	描述列表标题文本；非空时显示标题区，可由 title 插槽替换。
详情 声明类型 string | undefined 默认值详情 声明 undefined 来源: packages/ui/src/components/descriptions/Descriptions.vue 解析值 undefined 来源 Descriptions.vue:16 packages/ui/src/components/descriptions/Descriptions.vue
class	string | undefined	undefined	追加到描述列表最外层容器的自定义 CSS 类。
详情 声明类型 string | undefined 默认值详情 声明 undefined 来源: packages/ui/src/components/descriptions/Descriptions.vue 解析值 undefined 来源 Descriptions.vue:17 packages/ui/src/components/descriptions/Descriptions.vue

Descriptions — 插槽

名称	签名或类型	说明
#title	{}	替换标题文本及默认 h3 结构；仅当标题文本非空或此插槽渲染了非注释内容时创建标题区。
详情 声明类型 {} 来源 Descriptions.vue packages/ui/src/components/descriptions/Descriptions.vue
#stamp	{}	在边框布局右上方渲染印章内容；仅 border 为 true 且提供该插槽时显示。
详情 声明类型 {} 来源 Descriptions.vue packages/ui/src/components/descriptions/Descriptions.vue
#default	{}	放置 DescriptionsItem 描述项。
详情 声明类型 {} 来源 Descriptions.vue packages/ui/src/components/descriptions/Descriptions.vue

DescriptionsItem

DescriptionsItem — 属性

名称	类型	默认值	说明
label 必填	string	—	描述项标签文本；可由 label 插槽替换。
详情 声明类型 string 默认值详情 未声明默认值 — 来源 DescriptionsItem.vue:8 packages/ui/src/components/descriptions/DescriptionsItem.vue
span	number | undefined	1	描述项跨越的逻辑列数，按正整数归一化；横向边框布局中每个逻辑列占两条网格轨道。
详情 声明类型 number | undefined 默认值详情 声明 1 来源: packages/ui/src/components/descriptions/DescriptionsItem.vue 解析值 1 来源 DescriptionsItem.vue:10 packages/ui/src/components/descriptions/DescriptionsItem.vue
labelWidth	string | number | undefined	undefined	设置标签单元格宽度；数字按像素处理，空字符串不应用宽度。横向边框布局中该值不会改变父级网格轨道宽度。
详情 声明类型 string | number | undefined 默认值详情 声明 undefined 来源: packages/ui/src/components/descriptions/DescriptionsItem.vue 解析值 undefined 来源 DescriptionsItem.vue:12 packages/ui/src/components/descriptions/DescriptionsItem.vue
class	string | undefined	undefined	追加到描述项布局容器的自定义 CSS 类。
详情 声明类型 string | undefined 默认值详情 声明 undefined 来源: packages/ui/src/components/descriptions/DescriptionsItem.vue 解析值 undefined 来源 DescriptionsItem.vue:13 packages/ui/src/components/descriptions/DescriptionsItem.vue

DescriptionsItem — 插槽

名称	签名或类型	说明
#label	{}	替换 label prop 文本，提供自定义标签内容。
详情 声明类型 {} 来源 DescriptionsItem.vue packages/ui/src/components/descriptions/DescriptionsItem.vue
#default	{}	呈现该描述项的值或说明内容。
详情 声明类型 {} 来源 DescriptionsItem.vue packages/ui/src/components/descriptions/DescriptionsItem.vue

可访问性

• 使用语义化 HTML 结构
• 边框模式使用类表格布局，兼容屏幕阅读器
• 标签通过视觉分组与对应值关联