Headless UI

Headless UI 是由 Tailwind Labs 开发的一系列完全无样式的可访问 UI 组件，它们旨在帮助开发者构建自定义的、可访问的 UI 组件，而无需编写任何 CSS。

Headless UI 还提供了针对 React、Vue 和 Alpine.js 的特定绑定来简化使用。

安装

使用 npm 安装 Headless UI，只需要运行以下命令即可：

npm install @headlessui/react

你也可以使用 @headlessui/vue 或 @headlessui/alpine 来安装相应的绑定。

React 组件

Headless UI 的 React 组件完全是针对可访问性和可自定义性进行设计的。这些组件如下：

1. Dialog: 提供一个对话框组件
2. Disclosure: 提供一个具有展开/折叠功能的组件
3. Popover: 提供一个弹出控件组件，用于在其相关控制字段周围显示内容
4. Menu: 提供一个菜单组件，具有多项有用功能，例如“子菜单”和键盘导航
5. RadioGroup: 提供一个单选框组件，具有许多有用的功能，例如键盘导航和结果过滤
6. Switch: 提供一个易于访问的细节气泡式切换按钮

以下是示例代码片段，演示如何在 React 中使用 Headless UI 的 Dialog 组件：

import { Fragment, useState } from 'react'
import { Dialog, Transition } from '@headlessui/react'

function Modal() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open modal</button>

      <Transition appear show={isOpen} as={Fragment}>
        <Dialog
          as="div"
          className="fixed inset-0 z-10 overflow-y-auto"
          onClose={() => setIsOpen(false)}
        >
          <div className="min-h-screen px-4 text-center">
            <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />

            <span
              className="inline-block h-screen align-middle"
              aria-hidden="true"
            >
              &#8203;
            </span>
            <div className="inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl">
              <Dialog.Title
                as="h3"
                className="text-lg font-medium leading-6 text-gray-900"
              >
                Modal Title
              </Dialog.Title>
              <div className="mt-2">
                <p className="text-sm text-gray-500">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                  Consequatur amet labore.
                </p>
              </div>

              <div className="mt-4">
                <button
                  type="button"
                  className="inline-flex justify-center px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-indigo-500"
                  onClick={() => setIsOpen(false)}
                >
                  Got it, thanks!
                </button>
              </div>
            </div>
          </div>
        </Dialog>
      </Transition>
    </>
  )
}

Vue 组件

Headless UI 提供以下 Vue 组件：

1. Closable: 提供一个可关闭的组件
2. FocusTrap: 表示包含于其中的 HTML 元素在焦点离开其边界时将被“困住”的容器组件
3. Switch: 提供一个易于访问的细节气泡式切换按钮

以下是示例代码片段，演示如何在 Vue 中使用 Headless UI 的 Switch 组件：

<template>
  <Switch v-model="enabled">Enable email notifications</Switch>
</template>

<script>
import { Switch } from '@headlessui/vue'

export default {
  components: {
    Switch,
  },
  data() {
    return {
      enabled: false,
    }
  },
}
</script>

Alpine.js 组件

通过把 Alpine.js 与 Headless UI 的 CSS 类和 JavaScript 工具结合使用，你可以构建美观且高度可访问的组件。Headless UI 提供以下 Alpine.js 组件：

1. Dialog: 提供一个对话框组件
2. Disclosure: 提供一个具有展开/折叠功能的组件
3. Popover: 提供一个弹出控件组件，用于在其相关控制字段周围显示内容
4. Menu: 提供一个菜单组件，具有多项有用功能，例如“子菜单”和键盘导航
5. RadioGroup: 提供一个单选框组件，具有许多有用的功能，例如键盘导航和结果过滤
6. Switch: 提供一个易于访问的细节气泡式切换按钮

以下是示例代码片段，演示如何在 Alpine.js 中使用 Headless UI 的 Popover 组件：

<div class="relative">
  <button
    type="button"
    @click="open = true"
    class="focus:outline-none focus:ring-2 focus:ring-blue-500"
  >
    Open Popover
  </button>

  <!-- This element is to trick the `max-height` CSS applied to the `Popover.Panel` to work -->
  <div style="height: 0px;"></div>

  <Popover v-model="open">
    <template #default="{ open }">
      <Popover.Panel>
        <Popover.Button class="sr-only">Close</Popover.Button>

        <div class="absolute z-10 w-48 py-2 bg-white rounded-md shadow-lg">
          <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">
            Profile
          </a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">
            Logout
          </a>
        </div>
      </Popover.Panel>
    </template>

    <template #activator>
      <span class="sr-only">Open Popover</span>
    </template>
  </Popover>
</div>

<script>
import { Popover } from '@headlessui/vue'
import { ref } from 'vue'

export default {
  components: {
    Popover,
  },
  setup() {
    const open = ref(false)

    return {
      open,
    }
  },
}
</script>

以上是 Headless UI 的简介，这些组件简单易用，而且完全无样式，这意味着你可以将组件与任何标准化的 UI 工具链集成，例如 Tailwind CSS、Bootstrap 或自定义 CSS。Headless UI 可以帮助你构建高度可访问的、自定义的 UI 组件，提高开发效率，同时保证了应用的可访问性。