按鈕

安裝

首先，透過 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 會追蹤每個元件的許多狀態，例如輸入是否有焦點、浮動式視窗是否開啟或關閉、或者選單中哪個項目目前有焦點（透過鍵盤）。

但由於元件是無頭的，而且出廠時完全沒有樣式，直到你為每個狀態提供所需的樣式，否則這些資訊不會顯示在使用者介面中。

使用資料屬性

造型 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 以取得所有可用渲染道具的清單。

範例

停用按鈕

新增 disabled 道具到 Button 以停用它

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 元素的輕量化包裝。