admin管理员组

文章数量:1794759

ZUI：组合式前端 UI 组件库

ZUI 3 是一个开源的前端 UI 组件库，它为开发者提供了一套现代化、无依赖、高度可定制、功能丰富的界面组件，旨在帮助开发者高效地构建美观、响应式的网页应用。

ZUI 3 提供了更全面的 CSS 工具类和组件，以及基于现代标准重写的 JS 组件。

图片

部分组件预览：

图片
图片
图片
图片
图片

普通模式使用：

代码语言：javascript代码运行次数：0运行复制
<!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 模式使用：

代码语言：javascript代码运行次数：0运行复制
// 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 导入，也支持在浏览器中直接引用。

本文标签： ZUI组合式前端 UI 组件库

版权声明：本文标题：ZUI：组合式前端 UI 组件库 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1754762925a1706087.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。