我们刚刚发布了 Headless UI v1.4，其中包括一个全新的 Tab 组件，以及用于更轻松手动关闭 Popover 和 Disclosure 组件的新 API。
🌐 We just released Headless UI v1.4, which includes a brand new Tab component, and new APIs for manually closing Popover and Disclosure components more easily.
标签页(Tabs)
今年早些时候，我们开始着手开发 Tailwind UI 电子商务，很快我们就意识到，为了构建我们正在设计的新界面，我们需要在 Headless UI 中支持标签页。
🌐 Earlier this year we started working on Tailwind UI Ecommerce, and we realized pretty quickly we were going to need to support tabs in Headless UI to be able to build the new interfaces we were designing.
最终成果如下：
🌐 Here's what we ended up with:
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> )}没错，这些是标签！
🌐 And yep, those are tabs!
与所有 Headless UI 组件一样，它完全抽象了键盘导航等功能，因此你可以以完全声明的方式创建自定义选项卡，而无需考虑任何棘手的可访问性细节。
🌐 Like all Headless UI components, this totally abstracts away stuff like keyboard navigation for you so you can create custom tabs in a completely declarative way, without having to think about any of the tricky accessibility details.
查看文档 了解更多信息。
关闭披露和弹出窗口(Closing disclosures and popovers)
直到现在，关闭 Disclosure 只能通过点击打开它的按钮。对于典型的披露使用场景来说，这不是大问题，但在某些情况下，将披露用于诸如移动端导航的场景更有意义，此时你希望在有人点击其中的链接时能够关闭它。
🌐 Up until now, there was no way to close a Disclosure without clicking the actual button used to open it. For typical disclosure use cases this isn't a big deal, but it often makes sense to use disclosures for things like mobile navigation, where you want to close it when someone clicks a link inside of it.
现在你可以在你的展开面板中使用 Disclosure.Button 或（在 Vue 中使用 DisclosureButton）来关闭面板，这样就可以轻松地封装链接或其他按钮，避免面板保持打开状态：
🌐 Now you can use Disclosure.Button or (DisclosureButton in Vue) within your disclosure panel to close the panel, making it easy to wrap up things like links or other buttons so the panel doesn't stay open:
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 组件：
🌐 The same thing works with Popover components, too:
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> )}如果你需要更精细的控制，我们也可以通过 render 属性/作用域插槽传递一个 close 函数，这样你就可以在需要时以命令式方式关闭面板：
🌐 If you need finer control, we also pass a close function via the render prop/scoped slot, so you can imperatively close the panel when you need to:
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 文档。
🌐 For more details, check out the updated Popover and Disclosure documentation.
试用(Try it out)
Headless UI v1.4 是一个小更新，因此没有破坏性更改。要升级，只需通过 npm 安装最新版本即可：
🌐 Headless UI v1.4 is a minor update so there are no breaking changes. To upgrade, just install the latest version via npm:
# For Reactnpm install @headlessui/react# For Vuenpm install @headlessui/vue请查看官方网站了解最新文档，如果你想尝试大量样式示例，可以查看Tailwind UI。
🌐 Check out the official website for the latest documentation, and check out Tailwind UI if you want to play with tons of styled examples.
准备好试一试了吗？ 访问 Headless UI 网站 →