字段集

安装

要开始，请通过 npm 安装无头 UI

npm install @headlessui/react

基本示例

使用 Fieldset 和 Legend 组件将一组表单控件与标题组合在一起

import { Field, Fieldset, Input, Label, Legend, Select, Textarea } from '@headlessui/react'

function Example() {
  return (
    <Fieldset className="space-y-8">
      <Legend className="text-lg font-bold">Shipping details</Legend>
      <Field>
        <Label className="block">Street address</Label>
        <Input className="mt-1 block" name="address" />
      </Field>
      <Field>
        <Label className="block">Country</Label>
        <Select className="mt-1 block" name="country">
          <option>Canada</option>
          <option>Mexico</option>
          <option>United States</option>
        </Select>
      </Field>
      <Field>
        <Label className="block">Delivery notes</Label>
        <Textarea className="mt-1 block" name="notes" />
      </Field>
    </Fieldset>
  )
}

由于原生 HTML <legend> 元素难以设置样式，因此 Legend 组件将渲染为 <div>。<Fieldset> 组件使用原生 <fieldset> 组件。

样式

无头 UI 会跟踪每个组件的很多状态信息，例如字段集是否被禁用、弹出框是打开还是关闭，或者菜单中哪个项目当前通过键盘获得焦点。

但由于组件是无头的，并且在开箱即用时完全没有样式，因此您无法在 UI 中看到此信息，除非您自己提供每个状态的样式。

使用数据属性

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

例如，Fieldset 和 Legend 组件都公开了一个 data-disabled 属性，该属性会告诉您字段集当前是否被禁用。

<!-- Rendered `Fieldset` and `Legend` -->
<fieldset aria-labelledby="..." disabled data-disabled>
  <div id="..." data-disabled>Shipping details</div>
  <!-- ... -->
</fieldset>

使用 CSS 属性选择器 根据这些数据属性的存在有条件地应用样式。如果您使用的是 Tailwind CSS，则 数据属性修饰符 会让这变得很容易。

import { Fieldset, Legend } from '@headlessui/react'

function Example() {
  return (
    <Fieldset disabled className="space-y-8 data-[disabled]:opacity-50">
      <Legend className="text-lg font-bold">Shipping details</Legend>
      {/* ... */}
    </Fieldset>
  )
}

查看 组件 API 以获取所有可用数据属性的列表。

使用渲染道具

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

例如，Fieldset 和 Legend 组件都公开了一个 disabled 状态，该状态会告诉您字段集当前是否被禁用。

import { Fieldset, Legend } from '@headlessui/react'
import clsx from 'clsx'
import { Fragment } from 'react'

function Example() {
  return (
    <Fieldset disabled as={Fragment}>
      {({ disabled }) => (
        <div className={clsx('space-y-8', disabled && 'opacity-50')}>
          <Legend className="text-lg font-bold">Shipping details</Legend>
          {/* ... */}
        </div>
      )}
    </Fieldset>
  )
}

查看 组件 API 以获取所有可用渲染道具的列表。

示例

禁用字段集

将 disabled 道具添加到 Fieldset 组件以禁用整个字段集

import { Fieldset, Legend } from '@headlessui/react'

function Example() {
  return (
    <Fieldset disabled>
      <Legend>Shipping details</Legend>
      {/* ... */}
    </Fieldset>
  )
}

组件 API

字段集

将一组表单控件与标题组合在一起。

图例

Fieldset 的标题。