警告条、空状态、骨架屏
页面内的提示条（信息、成功、警告、危险）、没有数据时的空状态、加载中的骨架屏。会自动消失的轻提示用 ZhaoUI.message。
纯样式 核心包
示例
系统将在今晚 23:00 进行维护。
保存成功。
存在 3 台设备离线，请及时处理。
发布失败，请重试。
没有匹配的数据
代码
<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 + 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 zh-empty zh-skeleton
无障碍
- 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。