亮有特色的 CSS 組件庫，組件代碼非常簡潔，也支持深度定制主題、定制組件，可以搭配 Vue / React 等框架使用。

關于 daisyUI

daisyUI 是一款極為流行的 CSS UI 組件庫，作者 Pouya Saadeghi 基于大名鼎鼎的 Tailwind CSS 框架構建的組件庫。截止發(fā)文日期，已經(jīng)在 Github 得到 11,200 Star， 944,600 次 NPM 安裝。

Tailwind CSS 是一個功能類優(yōu)先的 CSS 框架，通過類似于 .flex、.pt-4、.text-center、.rotate-90 這種原子類組合的 class 名快速構建網(wǎng)站，在 HTML 代碼上就能完成開發(fā)，不需要再自己想各種 CSS 命名。

daisyUI 作為 Tailwind CSS 的組件庫，不僅繼承了它的優(yōu)點，而且代碼更簡潔，主題非常漂亮有特點，打開官網(wǎng)就喜歡上它了。

daisyUI 的技術特性

• 提供 45 個常用組件，多達 29 款主題，款款都是精品
• 相比 Tailwind CSS 的原子類，daisyUI 采用語義化的 class 名，寫出更純凈的 HTML
• 支持深度自定義、可定制主題
• 是一個純凈 CSS 組件，所以支持和任意 Vue / React 這樣的框架一起使用

開發(fā)上手體驗和使用感受

首先說說我最喜歡的主題，daisyUI 提供了 29 款主題，配色很舒服，各有特色，我首先想到用來做個人網(wǎng)站的主題，一定會很酷。

主題風格預覽

安裝和使用

需要注意的是，使用 daisyUI 前，需要和 Tailwind CSS 一起安裝，最簡單的方式是 cdn 引入：

<link href="https://cdn.jsdelivr.net/npm/daisyui@2.15.2/dist/full.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>

生產(chǎn)環(huán)境更推薦用 npm 的方式，這樣打包出來的項目會小很多：

安裝 daisyUI

npm i daisyui

然后，在你的tailwind.config.js文件里追加 daisyUI 的設置

module.exports = {
  //...
  plugins: [require("daisyui")],
}

“反” Tailwind CSS

使用過 Tailwind CSS 的開發(fā)者一定對這種寫一堆 class 名來構建組件的方式印象很深刻，我一直沒有推薦 Tailwind CSS，就是因為個人實在不喜歡零零碎碎的 CSS 類名，我更傾向于寫語義清晰的類名來開發(fā)組件。我們來看看實現(xiàn)一個常規(guī)的按鈕，兩種寫法的區(qū)別：

<!-- Tailwind CSS 的寫法 -->
<a class="inline-block px-4 py-3 text-sm font-semibold 
    text-cente text-white uppercase transition
    duration-200 ease-in-out bg-indigo-600 
    rounded-md cursor-pointer
    hover:bg-indigo-700">Button</a>

<!-- daisyUI 的寫法 -->
<a class="btn btn-primary">Button</a>

daisyUI 的寫法實在太簡潔了，所以說 daisyUI 簡直是“反” Tailwind CSS 思路一點也不為過，不過 Tailwind CSS 的作者認為語義化的 CSS 并不好維護，因為隨著項目的迭代，很多 class 名早已失去了原有的意義了。各位前端小伙伴，你們覺得呢？

45 個組件如果沒法滿足，官方還提供了自定義組件的工具類，開發(fā)者可以快速構建自定義組件。官網(wǎng)提供了詳盡的中文文檔，純 CSS 本身也易懂，對應的組件也有 HTML 代碼例子，上手使用完全不是問題。

總的來說，這是一款漂亮、流行，代碼簡潔的 web UI 組件庫，熟悉以后能提高開發(fā)效率，不妨寫個快速 demo 嘗試一下。

免費開源說明

daisyUI 是基于 Tailwind CSS 構建的 CSS 組件庫，源碼基于 MIT 開源協(xié)議托管在 Github 上，任何個人和公司都可以免費下載使用，也可以用于商業(yè)項目。

和 daisyUI 類似的框架還有之前推薦過的 Bootstrap 和 Pico.css，感興趣的開發(fā)者也可以前往了解。

關注我，持續(xù)分享高質量的免費開源、免費商用的資源。

↓↓點【了解更多】查看本次分享的網(wǎng)址。

當今快速發(fā)展的互聯(lián)網(wǎng)時代，前端開發(fā)的需求日益增長，開發(fā)者們迫切需要一種能夠快速構建高質量用戶界面的工具。今天，我要向大家介紹一個名為Franken UI的開源UI組件庫，它或許能成為您開發(fā)工具箱中的新利器。

什么是Franken UI？

Franken UI是一個HTML優(yōu)先的開源UI組件庫，它既可以作為獨立的庫使用，也可以作為Tailwind CSS的插件。它與UIkit 3兼容，設計靈感來源于shadcn/ui。這個庫以其獨特的設計哲學和高效的開發(fā)方式，為開發(fā)者提供了一種新的選擇。

