Headless UI v1.4：带标签页的版本

我们刚刚发布了 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)

¥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>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>
  )
}

没错，这些是标签！

¥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.

查看文档 了解更多。

¥Check out the documentation to learn more.

关闭披露和弹出窗口(Closing disclosures and popovers)

¥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>Open mobile menu</Disclosure.Button>
      <Disclosure.Panel>
        <Disclosure.Button as={MyLink} href="/home">
          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>Solutions</Popover.Button>
      <Popover.Panel>
        <Popover.Button as={MyLink} href="/insights">
          Insights
        </Popover.Button>
        {/* ... */}
      </Popover.Panel>
    </Popover>
  )
}

如果你需要更精细的控制，我们还通过 render prop/scoped 槽位传递了一个 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>Terms</Popover.Button>
      <Popover.Panel>
        {({ close }) => (
          <button
            onClick={async () => {
              await fetch('/accept-terms', { method: 'POST' })
              close()
            }}
          >
            Read and accept
          </button>
        )}
      </Popover.Panel>
    </Popover>
  )
}

有关更多详细信息，请查看更新的 弹出窗口 和 披露 文档。

¥For more details, check out the updated Popover and Disclosure documentation.

试用(Try it out)

¥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 React
npm install @headlessui/react
# For Vue
npm 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.

准备好尝试一下了吗？Visit the Headless UI website →

¥Ready to try it out? Visit the Headless UI website →