zui
DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/zui package

3.0.0-alpha.4 • Public • Published

ZUI 3

ZUI 3 是一个全新的开源 UI 组件库,提供了丰富的实用组件,并提供自由的定制使用方式,不依赖任何 JavaScript 框架,可以在任何 Web 应用中通过原生的方式使用。

访问 https://easysoft.github.io/zui/3/ 来提前预览组件库。

👉 如果你需要访问 ZUI 1,请访问 https://openzui.com/ ,ZUI 1 源码已经转移到 zui1 分支。

特性

  • 🌸 丰富的 CSS 工具类:基于 Tailwind CSS 提供了丰富的 CSS 工具类,包括特别的语义化外观类名;
  • 💠 强大的 JS 组件:基于 Preact 提供了大量 JavaScript 组件,每个组件提供了大量实用的功能选项;
  • 💖 友好现代的界面:提供了经过精心设计的界面风格,所有组件交互经过反复优化和验证以提供最佳方式;
  • 🌗 主题和深色模式:基于 CSS 变量的主题模式,快速生成主题,内置支持深色模式
  • 📦 自由使用:不依赖具体的框架,所有 CSS 工具类开箱即用,所有 JS 组件支持原生调用,丰富的引入方式,支持通过 ESM 导入,或者直接在浏览器中引用整个 JS 和 CSS,支持打包定制自己的组合版本;
  • ⚙️ 高度定制:除了按需引入,还支持打包定制自己的组合版本,避免多余

一些激动人心的新特性正在开发,包括:

  • [ ] 交互式的文档示例;
  • [ ] 在线演练场;
  • [ ] 主题设计器;
  • [ ] 设计规范指导文档;
  • [ ] 可配置的定制打包机制,支持在线生成打包配置;
  • [ ] 适用于 React 和 Preact 的组件库;
  • [ ] 通用组件插件机制,允许对所有组件进行扩展。

快速预览

使用 CSS 工具类

<button class="btn primary">ZUI 3</button>
<button class="btn primary-outline">Read more</button>

使用 JS 组件

<menu id="colorPicker"></menu>

<script>
const colorPicker = new ColorPicker('#colorPicker', {
    heading: '选择颜色',
    defaultValue: '#0ea5e9',
});
</script>

开发

安装

$ pnpm install

启动开发服务器

$ pnpm dev

构建

$ pnpm build

文档开发预览

$ pnpm docs:dev

文档构建

$ pnpm docs:build

技术栈

FAQ

  • 为何没有 ZUI 2?
    • ZUI 3 和 ZUI 1 跨度太大了,所以跳过了大版本号。
  • 我可以在项目中使用吗?
    • 目前 ZUI 3 处理快速开发中的不稳定状态,如果没有深入了解项目源码,不建议在真实项目中使用,欢迎参与项目开发。

Readme

Keywords

none

Package Sidebar

Install

npm i zui

Weekly Downloads

70

Version

3.0.0-alpha.4

License

none

Unpacked Size

3.51 MB

Total Files

13

Last publish

Collaborators

  • catouse