切换·Esc 返回

描述列表Descriptions

内容与数据展示
把一项信息的名称和值并排展示,方便查看详情

描述列表常用于订单、账号和项目详情,把字段名与只读内容成对排列。它外观可能接近表单,但主要负责查看;需要修改信息时,应进入可编辑的表单。

项目名称AI 图鉴
创建人oil-oil
状态进行中
更新时间2026-07-20 14:32

什么时候用

  • 详情页展示一条记录的全部字段
    订单号2026071801
    金额¥ 299.00
    状态已发货
  • 配置、参数这类只读信息
    环境production
    版本v2.4.0
    域名vibe-ui.dev
  • 订单、工单的信息汇总区
    工单 #1024
    提交人林小hu
    优先级
  • 个人资料页:姓名、邮箱、角色
    阿油
    邮箱you@example.com
    角色前端工程师

什么时候不用

  • 要让用户填写或修改 → 用 表单 Form
    姓名林小hu
    邮箱you@example.com
  • 多行同类数据 → 用 表格 Table 更合适
    任务状态
    登录页进行中
    支付流已完成
  • 只有一两个字段,一句话说完就行
    版本v2.4.0
    就一个字段,写句话的事
  • 大段长文本往里塞,右边挤成一坨
    简介
    长段落塞进右栏,读不动
组成结构 · Anatomy
创建人 oil-oil
1描述列表Descriptions一条记录的字段集合,只读
2描述项Item一对「字段名:值」
3字段名Label灰色、宽度对齐,方便扫读
4字段值Value正文颜色,真正的内容
常见变体 · Variants
水平排列Horizontal
版本v2.4.0
环境production
字段值都不长时的默认布局
垂直排列Vertical
版本v2.4.0
环境production
值偏长或横向空间窄,放标签下面更宽松
带边框Bordered
版本v2.4.0
环境production
字段多,需要逐行核对的表单感
典型使用场景
订单详情页
订单详情 已发货
订单号2026071801
商品无线耳机 Pro × 1
实付金额¥ 299.00
收货人林小hu 138****0000
用户资料页
林小hu
2024 年 3 月加入
邮箱you@example.com
角色前端工程师
所在团队AI 图鉴项目组
配置信息展示
应用配置 v2.4.0
运行环境production
访问域名vibe-ui.dev
自动部署已开启
最近发布2026-07-20 14:32
审核信息
发布审核 #1024 审核中
提交人阿油
提交时间2026-07-21 10:08
审核人林小hu
审核意见待填写