下载
ZhaoUI 当前版本 0.1.0。原生版只有两个必需文件:一个 CSS,一个 JS,不依赖任何框架,也不需要构建工具。
下载全部文件
压缩包里有全部 CSS 和 JS(含压缩版、按需加载的 modular 文件和 source map)、更新日志和第三方许可说明。解压后把需要的文件放进你的项目即可。
下载后按 快速开始 引入。压缩包的内容和这个站点上的文件完全一致,不含任何统计或追踪代码。
单个文件
只想要必需的两个文件,直接下载它们:
| 文件 | 说明 | 大小 | gzip 后 |
|---|---|---|---|
| zhaoui.min.css | 样式:Token 变量加全部组件,必需 | 0.2 MB | 28.3 KB |
| zhaoui.min.js | 行为:全部组件和 36 个内置图标,必需 | 0.2 MB | 55.8 KB |
可选文件,用到再加:
| 文件 | 说明 | 大小 | gzip 后 |
|---|---|---|---|
| zhaoui-icons.min.js | 更多图标(Lucide 图标集),在 zhaoui.min.js 之后加载 | 62.6 KB | 16.1 KB |
| zhaoui-utilities.min.css | 公共类:间距、布局、文字、响应式显示隐藏 | 56.0 KB | 9.1 KB |
| zhaoui-marketing.min.css | 营销页区块:落地页的 hero、特性卡、价格卡、导航对齐等 | 8.1 KB | 2.2 KB |
| zhaoui-style-glass.min.css | 玻璃拟态风格包(实验性) | 14.0 KB | 1.9 KB |
每个文件还有未压缩的版本(去掉名字里的 .min),方便阅读和调试。
按需加载
页面只用到部分组件时,改用 modular/ 下的文件:核心必需,其余按用到的组件加。用法见 快速开始 的“按需引入”一节。
| 文件 | 说明 | 大小 | gzip 后 |
|---|---|---|---|
| modular/core.min.js<br>modular/core.min.css | 核心,必需,最先加载 | 84.0 KB + 0.1 MB | 25.3 KB + 24.0 KB |
| modular/select.min.js<br>modular/select.min.css | 下拉选择、级联选择 | 23.2 KB + 7.8 KB | 7.5 KB + 2.0 KB |
| modular/date.min.js<br>modular/date.min.css | 日期、时间选择器 | 34.1 KB + 8.9 KB | 10.1 KB + 2.1 KB |
| modular/upload.min.js<br>modular/upload.min.css | 文件上传 | 7.3 KB + 3.7 KB | 3.0 KB + 1.1 KB |
| modular/tree.min.js<br>modular/tree.min.css | 树 | 5.5 KB + 3.9 KB | 2.2 KB + 1.2 KB |
| modular/chart.min.js<br>modular/chart.min.css | 基础图表 | 8.7 KB + 2.2 KB | 3.7 KB + 0.9 KB |
| modular/command.min.js<br>modular/command.min.css | 命令面板 | 5.5 KB + 2.9 KB | 2.5 KB + 1.0 KB |
| modular/brand.min.js | 设置品牌色 ZhaoUI.setBrand() | 13.7 KB | 6.2 KB |
不下载,直接引用
做原型或试一试时,可以直接引用本站的文件:
<link rel="stylesheet" href="https://ui.352m.com/assets/zhaoui/zhaoui.min.css">
<script src="https://ui.352m.com/assets/zhaoui/zhaoui.min.js"></script>这些地址不带版本号,站点更新后文件内容会跟着变。正式项目请下载文件放到自己的服务器上,这样升级由你决定。
营销页区块的用法
落地页用的 hero、特性卡、价格卡、数据条等放在可选文件 zhaoui-marketing.css 里,实时预览、完整代码和每个类的说明见 营销页区块。用法是在 zhaoui.css 之后多引一个文件:
<link rel="stylesheet" href="zhaoui.min.css">
<link rel="stylesheet" href="zhaoui-marketing.min.css"> <!-- 放在 zhaoui.min.css 之后 -->其他
- 暂未发布到 npm,目前通过本页下载使用。
- 图标来自 Lucide,许可说明在压缩包里的
THIRD_PARTY_NOTICES.md。 - 每个版本的变化见 更新日志。