daisyUI

daisyUI 是一个用起来难受, 有些小毛病, 但效果很好的UI库.

关于 daisyUI

一个UI库, 完全使用 css 实现, 可以和 tailwindCSS 一起使用, 可以看作是对tailwindCSS的扩展.

例如, dialog:

<button className="btn" onClick={()=>document.getElementById('my_modal_1').showModal()}>open modal</button>
<dialog id="my_modal_1" className="modal">
  <div className="modal-box">
    <h3 className="font-bold text-lg">Hello!</h3>
    <p className="py-4">Press ESC key or click the button below to close</p>
    <div className="modal-action">
      <form method="dialog">
        {/* if there is a button in form, it will close the modal */}
        <button className="btn">Close</button>
      </form>
    </div>
  </div>
</dialog>

可以看到, daisyUI 只是提供了一些定义好的css, 想要实现组件, 仍然需要写原始的html

优点

使用CSS变量进行自定义

所有的组件都读取CSS变量, 包括颜色, 圆角, 边框等参数, 使得自定义样式以及动态改变主题变的简单

@plugin "daisyui/theme" {
    name: "valentine";
    default: true;
    prefersdark: false;
    color-scheme: "light";
    --color-base-100: oklch(98% 0.014 343.198);
    --color-base-200: oklch(96% 0.028 342.258);
    --color-base-300: oklch(84% 0.061 343.231);
    --color-base-content: oklch(0% 0 0);
    --color-primary: oklch(65% 0.241 354.308);
    --color-primary-content: oklch(100% 0 0);
    --color-secondary: oklch(62% 0.265 303.9);
    --color-secondary-content: oklch(97% 0.014 308.299);
    --color-accent: oklch(78% 0.115 274.713);
    --color-accent-content: oklch(39% 0.09 240.876);
    --color-neutral: oklch(40% 0.153 2.432);
    --color-neutral-content: oklch(89% 0.061 343.231);
    --color-info: oklch(80% 0.105 251.813);
    --color-info-content: oklch(44% 0.11 240.79);
    --color-success: oklch(70% 0.14 182.503);
    --color-success-content: oklch(43% 0.095 166.913);
    --color-warning: oklch(75% 0.183 55.934);
    --color-warning-content: oklch(26% 0.079 36.259);
    --color-error: oklch(63% 0.237 25.331);
    --color-error-content: oklch(97% 0.013 17.38);
    --radius-selector: 1rem;
    --radius-field: 2rem;
    --radius-box: 1rem;
    --size-selector: 0.25rem;
    --size-field: 0.25rem;
    --border: 1px;
    --depth: 0;
    --noise: 0;
  }

不依赖于框架

由于使用纯CSS实现, 即使原生HTML也可使用

缺点

需要手动封装组件

大多数组件都会被多次使用, 如果每次使用时都打开daisyUI文档, 找到要使用的组件, 复制HTML, 那就太麻烦了.

你需要为所有常用的组件进行封装以简化页面编写. 如果是没有使用框架, 那就随意了, 不管怎么写都麻烦.

纯HTML难以实现复杂效果

如果你尝试在可滚动组件内使用Dropdown组件, 你会发现Menu显示在了可滚动组件内

不仅如此, 还有很多地方存在小毛病

要想解决这些问题, 你必须使用框架或是JS动态修改DOM结构

总结

相较于基于框架的UI库, daisyUI 开发效率略低. 但 daisyUI 提供了一个美观的设计以及允许高度的自定义, 且任何网页开发技术栈都可以使用.