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パネル内で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 Reactnpm install @headlessui/react# For Vuenpm install @headlessui/vue最新のドキュメントについては公式サイトを、スタイリングされた多くのサンプルを試してみたい場合はTailwind UIをご覧ください。
試してみる準備はできましたか？ Headless UIのウェブサイトへアクセス →