文档博客展示柜Plus

Headless UI v1.4: 选项卡的版本

Adam Wathan
Robin Malfait

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

Headless UI v1.4

选项卡

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

来自 Tailwind UI Ecommerce 的产品详情界面设计。

这是我们最终得出的结果：

import { Tab } from '@headlessui/react'
function MyTabs() {
  return (
    <Tab.Group>
      <Tab.List>
        <Tab>选项卡 1</Tab>
        <Tab>选项卡 2</Tab>
        <Tab>选项卡 3</Tab>
      </Tab.List>
      <Tab.Panels>
        <Tab.Panel>内容 1</Tab.Panel>
        <Tab.Panel>内容 2</Tab.Panel>
        <Tab.Panel>内容 3</Tab.Panel>
      </Tab.Panels>
    </Tab.Group>
  )
}

没错，这就是选项卡！

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

查看文档了解更多信息。

关闭 Disclosure 和 Popover

到目前为止，无法在不点击实际用于打开的按钮的情况下关闭 Disclosure。对于典型的披露用例，这并不是大问题，但通常在移动导航等场景中使用披露是有意义的，当您希望在有人点击其内部的链接时关闭它。

现在，您可以在您的披露面板中使用 Disclosure.Button（在 Vue 中为 DisclosureButton）来关闭面板，这使得将链接或其他按钮包裹起来变得轻而易举，这样面板就不会保持开启状态：

import { Disclosure } from '@headlessui/react'
import MyLink from './MyLink'
function MyDisclosure() {
  return (
    <Disclosure>
      <Disclosure.Button>打开移动菜单</Disclosure.Button>
      <Disclosure.Panel>
        <Disclosure.Button as={MyLink} href="/home">
          首页
        </Disclosure.Button>
        {/* ... */}
      </Disclosure.Panel>
    </Disclosure>
  )
}

在 Popover 组件中也可以做到同样的事情：

import { Popover } from '@headlessui/react'
import MyLink from './MyLink'
function MyPopover() {
  return (
    <Popover>
      <Popover.Button>解决方案</Popover.Button>
      <Popover.Panel>
        <Popover.Button as={MyLink} href="/insights">
          洞见
        </Popover.Button>
        {/* ... */}
      </Popover.Panel>
    </Popover>
  )
}

如果您需要更细致的控制，我们还通过渲染属性/作用域插槽传递了一个 close 函数，以便您在需要时可以以命令式方式关闭面板：

import { Popover } from '@headlessui/react'
function MyPopover() {
  return (
    <Popover>
      <Popover.Button>条款</Popover.Button>
      <Popover.Panel>
        {({ close }) => (
          <button
            onClick={async () => {
              await fetch('/accept-terms', { method: 'POST' })
              close()
            }}
          >
            阅读并接受
          </button>
        )}
      </Popover.Panel>
    </Popover>
  )
}

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

尝试一下

Headless UI v1.4 是一次小更新，因此没有破坏性变化。要升级，只需通过 npm 安装最新版本：

# 对于 React
npm install @headlessui/react
# 对于 Vue
npm install @headlessui/vue

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

准备好尝试了吗？访问 Headless UI 网站 →

Get all of our updates directly to your inbox.
Sign up for our newsletter.

简中文档 - 沪ICP备2024070610号-3