How to use Headless UI and daisyUI together?

去年发布作者：Pouya Saadeghi

如何一起使用 Headless UI 和 daisyUI？

什么是 Headless UI？为什么建议将其与 daisyUI 一起使用？

Headless UI 是一组完全无样式、完全可访问的 React 和 Vue UI 组件。它为您提供功能，而无需设计决策。daisyUI 是一个 Tailwind CSS 组件库，它提供设计决策，而无需功能。这就是为什么建议将它们一起使用。

为什么使用 Headless UI？

作为一个纯 CSS 组件库，daisyUI 不包含任何 JavaScript 代码。但是，有时您需要 JS 来制作交互式组件或改进键盘导航。这就是Headless UI的用武之地。它为您提供完全可访问的 React 和 Vue UI 组件。

如何安装 Headless UI？

Headless UI可用于 React 和 Vue。但也有一个非官方的 Headless UI for Svelte 移植版本。

要为 Vue 安装 Headless UI，请运行以下命令

npm install @headlessui/vue

如果您使用 React，则运行此命令

npm install @headlessui/react

现在，您可以通过复制/粘贴代码到您的项目来使用任何Headless UI 组件。

例如，根据 Headless UI 文档，这是创建下拉菜单的方法

import { Menu } from "@headlessui/react"

export default function MyDropDown() {
  return (
    <Menu>
      <Menu.Button>Button</Menu.Button>
      <Menu.Items>
        <Menu.Item>
          <li>
            <a href="/link">Item 1</a>
          </li>
        </Menu.Item>
        <Menu.Item>
          <li>
            <a href="/link">Item 2</a>
          </li>
        </Menu.Item>
      </Menu.Items>
    </Menu>
  )
}

添加 daisyUI

在安装 daisyUI 之后，您可以在 Headless UI 组件中使用 daisyUI 的样式。只需在需要的地方添加 daisyUI 类名（和 Tailwind CSS 实用程序类）

import { Menu } from "@headlessui/react"

export default function MyDropDown() {
  return (
    <Menu>
      <Menu.Button className="btn">Button</Menu.Button>
      <Menu.Items className="menu rounded-box bg-base-200 w-52">
        <Menu.Item>
          <li>
            <a href="/link">Item 1</a>
          </li>
        </Menu.Item>
        <Menu.Item>
          <li>
            <a href="/link">Item 2</a>
          </li>
        </Menu.Item>
      </Menu.Items>
    </Menu>
  )
}

访问Headless UI 文档以了解有关其组件的更多信息。

标签组件库

daisyUI 博客

如何一起使用 Headless UI 和 daisyUI？

为什么使用 Headless UI？

如何安装 Headless UI？

不要错过新文章！