@headlessui/react 一个流行的 React UI 组件库

@headlessui/react 是一个流行的 React UI 组件库,专注于提供完全无样式但功能强大的可访问性组件。以下是对 @headlessui/react 的详细介绍:

1. 概述

@headlessui/react 由 Tailwind CSS 团队开发,旨在提供一套完全可定制的 UI 组件,这些组件没有预设的样式,但具有完整的功能和可访问性。它允许开发者在保持完全的设计自由度的同时,快速构建复杂的用户界面。

2. 主要特性

2.1 无样式设计

• 组件不包含任何预设样式
• 完全可定制,适应任何设计系统

2.2 可访问性

• 符合 WAI-ARIA 标准
• 键盘导航支持
• 屏幕阅读器友好

2.3 TypeScript 支持

• 完整的 TypeScript 类型定义
• 提供智能代码补全和类型检查

2.4 轻量级

• 最小化的包大小
• 没有额外的样式依赖

2.5 组合式 API

• 使用 React hooks 和组合模式
• 灵活的组件组合

3. 核心组件

@headlessui/react 提供了多个常用的 UI 组件:

3.1 Transition

• 用于创建平滑的过渡效果
• 支持进入和离开动画

import { Transition } from '@headlessui/react'

function MyComponent() {
  const [isShowing, setIsShowing] = useState(false)

  return (
    <>
      <button onClick={() => setIsShowing((isShowing) => !isShowing)}>
        Toggle
      </button>
      <Transition
        show={isShowing}
        enter="transition-opacity duration-75"
        enterFrom="opacity-0"
        enterTo="opacity-100"
        leave="transition-opacity duration-150"
        leaveFrom="opacity-100"
        leaveTo="opacity-0"
      >
        I will fade in and out
      </Transition>
    </>
  )
}

3.2 Menu

• 创建可访问的下拉菜单
• 支持键盘导航和自动焦点管理

import { Menu } from '@headlessui/react'

function MyDropdown() {
  return (
    <Menu>
      <Menu.Button>Options</Menu.Button>
      <Menu.Items>
        <Menu.Item>
          {({ active }) => (
            <a
              className={`${active && 'bg-blue-500'}`}
              href="/account-settings"
            >
              Account settings
            </a>
          )}
        </Menu.Item>
        <Menu.Item>
          {({ active }) => (
            <a
              className={`${active && 'bg-blue-500'}`}
              href="/documentation"
            >
              Documentation
            </a>
          )}
        </Menu.Item>
        <Menu.Item disabled>
          <span className="opacity-75">Invite a friend (coming soon!)</span>
        </Menu.Item>
      </Menu.Items>
    </Menu>
  )
}

3.3 Listbox

• 创建可访问的选择列表
• 支持单选和多选

3.4 Combobox

• 创建可搜索的下拉选择框
• 支持异步数据加载

3.5 Dialog

• 创建模态对话框
• 管理焦点陷阱和键盘交互

3.6 Disclosure

• 创建可展开/折叠的内容面板

3.7 Popover

• 创建弹出式信息框

3.8 Radio Group

• 创建一组单选按钮

3.9 Tabs

• 创建标签页界面

4. 使用方法

4.1 安装

npm install @headlessui/react

4.2 基本使用

import { Menu } from '@headlessui/react'

function MyMenu() {
  retur