2021年7月29日

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

Adam Wathan

@adamwathan

Robin Malfait

@malfaitrobin

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

标签页

今年早些时候，我们开始开发 Tailwind UI Ecommerce，并且我们很快意识到我们将需要在 Headless UI 中支持标签页，以便能够构建我们正在设计的新界面。

Product details interface design from Tailwind UI Ecommerce.

这是我们最终得到的结果

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 面板中使用 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 安装最新版本

# For React
npm install @headlessui/react
# For Vue
npm install @headlessui/vue

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

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

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

标签页

关闭 Disclosure 和 Popover

试用一下

直接在您的收件箱中获取我们所有的更新。注册我们的新闻通讯。

直接在您的收件箱中获取我们所有的更新。
注册我们的新闻通讯。