# 描述列表

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

**依赖**：`zhaoui.css` 与 `zhaoui.js`（原生 HTML、CSS、JS，不需要框架或 jQuery）。

## 用法

```html
<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`、`zh-descr-item`、`zh-descr-wrap`、`zh-descr-link`

## 属性

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

## 无障碍

- 用语义化的 <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。