Descriptions
descriptions描述列表 · 详情页键值对 + horizontal/vertical + bordered + span 跨列(纯皮肤·RSC)
用法
基础用法
horizontal 布局：键左值右；用 DescriptionsItem 子节点声明，span 控制跨列。
用户信息
姓名张三
性别男
生日1995-08-12
备注VIP 客户，优先处理售后工单
tsx
<Descriptions title="用户信息">
<DescriptionsItem label="姓名">张三</DescriptionsItem>
<DescriptionsItem label="性别">男</DescriptionsItem>
<DescriptionsItem label="生日">1995-08-12</DescriptionsItem>
<DescriptionsItem label="备注" span={3}>VIP 客户，优先处理售后工单</DescriptionsItem>
</Descriptions>竖排布局
layout=vertical 键上值下，适合移动端或值较长的场景。
姓名张三
性别男
生日1995-08-12
备注VIP 客户，优先处理售后工单
tsx
<Descriptions layout="vertical" column={3}>
<DescriptionsItem label="姓名">张三</DescriptionsItem>
<DescriptionsItem label="备注" span={3}>VIP 客户，优先处理售后工单</DescriptionsItem>
</Descriptions>边框表格态
bordered 渲染为带分隔的表格样式，extra 放右上操作区。
订单详情
用户名
zhangsan
手机
138 0000 0000
城市
广州
地址
广东省广州市天河区某某路 88 号 A 座 1203
tsx
<Descriptions
bordered
title="订单详情"
extra={<a href="#edit">编辑</a>}
items={[
{ label: "用户名", children: "zhangsan" },
{ label: "地址", children: "广东省广州市天河区某某路 88 号 A 座 1203", span: 3 },
]}
/>单列长详情
column=1 每项独占一行，适合合同/凭证类纵向键值。
合同编号
HT-2026-000812
签约方
广州瑚琏科技有限公司
金额
¥ 128,000.00
状态
已生效
tsx
<Descriptions
bordered
column={1}
items={[
{ label: "合同编号", children: "HT-2026-000812" },
{ label: "签约方", children: "广州瑚琏科技有限公司" },
{ label: "金额", children: "¥ 128,000.00" },
{ label: "状态", children: "已生效" },
]}
/>何时用
详情页/详情抽屉里展示一组只读键值对——用户资料、订单详情、合同信息。深层嵌套的 JSON 树用 JsonViewer；需要列表流/操作按钮用 List。本组件专攻"标准多列对齐的扁平字段表"，纯皮肤可在 RSC 直接渲染。
导入
ts
import { Descriptions, DescriptionsItem } from "@hulianui/ui"Props
DescriptionsProps：
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| column | number | 3 | 每行列数 |
| layout | "horizontal" | "vertical" | "horizontal" | horizontal=键左值右；vertical=键上值下 |
| bordered | boolean | false | 带边框分隔的表格态 |
| items | DescriptionsItemData[] | — | 数据驱动备选；提供时优先于 DescriptionsItem 子节点 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| title | ReactNode | 标题(左上) |
| extra | ReactNode | 右上操作区 |
DescriptionsItem / DescriptionsItemData：label(键名，text-muted) / children(值，text-foreground) / span(跨列数，默认 1，超过 column 时钳制到 column)
禁忌 / 坑
bordered表格态要求每行span之和恰好填满column，否则会留空缺；用span让长字段(如地址、备注)整行占满。items与DescriptionsItem子节点同时给时，items优先(子节点被忽略)。
相关
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable
Playground
用户信息
用户名zhangsan
手机138 0000 0000
城市广州
地址广东省广州市天河区某某路 88 号 A 座 1203
<Descriptions>
<DescriptionsItem label="用户名">zhangsan</DescriptionsItem>
<DescriptionsItem label="地址" span={3}>...</DescriptionsItem>
</Descriptions>