马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有账号？立即注册
×
ZUI 3 是一个现代化的开源前端 UI 组件库，专为构建响应式、功能丰富的网页应用而设计。它提供了大量无依赖的、可高度定制的组件，让开发者能够更高效地完成界面开发。ZUI 3 不仅全面覆盖 CSS 工具类和组件库，还重构了 JavaScript 组件，力求与最新的 Web 标准兼容。以下是 ZUI 3 的一些亮点与使用示例。
ZUI 3 的基础特性
1.UI 配置集中管理：
ZUI 3 使用 CSS 变量统一管理主题和样式，支持全局配置，用户可轻松调整色彩、字体等参数，以实现个性化的界面风格。
2.丰富的 CSS 工具类：
灵感源于 Tailwind CSS，ZUI 3 集成了大量 CSS 工具类，支持快速布局、排版和动画效果，让开发者轻松完成复杂的 UI 调整。
3.无 JavaScript 依赖的 CSS 组件：
包含按钮、表单、导航栏、卡片、表格等常用组件，具有良好的兼容性和自适应性，适合多种使用场景，尤其适合那些无需 JavaScript 的静态页面。
4.基于 Preact 的 JS 组件：
对下拉菜单、对话框和数据表格等功能性组件进行了 JavaScript 实现，基于 Preact 框架的组件保证了性能与稳定性，可适用于需要交互的复杂项目。
5.多样化的引入方式：
开发者可选择按需加载某个组件，或加载整个库。同时，ZUI 3 支持通过 ESM 导入，适用于现代前端模块化开发，也可在传统浏览器环境中直接引用使用。
部分组件预览：
示例代码
普通 HTML 使用方式：
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ZUI 示例</title>
<link rel="stylesheet" href="./zui/zui.css">
</head>
<body>
<h1>ZUI 让开发更简单！</h1>
<a class="btn" href="/">访问 ZUI 官方网站</a>
<script src="./zui/zui.js"></script>
</body>
</html>
ES Module 模式使用示例：
<nav id="myNav"></nav>
<script>
import { Nav, Messager, formatDate } from './zui/zui.esm.js';
const nav = new Nav('#myNav', {
items: [
{ text: '首页' },
{ text: '博客' },
]
});
Messager.show('你好，今天是：' + formatDate(new Date(), 'yyyy年M月d日'));
</script>
组件库地址
https://www.openzui.com
Github地址
https://github.com/easysoft/zui
结语
ZUI 3 通过现代化的设计与强大的功能，为前端开发提供了一个理想的工具集，不仅提供了样式丰富的 CSS 组件，还提供了高效的 JavaScript 组件，极大地提升了 UI 构建的效率和自由度。无论是快速实现静态页面，还是构建动态交互应用，ZUI 3 都是一个值得信赖的 UI 库。 | 
加载中...
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
