ZUI 3 是一個全新的開源 UI 組件庫，提供了豐富的實用組件，并提供自由的定制使用方式，不依賴任何 JavaScript 框架，可以在任何 Web 應用中通過原生的方式使用。
豐富的 CSS 工具類：基于 Tailwind CSS 提供了豐富的 CSS 工具類，包括特別的語義化外觀類名；
強大的 JS 組件：基于 Preact 提供了大量 JavaScript 組件，每個組件提供了大量實用的功能選項；
友好現代的界面：提供了經過精心設計的界面風格，所有組件交互經過反復優化和驗證以提供最佳方式；
主題和深色模式：基于 CSS 變量的主題模式，快速生成主題，內置支持深色模式
自由使用：不依賴具體的框架，所有 CSS 工具類開箱即用，所有 JS 組件支持原生調用，豐富的引入方式，支持通過 ESM 導入，或者直接在瀏覽器中引用整個 JS 和 CSS，支持打包定制自己的組合版本；
高度定制：除了按需引入，還支持打包定制自己的組合版本，避免多余
ZUI中包含各種各樣的界面元素（或控件），例如按鈕、列表、表格等，甚至一些特定場景用到的一組元素也會在ZUI中精心設計，例如評論列表。為了更好的展示我們的設計理念，把這些元素歸為如下四類：
基本控件：用來構建網頁應用的基本界面單元，例如按鈕、文本標簽、輸入框等。
組件：通過一個以上的基本控件組合而成的較復雜的界面單元。例如表單、菜單、表格等。
Javascript 組件：這些組件要正常使用會使用到Javascript。某些Javascript組件需要手動調用來啟用。
視圖：視圖是將基本控件和組件組合使用來展現網站上的通用內容，例如評論視圖及文章預覽列表視圖。
ZUI中的大多數界面元素都有不同的子類型、狀態及參數。關于類型、狀態及參數的定義如下：
類型：同一種界面單元的不同類型，例如按鈕有主要按鈕、次要按鈕及危險按鈕等，導航菜單類型有普通導航及頂部固定導航等。任何時候都應該只為同一個界面元素指定一種類型，默認類型無需指定。
狀態：狀態為同一種界面單元允許在不同的狀態中切換，例如按鈕有正常狀態和不可用狀態，下拉菜單有展開及收攏狀態，菜單項目有選中和未選中狀態等。在同一個界面元素中允許疊加多個狀態。
參數：參數作為界面單元如何展現提供依據，例如表格是否隔行變色，是否啟用鼠標懸停等。可以同時指定多個參數。
可以隨時從Github上下載ZUI的源碼。不僅僅包含所有開發源碼文件，而且包含完整的文檔和示例。如果你需要定制的編譯版本更應該下載源碼。以下簡要說明源碼目錄結構。
zui/
├── src/ ZUI的源碼目錄
│ ├── less/
│ ├── js/
│ ├── fonts/
│ └── apps/ 一些自定義的編譯配置
├── dist/ 預編譯輸出目錄
│ ├── css/
│ ├── js/
│ └── fonts/
├── docs/ 文檔
│ └── example/ 文檔中用到的例子
├── assets/ 一些依賴的或者配合使用的其他資源，包含jquery等
├── Gruntfile.js Grunt構建腳本
└── index.html 文檔首頁
桌面瀏覽器
IE 8+
Opera 12+
Firefox 8+
Safari 6+
Chrome 20+
移動瀏覽器
IOS 6+ Safari
Chrome for Android 4+
Chrome for iOS
Windows 10 Mobile Edage
通過 npm 獲取 ZUI 的生產文件及完整源碼。
目前你并不能通過 require('zui') 來使用 ZUI 的 JavaScript 文件。你需要在頁面中手動引用 node_modules/zui/ 目錄下的文件：
<!-- ZUI 標準版壓縮后的 CSS 文件 --><link rel="stylesheet" href="node_modules/zui/dist/css/zui.min.css">
<!-- ZUI Javascript 依賴 jQuery --><script src="node_modules/zui/dist/lib/jquery/jquery.js"></script><!-- ZUI 標準版壓縮后的 JavaScript 文件 --><script src="node_modules/zui/dist/js/zui.min.js"></script>
通過 Bower 獲取 ZUI 的生產文件及完整源碼。
該文章在 2024/7/25 0:53:17 編輯過
400 186 1886
