按钮

安装

要开始使用，请通过 npm 安装 Headless UI

npm install @headlessui/react

基本示例

按钮使用 Button 组件构建

import { Button } from '@headlessui/react'

function Example() {
  return (
    <Button className="rounded bg-sky-600 py-2 px-4 text-sm text-white data-[hover]:bg-sky-500 data-[active]:bg-sky-700">
      Save changes
    </Button>
  )
}

可以将通常会传递给原生 button 元素的任何属性传递给 Button。

样式设置

Headless UI 跟踪每个组件大量状态，例如某个输入栏是否是焦点，某个弹出面板是否已打开或关闭，或某个菜单中的哪个项目当前为键盘焦点。

但是，由于这些组件是无头的，且开箱即用时完全无样式，因此在你为每个状态自己提供所需的样式之前，无法在 UI 中看到此信息。

使用数据属性

设置 Headless UI 组件的不同状态最简单的方法就是使用每个组件公开的 data-* 属性。

例如，Button 组件公开了一个 data-hover 属性（用于指示鼠标当前是否悬停在该按钮上）和一个 data-active 属性（用于指示按钮当前是否处于按下状态）。

<!-- Rendered `Button` -->
<button type="button" data-hover data-active></button>

使用 CSS 属性选择器 根据这些数据属性的存在有条件地应用样式。如果你使用的是 Tailwind CSS，数据属性修改器 可轻松实现此目的。

import { Button } from '@headlessui/react'

function Example() {
  return (
    <Button className="rounded bg-sky-600 py-2 px-4 text-sm text-white data-[hover]:bg-sky-500 data-[hover]:data-[active]:bg-sky-700">
      Save changes
    </Button>
  )
}

有关所有可用数据属性的列表，请参阅 组件 API。

使用渲染属性

每个组件还会通过 渲染属性 公开有关其当前状态的信息，你可以使用这些信息来有条件地应用不同样式或渲染不同内容。

例如，Button 组件公开了一个 hover 状态，用于指示鼠标当前是否悬停在该按钮上，以及一个 active 状态，用于指示按钮当前是否处于按下状态。

import { Button } from '@headlessui/react'
import clsx from 'clsx'
import { Fragment } from 'react'

function Example() {
  return (
    <Button as={Fragment}>
      {({ hover, active }) => (
        <button
          className={clsx(
            'rounded py-2 px-4 text-sm text-white',
            !hover && !active && 'bg-sky-600',
            hover && !active && 'bg-sky-500',
            active && 'bg-sky-700'
          )}
        >
          Save changes
        </button>
      )}
    </Button>
  )
}

有关所有可用渲染属性的列表，请参阅 组件 API。

示例

禁用按钮

向 Button 添加 disabled 属性可禁用它

import { Button } from '@headlessui/react'

function Example() {
  return (
    <Button
      disabled
      className="rounded bg-sky-600 py-2 px-4 text-sm text-white data-[hover]:bg-sky-500 data-[active]:bg-sky-700 data-[disabled]:bg-gray-500"
    >
      Save changes
    </Button>
  )
}

组件API

按钮

原生 button 元素的薄包装器。