LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

不依賴任何 JavaScript 框架、全新的開源 UI 組件庫

admin
2024年7月25日 0:52 本文熱度 967

項目簡介

ZUI 3 是一個全新的開源 UI 組件庫,提供了豐富的實用組件,并提供自由的定制使用方式,不依賴任何 JavaScript 框架,可以在任何 Web 應(yīng)用中通過原生的方式使用


組件特性

  • 豐富的 CSS 工具類基于 Tailwind CSS 提供了豐富的 CSS 工具類,包括特別的語義化外觀類名;

  •  強(qiáng)大的 JS 組件基于 Preact 提供了大量 JavaScript 組件,每個組件提供了大量實用的功能選項;

  • 友好現(xiàn)代的界面提供了經(jīng)過精心設(shè)計的界面風(fēng)格,所有組件交互經(jīng)過反復(fù)優(yōu)化和驗證以提供最佳方式;

  • 主題和深色模式基于 CSS 變量的主題模式,快速生成主題,內(nèi)置支持深色模式

  • 自由使用不依賴具體的框架,所有 CSS 工具類開箱即用,所有 JS 組件支持原生調(diào)用,豐富的引入方式,支持通過 ESM 導(dǎo)入,或者直接在瀏覽器中引用整個 JS 和 CSS,支持打包定制自己的組合版本;

  • 高度定制除了按需引入,還支持打包定制自己的組合版本,避免多余

UI元素類型及定義

ZUI中包含各種各樣的界面元素(或控件),例如按鈕、列表、表格等,甚至一些特定場景用到的一組元素也會在ZUI中精心設(shè)計,例如評論列表。為了更好的展示我們的設(shè)計理念,把這些元素歸為如下四類:

  • 基本控件用來構(gòu)建網(wǎng)頁應(yīng)用的基本界面單元,例如按鈕、文本標(biāo)簽、輸入框等。

  • 組件通過一個以上的基本控件組合而成的較復(fù)雜的界面單元。例如表單、菜單、表格等。

  • Javascript 組件:這些組件要正常使用會使用到Javascript。某些Javascript組件需要手動調(diào)用來啟用。

  • 視圖視圖是將基本控件和組件組合使用來展現(xiàn)網(wǎng)站上的通用內(nèi)容,例如評論視圖及文章預(yù)覽列表視圖。

ZUI中的大多數(shù)界面元素都有不同的子類型、狀態(tài)及參數(shù)。關(guān)于類型、狀態(tài)及參數(shù)的定義如下:

  • 類型同一種界面單元的不同類型,例如按鈕有主要按鈕、次要按鈕及危險按鈕等,導(dǎo)航菜單類型有普通導(dǎo)航及頂部固定導(dǎo)航等。任何時候都應(yīng)該只為同一個界面元素指定一種類型,默認(rèn)類型無需指定。

  • 狀態(tài)狀態(tài)為同一種界面單元允許在不同的狀態(tài)中切換,例如按鈕有正常狀態(tài)和不可用狀態(tài),下拉菜單有展開及收攏狀態(tài),菜單項目有選中和未選中狀態(tài)等。在同一個界面元素中允許疊加多個狀態(tài)。

  • 參數(shù)參數(shù)作為界面單元如何展現(xiàn)提供依據(jù),例如表格是否隔行變色,是否啟用鼠標(biāo)懸停等。可以同時指定多個參數(shù)。

源碼結(jié)構(gòu)

可以隨時從Github上下載ZUI的源碼。不僅僅包含所有開發(fā)源碼文件,而且包含完整的文檔和示例。如果你需要定制的編譯版本更應(yīng)該下載源碼。以下簡要說明源碼目錄結(jié)構(gòu)。

zui/
├── src/                         ZUI的源碼目錄
├── less/
├── js/
├── fonts/
└── apps/ 一些自定義的編譯配置
├── dist/ 預(yù)編譯輸出目錄
├── css/
├── js/
└── fonts/
├── docs/ 文檔
└── example/ 文檔中用到的例子
├── assets/ 一些依賴的或者配合使用的其他資源,包含jquery
├── Gruntfile.js                 Grunt構(gòu)建腳本
└── 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 的生產(chǎn)文件及完整源碼。

npm install zui

目前你并不能通過 require('zui') 來使用 ZUI 的 JavaScript 文件。你需要在頁面中手動引用 node_modules/zui/ 目錄下的文件:

<!-- ZUI 標(biāo)準(zhǔn)版壓縮后的 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 標(biāo)準(zhǔn)版壓縮后的 JavaScript 文件 --><script src="node_modules/zui/dist/js/zui.min.js"></script>

通過 Bower 獲取 ZUI 的生產(chǎn)文件及完整源碼。

bower install zui

END


該文章在 2024/7/25 0:53:17 編輯過
關(guān)鍵字查詢
相關(guān)文章
正在查詢...
點(diǎn)晴ERP是一款針對中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國內(nèi)大量中小企業(yè)的青睞。
點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場、車隊、財務(wù)費(fèi)用、相關(guān)報表等業(yè)務(wù)管理,結(jié)合碼頭的業(yè)務(wù)特點(diǎn),圍繞調(diào)度、堆場作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體,是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。
點(diǎn)晴WMS倉儲管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號管理軟件。
點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi),不限功能、不限時間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。
Copyright 2010-2025 ClickSun All Rights Reserved

黄频国产免费高清视频,久久不卡精品中文字幕一区,激情五月天AV电影在线观看,欧美国产韩国日本一区二区
精品一区二区亚洲一二三区 | 午夜福利一区二区不卡片 | 在线观看日本免费A | 在线中文字幕乱码免费网站 | 亚洲AV色香蕉一区二区三区夜夜嗨 | 亚洲国产欧美久久香综合 |