跳到正文

描述列表

纯样式组件：不需要 JS。用 <dl> 展示一组「名称：值」，如订单详情、项目信息。有两种外观：plain（无框）、bordered（带框表格式）；列数 1 到 3 可选，窄屏自动降列。

纯样式 核心包

示例

订单号
20260929-0086
状态
已发货
金额
¥ 1,286.00
收货人
张三
电话
138 **** 0086
物流
SF1234567890
地址
上海市浦东新区世纪大道 100 号
负责人
李四
创建时间
2026-09-01 09:30

在线试用 Markdown 版

代码

<div class="zh-stack">
  <div class="zh-descr-wrap">
    <dl class="zh-descr" data-cols="3" data-variant="bordered" aria-label="订单信息">
      <div class="zh-descr-item"><dt>订单号</dt><dd>20260929-0086</dd></div>
      <div class="zh-descr-item"><dt>状态</dt><dd><span class="zh-tag success">已发货</span></dd></div>
      <div class="zh-descr-item"><dt>金额</dt><dd>¥ 1,286.00</dd></div>
      <div class="zh-descr-item"><dt>收货人</dt><dd>张三</dd></div>
      <div class="zh-descr-item"><dt>电话</dt><dd>138 **** 0086</dd></div>
      <div class="zh-descr-item"><dt>物流</dt><dd><a class="zh-descr-link" href="#">SF1234567890</a></dd></div>
      <div class="zh-descr-item" data-span="3"><dt>地址</dt><dd>上海市浦东新区世纪大道 100 号</dd></div>
    </dl>
  </div>
  <dl class="zh-descr" data-cols="2" data-variant="plain" aria-label="项目信息">
    <div class="zh-descr-item"><dt>负责人</dt><dd>李四</dd></div>
    <div class="zh-descr-item"><dt>创建时间</dt><dd>2026-09-01 09:30</dd></div>
  </dl>
</div>

属性

属性用在取值说明
zh-descr<dl>（class）里面每组放一个 <div class="zh-descr-item"><dt>名称</dt><dd>值</dd></div>网格容器，默认 3 列
data-cols.zh-descr1 | 2 | 3（默认 3）列数；平板宽度 3 列降为 2 列，手机宽度全部降为 1 列
data-variant.zh-descrplain | borderedplain 无框，名称在上、值在下；bordered 是带线框的表格式，名称在左侧的灰底格里
data-span.zh-descr-item2 | 3该项横跨的列数，适合地址、备注等长内容；手机宽度忽略；各项加起来填不满一行时，末尾会留空格
zh-descr-wrap外层 <div>（class）仅 bordered 时使用给 bordered 的列表加圆角外框并裁掉最外层多余的线
zh-descr-link<dd> 里的 <a>值里的链接样式

样式类

zh-descr　zh-descr-item　zh-descr-wrap　zh-descr-link

无障碍

  • 用语义化的 <dl>/<dt>/<dd>，读屏会读成「名称，值」
  • 给 <dl> 加 aria-label 说明这组信息是什么
  • <dt>/<dd> 要成对，放在 .zh-descr-item 里

常见问题

描述列表是什么？

纯样式组件：不需要 JS。用 <dl> 展示一组「名称：值」，如订单详情、项目信息。有两种外观：plain（无框）、bordered（带框表格式）；列数 1 到 3 可选，窄屏自动降列。

怎么使用描述列表？

先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写。

描述列表支持键盘和读屏吗？

用语义化的 <dl>/<dt>/<dd>，读屏会读成「名称，值」；给 <dl> 加 aria-label 说明这组信息是什么；<dt>/<dd> 要成对，放在 .zh-descr-item 里。

描述列表需要依赖框架吗？

不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。