ZUI：组合式前端 UI 组件库
原创ZUI：组合式前端 UI 组件库
原创
夏末浅笑
发布于 2024-10-17 09:21:45
发布于 2024-10-17 09:21:45
ZUI 3 是一个开源的前端 UI 组件库，它为开发者提供了一套现代化、无依赖、高度可定制、功能丰富的界面组件，旨在帮助开发者高效地构建美观、响应式的网页应用。
ZUI 3 提供了更全面的 CSS 工具类和组件，以及基于现代标准重写的 JS 组件。
图片
部分组件预览：
图片
图片
图片
图片
图片
普通模式使用：
<!doctype 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 is awesome!</h1>
<a class="btn" href="/">访问 ZUI 网站</a>
<script src="./zui/zui.js"></script>
</body>
</html>ES Module 模式使用：
// html
<nav id="myNav"></nav>
// javascript
<script>
import {Nav, Messager, formatDate} from './zui/zui.esm.js';
const nav = new Nav('#myNav', {
items: [
{text: 'Home'},
{text: 'Blog'},
]
});
Messager.show('你好，今天是：' + formatDate(new Date(), 'yyyy年M月d日'));
</script>功能和特性：
统一的 UI 配置：ZUI 3 使用 CSS 变量来统一管理 UI 配置，使得主题定制和样式调整变得简单快捷。
丰富的 CSS 工具类：借鉴 Tailwind CSS 的理念，ZUI 3 提供了大量的 CSS 工具类，帮助开发者快速实现布局、排版和动画效果。
实用的 CSS 组件：ZUI 3 提供了众多实用的 CSS 组件，如按钮、表单、导航栏、卡片和表格等，这些组件无需 JavaScript 即可工作。
强大的 JS 组件：对于需要交互功能的组件，如下拉菜单、对话框和数据表格，ZUI 3 提供了基于 Preact 的 JavaScript 实现，确保了组件的性能和可靠性。
灵活的使用方式：开发者可以根据需要选择单独引入某个组件，或者引入整个库。支持通过 ESM 导入，也支持在浏览器中直接引用。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
