国外最流行的 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/
相关推荐
独立开阀者_FwtCoder12 分钟前
放弃 JSON.parse(JSON.stringify()) 吧!试试现代深拷贝!
前端·javascript·github
wuxuanok1 小时前
Web后端开发-分层解耦
java·笔记·后端·学习
爱喝水的小周1 小时前
AJAX vs axios vs fetch
前端·javascript·ajax
Jinxiansen02111 小时前
unplugin-vue-components 最佳实践手册
前端·javascript·vue.js
几道之旅1 小时前
介绍electron
前端·javascript·electron
周胡杰1 小时前
鸿蒙arkts使用关系型数据库,使用DB Browser for SQLite连接和查看数据库数据?使用TaskPool进行频繁数据库操作
前端·数据库·华为·harmonyos·鸿蒙·鸿蒙系统
31535669131 小时前
ClipReader:一个剪贴板英语单词阅读器
前端·后端
玲小珑2 小时前
Next.js 教程系列(十一)数据缓存策略与 Next.js 运行时
前端·next.js
ladymorgana2 小时前
【Spring Boot】HikariCP 连接池 YAML 配置详解
spring boot·后端·mysql·连接池·hikaricp