我们刚刚发布了 Headless UI v1.4，其中包括一个全新的 Tab 组件，以及更便于手动关闭 Popover 和 Disclosure 组件的新 API。
选项卡
今年早些时候，我们开始着手开发 Tailwind UI Ecommerce，并很快意识到我们需要在 Headless UI 中支持选项卡，以能够构建我们正在设计的新界面。
这是我们最终得出的结果：
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。对于典型的披露用例，这并不是大问题，但通常在移动导航等场景中使用披露是有意义的，当您希望在有人点击其内部的链接时关闭它。
现在，您可以在您的披露面板中使用 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 安装最新版本：
# 对于 Reactnpm install @headlessui/react# 对于 Vuenpm install @headlessui/vue查看 官方网站 以获取最新文档，如果您想玩大量样式示例，请查看 Tailwind UI。
准备好尝试了吗？访问 Headless UI 网站 →