国外最流行的 UI 组件库!适配 Vue、React、Angular!

作者:前端开发爱好者

原文:mp.weixin.qq.com/s/2OLaBmrhr...

在前端开发领域,UI 组件库的选择对于开发效率和用户体验至关重要。

然而,许多国内的组件库常常过于臃肿,依赖大量的 JavaScript 代码和复杂的构建流程,这不仅增加了项目的体积,还可能影响性能。

在这种背景下,DaisyUI 以其独特的设计理念脱颖而出,成为开发者的新宠。就在前几天 DaisyUIV5 正式发布!

这一版本在功能和性能上进行了全面升级,进一步巩固了 DaisyUI 作为国外最流行 UI 组件库的地位。

DaisyUI:纯 CSS 组件库

DaisyUI 是一个基于 Tailwind CSS 构建的纯 CSS 组件库,它完全不需要一行 JavaScript 代码。

最大的优势

  • DaisyUI 是基于 Tailwind CSS 的纯 CSS 组件库。
  • 完全无需 JavaScript,框架无关,可无缝集成到任何前端项目中。
  • 适用于 ReactVueAngular 或纯 HTML/CSS 项目。

DaisyUI V5 的主要功能与特点

  • 无限主题 :支持无限主题切换,预设和自定义主题均可轻松配置,满足多样化视觉需求。
  • 丰富组件 :提供按钮卡片表单等多样化组件,助力快速搭建用户界面。
  • 高度定制:深度自定义组件样式,适配个性化设计需求。
  • 响应式设计 :组件适配多种设备,确保跨屏一致性。
  • 性能优化 :包体积小,构建速度快,提升开发与生产性能。

如何安装和使用 DaisyUI V5

安装 DaisyUI

要开始使用 DaisyUI V5,你需要先安装 Tailwind CSSDaisyUI。以下是安装步骤:

  • 安装 Tailwind CSSDaisyUI

    复制代码
     npm install tailwindcss daisyui
  • 在项目的 tailwind.config.js 文件中添加 DaisyUI 插件:

css 复制代码
   module.exports = {
     theme: {
       extend: {},
     },
     plugins: [require('daisyui')],
   }
  • 在你的 CSS 文件中导入 Tailwind CSSDaisyUI
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/
相关推荐
_Kayo_几秒前
VUE2 学习笔记11 脚手架
vue.js·笔记·学习
江城开朗的豌豆12 分钟前
Vue和React的数据流之争:双向绑定 vs 单向数据流,谁更适合你?
前端·javascript·vue.js
OpenTiny社区15 分钟前
前端可智能识别的搜索组件 SearchBox 使用详解!
前端·vue.js·ui·开源·opentiny
世伟爱吗喽16 分钟前
最新面试题总结
前端·javascript·vue.js
江城开朗的豌豆22 分钟前
前端权限控制实战:手把手教你玩转角色权限分配
前端·javascript·vue.js
rannn_11127 分钟前
【MySQL学习|黑马笔记|Day1】数据库概述,SQL|通用语法、SQL分类、DDL
数据库·后端·学习·mysql
超浪的晨35 分钟前
JavaWeb 入门:HTML 基础与实战详解(Java 开发者视角)
java·开发语言·前端·后端·html·个人开发
程序员爱钓鱼38 分钟前
Go语言实战案例-计算字符串编辑距离
后端·google·go
程序员爱钓鱼39 分钟前
Go语言实战案例-判断二叉树是否对称
后端·google·go
Victor3561 小时前
MySQL(165)MySQL如何处理并发控制?
后端