# 列表

纯样式组件：不需要 JS，写好标记即可。一行一项的列表：主文字、说明、右侧附加内容（标签、时间、按钮），行之间有分隔线。zh-list--bordered 加外框，zh-list--hover 悬停高亮，zh-list--plain 是带圆点的普通列表。

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

## 用法

```html
<ul class="zh-list zh-list--bordered">
  <li><div class="zh-list-main"><p class="zh-list-title">产品发布会回顾</p><p class="zh-list-desc">李明 · 2026-10-04</p></div><div class="zh-list-extra"><span class="zh-tag success">已发布</span></div></li>
  <li><div class="zh-list-main"><p class="zh-list-title">季度运营复盘</p><p class="zh-list-desc">王芳 · 2026-10-04</p></div><div class="zh-list-extra"><span class="zh-tag warning">待审核</span></div></li>
</ul>
```

## 样式类

`zh-list`、`zh-list-main`、`zh-list-title`、`zh-list-desc`、`zh-list-extra`、`zh-list--bordered`、`zh-list--hover`、`zh-list--plain`

## 属性

| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
| `zh-list` | <ul>（class） | 每个 <li> 里放 zh-list-main，可再放 zh-list-extra | 列表容器 |
| `zh-list-title / zh-list-desc` | <li> 里的 <p> |  | 主文字（加粗，单行省略）与说明 |
| `zh-list-extra` | <li> 里的容器 |  | 右侧附加内容，不会被挤压 |
| `zh-list--bordered` | .zh-list |  | 圆角外框和底色 |
| `zh-list--hover` | .zh-list |  | 悬停整行高亮；整行可点时请把内容放进 <a> |
| `zh-list--plain` | .zh-list |  | 普通圆点列表，用于文章里的要点 |

## 无障碍

- 用 <ul>/<li> 保持列表语义
- 整行可点击时，用一个覆盖整行的 <a>，不要给 <li> 绑点击

## 常见问题

### 列表是什么？

一行一项的列表：主文字、说明、右侧附加内容（标签、时间、按钮），行之间有分隔线。zh-list--bordered 加外框，zh-list--hover 悬停高亮，zh-list--plain 是带圆点的普通列表。

### 怎么使用列表？

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

### 列表支持键盘和读屏吗？

用 <ul>/<li> 保持列表语义；整行可点击时，用一个覆盖整行的 <a>，不要给 <li> 绑点击。

### 列表需要依赖框架吗？

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