「小墨是前端」專註分享前端技術，推薦優秀的開源計畫，展示Github、Gitee上的創意作品，帶你深入前端底層，一起成長。
大家好，我是小墨！最近在找一些前端的UI元件庫。偶然間，發現了ZUI 3，體驗之後感覺真香！必須來給大家分享一波～
ZUI 3 簡介
ZUI 3 是一個全新的開源 UI 元件庫，它提供了豐富的實用元件，而且不依賴任何 JavaScript 框架！也就是說你可以在任何 Web 套用中直接使用它，不管是 Vue、React 還是原生 HTML，它都能完美相容！關鍵是，它還提供了自由的客製使用方式，簡直不要太靈活！
功能特點：真的實用！
ZUI 3 有幾個特別吸引我的地方：
- CSS工具類賊豐富： 它基於 Tailwind CSS 提供了大量的 CSS 工具類，包括一些語意化的外觀工具類，讓我們可以輕松搞定常見的布局、文字排版、動畫等，程式碼簡潔又高效。
- CSS 元件開箱即用： ZUI 3 提供了許多實用的 CSS 元件，像按鈕、表單、導航、卡片、表格等，不用寫 JS 就能實作基本功能。這對於快速搭建頁面來說，簡直就是神器！
- JS元件功能強大： 除了 CSS 元件，ZUI 3 還提供了強大的 JS 元件，比如下拉選單、工具提示、對話方塊、數據表格等，功能非常完善。
- 主題客製超方便： ZUI 3 基於 CSS 變量實作了全域 UI 配置，支持深色模式，輕松客製主題，再也不用為樣式不統一而煩惱了！
使用方式：簡單到哭！
使用 ZUI 3 真的非常簡單。你可以直接透過 CDN 引入 CSS 和 JS 檔，也可以使用 npm 或 pnpm 進行安裝。
CSS 工具類範例：
<button class="btn primary">這是一個按鈕</button>
就這麽一行程式碼，一個漂亮的按鈕就出現了，是不是很神奇？
JS 元件範例：
<menu id="myMenu"></menu><script> // 假設 ZUI 3 的 JS 已經引入 const menu = new Menu('#myMenu', { items: [ { label: '選項一', onclick: () => { console.log('點選了選項一'); } }, { label: '選項二', onclick: () => { console.log('點選了選項二'); } }, ], });</script>
幾行程式碼，一個功能完善的下拉選單就搞定了，是不是很方便？
計畫地址
https://github.com/easysoft/zui
總結
ZUI 3 的優點很多，比如：豐富的元件、靈活的使用方式、易於客製的主題、完善的文件等等。當然，它也有一些不足之處，比如目前部份元件文件還在完善中。但瑕不掩瑜，ZUI 3 依然是一個非常值得推薦的 UI 元件庫。
你覺得 ZUI 3 怎麽樣？在評論區留下你的想法吧！
創作不易，歡迎大家關註、點贊、收藏、轉發！我會繼續分享高品質的幹貨和前沿的技術，給大家提供更多有價值的內容！