Franken UI的核心特點

1. 與Tailwind CSS的無縫集成

Tailwind CSS是一個實用主義的CSS框架，它提供了大量可組合的類，使得開發(fā)者能夠直接在標記中實現(xiàn)設計。Franken UI與Tailwind CSS的結合，使得開發(fā)者能夠利用這些工具的強強聯(lián)合，快速構建出美觀且響應式的界面。

2. UIkit 3的模塊化支持

UIkit是一個用于開發(fā)快速且功能強大的Web界面的模塊化前端框架。Franken UI繼承了UIkit的這一優(yōu)勢，提供了預構建的組件和成熟的JavaScript庫，支持模態(tài)框、彈出窗口、輪播圖等復雜功能。

3. shadcn/ui的美學設計

shadcn/ui是一個提供可重用組件的集合，以其美觀、有明確觀點的設計而著稱。Franken UI融合了這一設計美學，為組件提供了一致且吸引人的外觀。

如何安裝Franken UI？

Franken UI的安裝過程非常簡單，您可以選擇通過CDN鏈接快速引入樣式，也可以通過NPM將Franken UI集成到現(xiàn)有的Tailwind CSS項目中。無論是通過命令行工具初始化配置，還是手動編輯配置文件，F(xiàn)ranken UI都提供了靈活的安裝和配置選項。

CDN安裝示例：

<link rel="stylesheet" href="https://unpkg.com/franken-wc@0.0.5/dist/css/slate.min.css">

NPM安裝示例：

npm install tailwindcss postcss franken-ui && npx franken-ui init -p

Franken UI的主題和定制

Franken UI提供了12種不同的主題，從穩(wěn)重的石板灰到活潑的玫瑰紅，您可以根據(jù)項目需求選擇合適的主題。此外，如果您覺得現(xiàn)有主題還不夠，F(xiàn)ranken UI還支持自定義調色板，讓您可以根據(jù)自己的品牌風格定制組件的外觀。

編輯器支持和社區(qū)貢獻

Franken UI支持TypeScript，并且與現(xiàn)代編輯器集成良好，提供了自動完成等特性，提高了開發(fā)效率。同時，F(xiàn)ranken UI是一個活躍的開源項目，歡迎社區(qū)成員的貢獻和反饋，共同推動項目的發(fā)展。

結語

Franken UI以其創(chuàng)新的設計和靈活的配置，為前端開發(fā)帶來了新的活力。無論您是經(jīng)驗豐富的開發(fā)者，還是剛入門的新手，F(xiàn)ranken UI都能為您提供快速構建高質量用戶界面的能力。立即訪問Franken UI官網(wǎng)，開始探索這個強大的UI組件庫吧！

evExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現(xiàn)代Web開發(fā)堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序，該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

本文介紹自定義基于HTML的UI組件的方法。

DevExtreme Complete Subscription官方最新版免費下載試用，歷史版本下載，在線文檔和幫助文件下載-慧都網(wǎng)

組件的API

官方建議使用UI組件的API來自定義它，與CSS類不同，API很少被更改。如果發(fā)生更改，UI組件將用警告填充瀏覽器控制臺，幫助開發(fā)人員修復代碼。

每個UI組件都有一個在UI組件的API參考部分中描述的API，例如開發(fā)人員可以通過相應的屬性指定UI組件的寬度。在下面的例子中，這個屬性是為List UI組件設置的。

jQuery

JavaScript

$(function() {
$("#listContainer").dxList({
width: 600
});
});

ASP.NET MVC控件

Razor C#

@(Html.DevExtreme().List()
.Width(600)
)

如果頁面包含同一個UI組件的多個實例，開發(fā)人員可以使用defaultOptions(rule) 方法在一個地方為所有這些組件指定默認配置，相同的方法允許開發(fā)者為不同的設備指定不同的默認配置。

此外，UI組件提供了可以用于更深入自定義的模板。

單個CSS類

由于DevExtreme組件包含標準的HTML元素（<div>, <td>, <tr>等），所以開發(fā)人員可以使用CSS來自定義它們。

文檔中記錄了許多類，但是在大多數(shù)情況下，開發(fā)人員需要檢查HTML標記來確定和覆蓋應用的CSS類。

可以像往常一樣使用class屬性將類添加到標記中的UI組件元素中，如果不可能更改標記，則使用UI組件的elementAttr屬性來實現(xiàn)相同的目的。

注意：CSS內部結構可能在不同版本之間更改而不另行通知?？紤]到這一點，我們建議在可能的情況下使用它們的API替代CSS來自定義UI組件。因為如果API發(fā)生了更改，開發(fā)人員將收到通知。

在自定義過程中，建議通過響應式設計模式查看UI組件頁面再不同設備上的外觀。