# 警告条、空状态、骨架屏

纯样式组件：不需要 JS，写好标记即可。页面内的提示条（信息、成功、警告、危险）、没有数据时的空状态、加载中的骨架屏。会自动消失的轻提示用 ZhaoUI.message。

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

## 用法

```html
<div class="zh-stack">
  <div class="zh-alert info" role="status"><i data-i="info"></i><span>系统将在今晚 23:00 进行维护。</span></div>
  <div class="zh-alert success" role="status"><i data-i="circle-check"></i><span>保存成功。</span></div>
  <div class="zh-alert warning" role="alert"><i data-i="triangle-alert"></i><span>存在 3 台设备离线，请及时处理。</span></div>
  <div class="zh-alert danger" role="alert"><i data-i="circle-x"></i><span>发布失败，请重试。</span></div>

  <div class="zh-empty">
    <i data-i="search-x" data-s="48"></i>
    <div>没有匹配的数据</div>
    <button class="zh-btn sm">清除筛选</button>
  </div>

  <div class="zh-card" role="status" aria-busy="true" aria-label="加载中">
    <div class="zh-skeleton" style="width:60%"></div>
    <div class="zh-skeleton" style="margin-top:12px"></div>
    <div class="zh-skeleton" style="margin-top:12px;width:80%"></div>
  </div>
</div>
```

## 样式类

`zh-alert`、`zh-empty`、`zh-skeleton`

## 属性

| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
| `zh-alert + info \| success \| warning \| danger` | <div>（class） | 里面放一个图标 <i data-i="info"> 和一个 <span> 文字 | 页面内提示条。图标颜色跟随类型。信息用 role="status"，警告和危险用 role="alert" |
| `zh-empty` | <div>（class） | 图标、说明文字、可选的操作按钮，居中 | 空状态：没有数据、搜索无结果时用 |
| `zh-skeleton` | <div>（class） | 用 style="width:60%" 控制长度，高度默认 12px | 加载中的灰色条，带流光动画；开启「减少动态效果」时流光停止 |

## 无障碍

- zh-alert 要有 role：只是信息用 role="status"（礼貌播报），警告和危险用 role="alert"（立即播报）
- 不要只靠颜色区分类型：图标和文字要说明含义
- 骨架屏所在的容器加 aria-busy="true" 和 aria-label="加载中"，加载完成后移除
- 空状态里的说明文字要说清为什么空，以及下一步能做什么

## 常见问题

### 警告条、空状态、骨架屏是什么？

页面内的提示条（信息、成功、警告、危险）、没有数据时的空状态、加载中的骨架屏。会自动消失的轻提示用 ZhaoUI.message。

### 怎么使用警告条、空状态、骨架屏？

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

### 警告条、空状态、骨架屏支持键盘和读屏吗？

zh-alert 要有 role：只是信息用 role="status"（礼貌播报），警告和危险用 role="alert"（立即播报）；不要只靠颜色区分类型：图标和文字要说明含义；骨架屏所在的容器加 aria-busy="true" 和 aria-label="加载中"，加载完成后移除。

### 警告条、空状态、骨架屏需要依赖框架吗？

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