整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
亮有特色的 CSS 組件庫，組件代碼非常簡潔，也支持深度定制主題、定制組件，可以搭配 Vue / React 等框架使用。
daisyUI 是一款極為流行的 CSS UI 組件庫，作者 Pouya Saadeghi 基于大名鼎鼎的 Tailwind CSS 框架構建的組件庫。截止發文日期，已經在 Github 得到 11,200 Star， 944,600 次 NPM 安裝。
daisyui 官網
Tailwind CSS 是一個功能類優先的 CSS 框架，通過類似于 .flex、.pt-4、.text-center、.rotate-90 這種原子類組合的 class 名快速構建網站，在 HTML 代碼上就能完成開發，不需要再自己想各種 CSS 命名。
daisyUI 作為 Tailwind CSS 的組件庫，不僅繼承了它的優點，而且代碼更簡潔，主題非常漂亮有特點，打開官網就喜歡上它了。
daisyui 組件
支持搭配使用的框架
首先說說我最喜歡的主題，daisyUI 提供了 29 款主題，配色很舒服，各有特色，我首先想到用來做個人網站的主題，一定會很酷。
daisyui 默認主題
daisyui 暗主題
需要注意的是，使用 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>生產環境更推薦用 npm 的方式，這樣打包出來的項目會小很多：
安裝 daisyUI
npm i daisyui然后，在你的tailwind.config.js文件里追加 daisyUI 的設置
module.exports = {
//...
plugins: [require("daisyui")],
}使用過 Tailwind CSS 的開發者一定對這種寫一堆 class 名來構建組件的方式印象很深刻，我一直沒有推薦 Tailwind CSS，就是因為個人實在不喜歡零零碎碎的 CSS 類名，我更傾向于寫語義清晰的類名來開發組件。我們來看看實現一個常規的按鈕，兩種寫法的區別：
<!-- 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 個組件如果沒法滿足，官方還提供了自定義組件的工具類，開發者可以快速構建自定義組件。官網提供了詳盡的中文文檔，純 CSS 本身也易懂，對應的組件也有 HTML 代碼例子，上手使用完全不是問題。
daisyui 開發文檔
總的來說，這是一款漂亮、流行，代碼簡潔的 web UI 組件庫，熟悉以后能提高開發效率，不妨寫個快速 demo 嘗試一下。
daisyUI 是基于 Tailwind CSS 構建的 CSS 組件庫，源碼基于 MIT 開源協議托管在 Github 上，任何個人和公司都可以免費下載使用，也可以用于商業項目。
和 daisyUI 類似的框架還有之前推薦過的 Bootstrap 和 Pico.css，感興趣的開發者也可以前往了解。
關注我，持續分享高質量的免費開源、免費商用的資源。
↓↓點【了解更多】查看本次分享的網址。
當今快速發展的互聯網時代，前端開發的需求日益增長，開發者們迫切需要一種能夠快速構建高質量用戶界面的工具。今天，我要向大家介紹一個名為Franken UI的開源UI組件庫，它或許能成為您開發工具箱中的新利器。
Franken UI是一個HTML優先的開源UI組件庫，它既可以作為獨立的庫使用，也可以作為Tailwind CSS的插件。它與UIkit 3兼容，設計靈感來源于shadcn/ui。這個庫以其獨特的設計哲學和高效的開發方式，為開發者提供了一種新的選擇。
Tailwind CSS是一個實用主義的CSS框架，它提供了大量可組合的類，使得開發者能夠直接在標記中實現設計。Franken UI與Tailwind CSS的結合，使得開發者能夠利用這些工具的強強聯合，快速構建出美觀且響應式的界面。
UIkit是一個用于開發快速且功能強大的Web界面的模塊化前端框架。Franken UI繼承了UIkit的這一優勢，提供了預構建的組件和成熟的JavaScript庫，支持模態框、彈出窗口、輪播圖等復雜功能。
shadcn/ui是一個提供可重用組件的集合，以其美觀、有明確觀點的設計而著稱。Franken UI融合了這一設計美學，為組件提供了一致且吸引人的外觀。
Franken UI的安裝過程非常簡單，您可以選擇通過CDN鏈接快速引入樣式，也可以通過NPM將Franken UI集成到現有的Tailwind CSS項目中。無論是通過命令行工具初始化配置，還是手動編輯配置文件，Franken UI都提供了靈活的安裝和配置選項。
<link rel="stylesheet" href="https://unpkg.com/franken-wc@0.0.5/dist/css/slate.min.css">npm install tailwindcss postcss franken-ui && npx franken-ui init -pFranken UI提供了12種不同的主題，從穩重的石板灰到活潑的玫瑰紅，您可以根據項目需求選擇合適的主題。此外，如果您覺得現有主題還不夠，Franken UI還支持自定義調色板，讓您可以根據自己的品牌風格定制組件的外觀。
Franken UI支持TypeScript，并且與現代編輯器集成良好，提供了自動完成等特性，提高了開發效率。同時，Franken UI是一個活躍的開源項目，歡迎社區成員的貢獻和反饋，共同推動項目的發展。
Franken UI以其創新的設計和靈活的配置，為前端開發帶來了新的活力。無論您是經驗豐富的開發者，還是剛入門的新手，Franken UI都能為您提供快速構建高質量用戶界面的能力。立即訪問Franken UI官網，開始探索這個強大的UI組件庫吧！
evExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序，該套件附帶功能齊全的數據網格、交互式圖表小部件、數據編輯器等。
本文介紹自定義基于HTML的UI組件的方法。
DevExtreme Complete Subscription官方最新版免費下載試用，歷史版本下載，在線文檔和幫助文件下載-慧都網
官方建議使用UI組件的API來自定義它，與CSS類不同，API很少被更改。如果發生更改，UI組件將用警告填充瀏覽器控制臺，幫助開發人員修復代碼。
每個UI組件都有一個在UI組件的API參考部分中描述的API，例如開發人員可以通過相應的屬性指定UI組件的寬度。在下面的例子中，這個屬性是為List UI組件設置的。
jQuery
JavaScript
$(function() {
$("#listContainer").dxList({
width: 600
});
});ASP.NET MVC控件
Razor C#
@(Html.DevExtreme().List()
.Width(600)
)如果頁面包含同一個UI組件的多個實例，開發人員可以使用defaultOptions(rule) 方法在一個地方為所有這些組件指定默認配置，相同的方法允許開發者為不同的設備指定不同的默認配置。
此外，UI組件提供了可以用于更深入自定義的模板。
由于DevExtreme組件包含標準的HTML元素（<div>, <td>, <tr>等），所以開發人員可以使用CSS來自定義它們。
文檔中記錄了許多類，但是在大多數情況下，開發人員需要檢查HTML標記來確定和覆蓋應用的CSS類。
可以像往常一樣使用class屬性將類添加到標記中的UI組件元素中，如果不可能更改標記，則使用UI組件的elementAttr屬性來實現相同的目的。
注意：CSS內部結構可能在不同版本之間更改而不另行通知。考慮到這一點，我們建議在可能的情況下使用它們的API替代CSS來自定義UI組件。因為如果API發生了更改，開發人員將收到通知。
在自定義過程中，建議通過響應式設計模式查看UI組件頁面再不同設備上的外觀。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
