国外最流行的 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，框架无关，可无缝集成到任何前端项目中。
• 适用于 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 插件：

   module.exports = {
     theme: {
       extend: {},
     },
     plugins: [require('daisyui')],
   }

• 在你的 CSS 文件中导入 Tailwind CSS 和 DaisyUI：

   @tailwind base;
   @tailwind components;
   @tailwind utilities;

使用组件

安装完成后，你可以在 HTML 或前端框架中直接使用 DaisyUI 提供的类名。例如：

<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 文件中的配置项来创建自定义主题。例如：

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#4CAF50',
        secondary: '#2196F3',
        accent: '#FFC107',
      },
    },
  },
  plugins: [require('daisyui')],
}

并且 DaisyUI 配备了强大的主题生成器：

DaisyUI V5 组件一览

DaisyUI V5 提供了丰富的组件，涵盖了从基础元素到复杂布局的各个方面。以下是一些核心组件的示例：

按钮（Button）

<button class="btn">默认按钮</button>
<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-secondary">次要按钮</button>
<button class="btn btn-accent">强调按钮</button>

卡片（Card）

<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）

<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）

<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）

<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/