组件
ZhaoUI 共有 60 个组件。每个组件一页：实时示例、可复制代码、属性、事件、方法、无障碍说明和常见问题，都可以直接在浏览器里试。
基础与布局
布局响应式栅格（桌面 12 列、平板 8 列、手机 4 列）、自适应卡片网格、主内容加侧栏、垂直堆叠、水平排列、两端对齐营销页区块可选的 zhaoui-marketing.css：搭一个落地页用的整块样式，页宽与区块间距、hero（左文右卡）、区块标题、特性卡、价格卡、品牌渐变横幅、带品牌色发光的主按钮，以及可选的渐变文字、数据条、极光光斑和玻璃标签卡片带边框、圆角、阴影的内容容器描述列表纯样式组件：不需要 JS结果页纯样式组件：不需要 JS页头纯样式组件：不需要 JS页脚页面底部：版权文字在一侧，链接在另一侧，窄屏自动换行图片图片的响应式与外观：zh-img 让图片不超出容器、保持比例；--rounded 圆角，--circle 正圆（头像），--thumb 带边框的缩略图代码块展示代码：zh-code 用在 <pre> 上（等宽字体，过宽时横向滚动），zh-code-inline 用在行内的 <code> 上键位纯样式组件：不需要 JS按钮组把几个相关按钮连成一组：共用边框，只有两端有圆角列表一行一项的列表：主文字、说明、右侧附加内容（标签、时间、按钮），行之间有分隔线评论评论列表项：头像、昵称、时间、正文、操作，回复缩进显示遮罩条盖在图片或卡片底部的说明条：渐变深色底配白字，在任何图片上都能读
表单与输入
表单控件与字段字段（标签、控件、提示）、文本输入、下拉、多行文本、复选框、单选、开关输入框带前置图标、清除按钮、密码显示开关、搜索快捷键的文本输入数字步进器带加减按钮的数字输入，支持范围、步长、小数位数，键盘可操作，按住按钮连续加减验证码输入分格的一次性验证码输入多行文本随内容增高的文本域，带字数统计行内编辑点击文字原地变成输入框，Enter 或失焦保存，Esc 取消滑块单值或范围滑块，支持刻度、步进、竖直、颜色分档，键盘与指针都可操作评分星形或心形评分，支持半星、只读、清除、文字标签标签标签：普通的彩色标签、可关闭的标签，以及可选中的标签（单选组、多选）
选择与日期
下拉选择增强原生 <select>：单选、多选、搜索、分组、清除、选项描述，选中值同步回原生 select 并触发原生 change，表单提交、name、required 照常工作级联选择多级联动选择（省市区、分类树）日期选择点击输入框弹出日历，也可以直接键入日期日期范围选择两个输入框加一个双月日历，选开始和结束两次点击；带「近 7 天 / 近 30 天 / 本月 / 上月」快捷项时间选择时、分（可选秒）三列滚动选择，也可以直接键入日期时间选择左边日历、右边时间列的组合面板，一次选定日期和时间，点「确定」提交内嵌日历一直显示在页面里的月历（不是弹出的选择器）：点选一天、键盘切换、月年快速跳转，可禁用日期，还能给某些天加小圆点或热力底色（如日程、签到）
数据展示
表格带圆角边框的数据表：表头底色、行悬停高亮、数字列右对齐分页分页器，页码数量恒定不跳动，支持每页条数、跳转框、简洁模式、多种尺寸树可展开的层级列表：文件目录、组织架构、分类时间线按时间顺序展示事件：左侧一条轨道和圆点，右侧是标题、时间、说明步骤条表示多步流程走到了哪一步：数字或图标标记、连接线、当前步骤、出错步骤进度条线性进度条，支持标签位置、状态、分步、缓冲、目标线和不确定进度环形进度圆环、仪表盘（270°）、半圆三种形状的进度，中心显示百分比或自定义内容徽标挂在头像、图标、按钮角上的数字、红点或文字徽标头像图片头像；图片缺失或加载失败时，用姓名首字（中文取第一个字，英文取首字母）和由姓名决定的颜色代替轮播一组幻灯片：左右箭头、圆点、键盘方向键、触屏滑动（基于 CSS 滚动吸附）；可自动播放滚动公告一行向左滚动的公告文字，首尾无缝衔接；悬停或聚焦时暂停；系统开启“减少动态效果”时不滚动，改为可横向拖动文件上传拖拽或点击选择文件，带文件列表、进度条、类型与大小校验、数量限制，失败可重试，上传中可取消图表基础图表：折线、面积、柱状、环形、迷你趋势
导航
顶部导航条网站或应用顶部的导航：左侧标志，中间链接（当前页下方有滑动的下划线），右侧放搜索、通知、头像等你自己的内容侧边菜单后台常见的左侧导航：多级分组、当前页标记、可折叠成 64px 图标栏，支持键盘（方向键、Home/End、字母）面包屑页面层级路径标签页横向或纵向标签页锚点目录长页面的“本页目录”：一列指向页内各节的链接，滚动时自动标出当前所在的一节，点击平滑滚动过去折叠面板手风琴或多开的折叠列表返回顶部滚动超过一段距离后出现的圆形按钮，点击平滑回到顶部；系统开启“减少动态效果”时直接跳回
反馈与浮层
警告条、空状态、骨架屏页面内的提示条（信息、成功、警告、危险）、没有数据时的空状态、加载中的骨架屏加载中一个转动的圆圈，表示正在加载模态框与抽屉模态框基于原生 <dialog>，抽屉是右侧滑出的面板消息提示顶部居中的轻量提示，自动消失下拉菜单点击按钮弹出菜单配置式菜单与右键菜单用一个数组描述菜单，再挂到按钮或区域上：分组标题、分隔线、图标、快捷键提示、复选项、单选项、危险项、禁用项、多级子菜单文字提示悬停或键盘聚焦时显示的小气泡，自动避让屏幕边缘，带箭头气泡卡片点击（或悬停、聚焦）触发的浮层，里面可以放任意内容：说明、小表单、操作列表气泡确认挂在触发按钮旁的小确认框，用于轻量的二次确认（删除一行、下线一篇）命令面板按快捷键或点按钮弹出的搜索框：输入几个字就能跳到某个页面或执行某个操作