Headless UI v1.4: El de las pestañas

Acabamos de lanzar Headless UI v1.4, que incluye un nuevo componente `Tab`, y nuevas API para cerrar manualmente los componentes `Popover` y `Disclosure` más fácilmente.

Pestañas

A principios de este año empezamos a trabajar en Tailwind UI Ecommerce, y nos dimos cuenta bastante rápido de que íbamos a necesitar compatibilidad con pestañas en Headless UI para poder construir las nuevas interfaces que estábamos diseñando.

Esto es lo que obtuvimos:

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

¡Y sí, esas son pestañas!

Como todos los componentes de Headless UI, esto abstrae totalmente cosas como la navegación por teclado para que puedas crear pestañas personalizadas de forma completamente declarativa, sin tener que pensar en ninguno de los complicados detalles de accesibilidad.

Consulta la documentación para obtener más información.

Cerrando disclosures y popovers

Hasta ahora, no había forma de cerrar un `Disclosure` sin hacer clic en el botón real utilizado para abrirlo. Para los casos de uso típicos de disclosure, esto no es un gran problema, pero a menudo tiene sentido usar disclosures para cosas como la navegación móvil, donde quieres cerrarlo cuando alguien hace clic en un enlace dentro de él.

Ahora puedes usar `Disclosure.Button` o (`DisclosureButton` en Vue) dentro de tu panel de disclosure para cerrar el panel, facilitando la envoltura de cosas como enlaces u otros botones para que el panel no permanezca abierto:

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

Lo mismo funciona también con los componentes `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>
  )
}

Si necesitas un control más preciso, también pasamos una función `close` a través de la render prop/scoped slot, para que puedas cerrar imperativamente el panel cuando lo necesites:

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

Para obtener más detalles, consulta la documentación actualizada de Popover y Disclosure.

Pruébalo

Headless UI v1.4 es una actualización menor, por lo que no hay cambios disruptivos. Para actualizar, simplemente instala la última versión a través de npm:

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

Consulta el sitio web oficial para obtener la documentación más reciente y echa un vistazo a Tailwind UI si quieres jugar con toneladas de ejemplos estilizados.

¿Listo para probarlo? Visita el sitio web de Headless UI →