Headless UI v1.4：带选项卡的版本

我们刚刚发布了 Headless UI v1.4，其中包含一个全新的 Tab 组件，以及用于更轻松地手动关闭 Popover 和 Disclosure 组件的新 API。

选项卡

今年早些时候，我们开始着手开发 Tailwind UI 电子商务，我们很快意识到我们需要在 Headless UI 中支持选项卡，才能构建我们正在设计的新界面。

Product details interface design from Tailwind UI Ecommerce.

以下是我们的最终成果

import { Tab } from '@headlessui/react'

function MyTabs() {
  return (
    <Tab.Group>
      <Tab.List>
        <Tab>Tab 1</Tab>
        <Tab>Tab 2</Tab>
        <Tab>Tab 3</Tab>
      </Tab.List>
      <Tab.Panels>
        <Tab.Panel>Content 1</Tab.Panel>
        <Tab.Panel>Content 2</Tab.Panel>
        <Tab.Panel>Content 3</Tab.Panel>
      </Tab.Panels>
    </Tab.Group>
  )
}

没错，这些就是选项卡！

与所有 Headless UI 组件一样，这完全抽象了键盘导航等内容，因此您可以以完全声明式的方式创建自定义选项卡，而无需考虑任何棘手的可访问性细节。

查看文档以了解更多信息。

关闭 Disclosure 和 Popover

到目前为止，没有办法关闭 Disclosure，除非点击用于打开它的实际按钮。对于典型的 disclosure 使用场景，这并不算什么大问题，但它通常适用于移动导航等内容，您希望在用户点击其中的链接时关闭它。

现在，您可以在 disclosure 面板内使用 Disclosure.Button 或（在 Vue 中为 DisclosureButton）来关闭面板，从而可以轻松地包装链接或其他按钮，这样面板就不会保持打开状态。

import { Disclosure } from '@headlessui/react'
import MyLink from './MyLink'

function MyDisclosure() {
  return (
    <Disclosure>
      <Disclosure.Button>Open mobile menu</Disclosure.Button>
      <Disclosure.Panel>
        <Disclosure.Button as={MyLink} href="/home">
          Home
        </Disclosure.Button>
        {/* ... */}
      </Disclosure.Panel>
    </Disclosure>
  )
}

Popover 组件也同样适用。

import { Popover } from '@headlessui/react'
import MyLink from './MyLink'

function MyPopover() {
  return (
    <Popover>
      <Popover.Button>Solutions</Popover.Button>
      <Popover.Panel>
        <Popover.Button as={MyLink} href="/insights">
          Insights
        </Popover.Button>
        {/* ... */}
      </Popover.Panel>
    </Popover>
  )
}

如果您需要更精细的控制，我们还会通过 render prop/scoped slot 传递一个 close 函数，这样您就可以在需要时强制关闭面板。

import { Popover } from '@headlessui/react'

function MyPopover() {
  return (
    <Popover>
      <Popover.Button>Terms</Popover.Button>
      <Popover.Panel>
        {({ close }) => (
          <button
            onClick={async () => {
              await fetch('/accept-terms', { method: 'POST' })
              close()
            }}
          >
            Read and accept
          </button>
        )}
      </Popover.Panel>
    </Popover>
  )
}

有关更多详细信息，请查看更新的 Popover 和 Disclosure 文档。

试试看

Headless UI v1.4 是一个小的更新，因此没有重大更改。要升级，只需通过 npm 安装最新版本

# For React
npm install @headlessui/react

# For Vue
npm install @headlessui/vue

查看官方网站获取最新文档，并查看 Tailwind UI 如果你想玩大量的样式示例。

Headless UI v1.4：带选项卡的版本

​选项卡

​关闭 Disclosure 和 Popover

​试试看

选项卡

关闭 Disclosure 和 Popover

试试看