ボタン

インストール

Headless UIを使い始めるには、npmでインストールしてください。

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要素の薄いラッパーです。