我们刚刚发布了 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>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> )}如果您需要更精细的控制，我们还通过渲染属性/作用域插槽传递 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 安装最新版本：
# 对于 Reactnpm install @headlessui/react# 对于 Vuenpm install @headlessui/vue查看官方网站获取最新文档，如果您想要使用大量样式化示例，可以查看 Tailwind UI。
准备好试试看了吗？ 访问 Headless UI 网站 →