UG666

UG666 UI
@ug666/react 文档演示

Descriptions 详情列表

以 key-value 对形式展示结构化信息，支持无边框网格与有边框表格两种布局，适合用户详情、订单信息与配置预览等场景。

导入方式

所有示例均直接使用 @ug666/react 中的真实组件导出。

import { Descriptions, DescriptionsItem } from '@ug666/react'

用户详情（无边框，column=2）

默认无边框网格布局，适合展示个人资料与配置信息。

用户信息
姓名张三
年龄28
电话138-0000-1234
部门前端工程
邮箱zhangsan@ug666.dev

订单详情（有边框，column=3）

启用 bordered 后切换为类表格布局，适合需要高可读性的业务数据展示。

订单详情
订单号ORD-20260417-001下单时间2026-04-17 10:30状态待发货
收货人李四联系电话139-8888-5678支付方式微信支付
收货地址北京市朝阳区望京街道 10 号院 3 单元 201

三种尺寸

sm / default / lg 对应不同信息密度需求。

size=sm（紧凑）

项目名称UG UI版本v1.0.0

size=default（默认）

项目名称UG UI版本v1.0.0

size=lg（宽松）

项目名称UG UI版本v1.0.0

代码示例

推荐在详情页、弹框信息展示与审批流中使用。

import { Descriptions, DescriptionsItem } from '@ug666/react'

export function UserDetail() {
  return (
    <Descriptions title="用户信息" column={2}>
      <DescriptionsItem label="姓名">张三</DescriptionsItem>
      <DescriptionsItem label="年龄">28</DescriptionsItem>
      <DescriptionsItem label="邮箱" span={2}>zhangsan@example.com</DescriptionsItem>
    </Descriptions>
  )
}

Props 说明

属性类型默认值说明
column1 | 2 | 3 | 42列数，控制一行展示的条目数量。
borderedbooleanfalse是否显示边框，启用后切换为类表格布局。
size'sm' | 'default' | 'lg''default'整体密度，影响内边距与字号。
titleReactNode—展示在列表上方的标题内容。
labelReactNode必填(DescriptionsItem) 条目标签文案。
spannumber1(DescriptionsItem) 该条目横跨的列数。