备受全球喜爱的 Tailwind CSS 组件库:daisyUI

[复制链接]
七夏(UID:1) 发表于 2024-11-1 15:13:27 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

×

组件库概述

前端开发的小伙伴们对组件库应该都不陌生了,尤其是像 ElementUI、Ant Design、NutUI 这些耳熟能详的库。不过你们有没有注意到,国内的许多组件库在风格上大多趋同,似乎都有相互借鉴的影子,导致样式差别不大。

不少人说国外的组件库更具创意,最近我也特意体验了一些国外的热门库。今天就带大家认识一款广受欢迎的 UI 组件库,看看它是否真的像传言那样“别具一格”,就等大家来评判了!

图片

核心特点

  • 丰富的 UI 组件: DaisyUI 提供了多种常见的组件,包括按钮、表单、模态框、卡片、通知框等,用户可以直接调用并集成这些组件,无需再手动编写样式。开发者可通过 DaisyUI 提供的丰富组件库(53个组件和超过500种实用类)大幅减少开发时间。
  • 灵活的定制性: DaisyUI 在可定制性方面表现出色。每个组件都可以使用 Tailwind 的类名自定义样式,符合项目需求,适应多种 UI 设计风格。此外,DaisyUI 支持主题定制,允许通过颜色变量快速切换暗模式和其他自定义主题。
  • 开发工作流的简化: 通过集成常用的实用工具(如表单验证、日期选择器、颜色选择器等),DaisyUI 可以让开发者专注于业务逻辑的实现,大幅简化开发工作流程。无需额外引入其他依赖即可实现多种实用功能。
  • 轻松集成: DaisyUI 提供灵活的安装方式,既可以通过 npm 或 yarn 安装用于任何 JavaScript 框架中,也支持 CDN 加载,适合快速原型开发和小型项目。在安装后,只需在 Tailwind 配置文件中添加 DaisyUI 插件即可轻松使用。
  • 详细的文档和示例: DaisyUI 提供了清晰的文档和使用示例,方便开发者迅速了解每个组件的用法及可选项。这些资源可以通过 daisyui.com 直接访问。

部分组件预览:

主题风格

亮色

图片

黑暗风

图片

night

图片

多种主题风格可以选择,支持在线一键预览

图片

组件

radio

图片

button按钮

图片

Swap开关

图片

警告

图片

tab

图片

表格

图片

导航

图片

聊天气泡

图片

卡片

图片

使用示例:快速对比 Tailwind 和 DaisyUI 组合的组件

传统 Tailwind 示例:

<div class="w-80 rounded-2xl bg-gray-100">
  <div class="flex flex-col gap-2 p-8">
    <input placeholder="Email" class="w-full rounded-lg border border-gray-300 bg-white px-4 py-3 focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-offset-2 focus:ring-offset-gray-100" />
    <label class="flex cursor-pointer items-center justify-between p-1">
      接受使用条款
      <div class="relative inline-block">
        <input type="checkbox" class="peer h-6 w-12 cursor-pointer appearance-none rounded-full border border-gray-300 bg-white checked:border-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2" />
        <span class="pointer-events-none absolute left-1 top-1 block h-4 w-4 rounded-full bg-gray-400 transition-all duration-200 peer-checked:left-7 peer-checked:bg-gray-900"></span>
      </div>
    </label>
    <button class="inline-block cursor-pointer rounded-md bg-gray-700 px-4 py-3.5 text-center text-sm font-semibold uppercase text-white transition duration-200 ease-in-out hover:bg-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-700 focus-visible:ring-offset-2 active:scale-95">保存</button>
  </div>
</div>

Tailwind + DaisyUI 示例:

<div class="card bg-base-200 w-80">
  <div class="card-body">
    <input placeholder="Email" class="input input-bordered" />
    <label class="label cursor-pointer">
      接受使用条款
      <input type="checkbox" class="toggle" />
    </label>
    <button class="btn btn-neutral">保存</button>
  </div>
</div>

自定义主题支持

DaisyUI 通过新增的 CSS 变量和颜色名称支持多主题管理,用户可根据项目需求自定义颜色方案,并轻松实现暗模式等主题切换,无需额外编写类名。开发者可通过修改 CSS 变量或在配置文件中定义多个主题,实现组件的全局样式统一。

安装和快速开始

DaisyUI 兼容 Tailwind CSS 插件系统,通过如下步骤即可安装: 1.通过 npm 安装:

npm i -D daisyui@latest

2.在 Tailwind 配置文件 tailwind.config.js 中引入 DaisyUI:

module.exports = {
  plugins: [require("daisyui")],
}

3.使用 CDN:

<link href="https://cdn.jsdelivr.net/npm/daisyui@3.7.3/dist/full.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>

组件库地址

https://daisyui.com

结语

DaisyUI 采用 MIT 开源协议,用户可以免费使用并根据需求进行修改和扩展。其 GitHub 仓库上提供源码、社区支持及贡献机会,使 DaisyUI 成为一个不断发展的 UI 解决方案。

DaisyUI 提供了强大而灵活的 UI 组件库,可以显著减少开发者的样式编写工作量,提高项目的开发效率。

小时候,看腻了农村的牛和马,长大后,来到了城里,才知道原来到处都是牛马!
全部回复1 显示全部楼层
aoki(UID:59) 发表于 2024-11-3 16:52:26 | 显示全部楼层
看看
狐狸导航:https://www.foxccs.cn/
回复

使用道具 举报

快速回帖

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1楼
2楼

关于楼主

管理员
  • 主题

    745
  • 回答

    264
  • 积分

    1980
虚位以待,此位置招租

商务推广

    网盘拉新-短剧推广 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租