作者:前端开发爱好者
原文:mp.weixin.qq.com/s/2OLaBmrhr...
在前端开发领域,UI 组件库的选择对于开发效率和用户体验至关重要。
然而,许多国内的组件库常常过于臃肿,依赖大量的 JavaScript
代码和复杂的构建流程,这不仅增加了项目的体积,还可能影响性能。

在这种背景下,DaisyUI
以其独特的设计理念脱颖而出,成为开发者的新宠。就在前几天 DaisyUI
V5 正式发布!
这一版本在功能和性能上进行了全面升级,进一步巩固了 DaisyUI
作为国外最流行 UI
组件库的地位。
DaisyUI:纯 CSS 组件库
DaisyUI
是一个基于 Tailwind CSS 构建的纯 CSS 组件库,它完全不需要一行 JavaScript
代码。

最大的优势
DaisyUI
是基于Tailwind CSS
的纯 CSS 组件库。- 完全无需
JavaScript
,框架无关,可无缝集成到任何前端项目中。 - 适用于
React
、Vue
、Angular
或纯 HTML/CSS 项目。
DaisyUI V5 的主要功能与特点

- 无限主题 :支持
无限主题切换
,预设和自定义主题均可轻松配置,满足多样化视觉需求。 - 丰富组件 :提供
按钮
、卡片
、表单
等多样化组件,助力快速搭建用户界面。 - 高度定制:深度自定义组件样式,适配个性化设计需求。
- 响应式设计 :组件适配多种设备,确保
跨屏
一致性。 - 性能优化 :包
体积小
,构建速度快,提升开发与生产性能。
如何安装和使用 DaisyUI V5
安装 DaisyUI
要开始使用 DaisyUI
V5,你需要先安装 Tailwind CSS
和 DaisyUI
。以下是安装步骤:
-
安装
Tailwind CSS
和DaisyUI
:npm install tailwindcss daisyui
-
在项目的
tailwind.config.js
文件中添加 DaisyUI 插件:
css
module.exports = {
theme: {
extend: {},
},
plugins: [require('daisyui')],
}
- 在你的
CSS
文件中导入Tailwind CSS
和DaisyUI
:
less
@tailwind base;
@tailwind components;
@tailwind utilities;
使用组件
安装完成后,你可以在 HTML
或前端框架中直接使用 DaisyUI
提供的类名。例如:
xml
<button class="btn btn-primary">点击我</button>
<div class="card w-96 bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title">卡片标题</h2>
<p>卡片内容...</p>
</div>
</div>
自定义主题
DaisyUI V5 支持无限主题,你可以通过修改 tailwind.config.js
文件中的配置项来创建自定义主题。例如:
css
module.exports = {
theme: {
extend: {
colors: {
primary: '#4CAF50',
secondary: '#2196F3',
accent: '#FFC107',
},
},
},
plugins: [require('daisyui')],
}
并且 DaisyUI 配备了强大的主题生成器:

DaisyUI V5 组件一览
DaisyUI V5 提供了丰富的组件,涵盖了从基础元素到复杂布局的各个方面。以下是一些核心组件的示例:
按钮(Button)

ini
<button class="btn">默认按钮</button>
<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-secondary">次要按钮</button>
<button class="btn btn-accent">强调按钮</button>
卡片(Card)

xml
<div class="card w-96 bg-base-100 shadow-xl">
<figure><img src="example.jpg" alt="图片描述" /></figure>
<div class="card-body">
<h2 class="card-title">卡片标题</h2>
<p>卡片内容...</p>
<div class="card-actions justify-end">
<button class="btn btn-primary">按钮</button>
</div>
</div>
</div>
表格(Table)

xml
<table class="table table-zebra w-full">
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
</tr>
<!-- 更多行 -->
</tbody>
</table>
键盘(Kbd)

css
<div class="my-1 flex w-full justify-center gap-1">
<kbd class="kbd">q</kbd>
<kbd class="kbd">w</kbd>
<kbd class="kbd">e</kbd>
<kbd class="kbd">r</kbd>
<kbd class="kbd">t</kbd>
<kbd class="kbd">y</kbd>
<kbd class="kbd">u</kbd>
<kbd class="kbd">i</kbd>
<kbd class="kbd">o</kbd>
<kbd class="kbd">p</kbd>
</div>
模态框(Modal)

ini
<div class="modal">
<div class="modal-box">
<h3 class="font-bold text-lg">模态框标题</h3>
<p class="py-4">模态框内容...</p>
<div class="modal-action">
<button class="btn">关闭</button>
</div>
</div>
</div>
总之, 一切的一切,都只有 html + class ,没有一点 javaScript 的身影!
写在最后
DaisyUI V5 的发布,标志着一个更强大、更灵活、更高效的 UI 组件库的诞生。

它不仅继承了 DaisyUI 以往版本的所有优点,还通过一系列重大改进,进一步提升了开发体验和性能。无论你是使用 React 还是 Vue,DaisyUI V5 都将是你的不二之选。
- DaisyUI 官方网站 :
https://daisyui.com/