我們剛剛發布了 Headless UI v1.4，其中包含一個全新的 Tab 元件，以及可以更輕鬆地手動關閉 Popover 和 Disclosure 元件的新 API。
分頁
今年初，我們開始開發 Tailwind UI 電商，並很快意識到我們需要在 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。對於典型的揭露用例來說，這沒什麼大不了的，但是對於像是行動裝置導覽之類的東西，通常使用揭露會很有意義，在這種情況下，您希望在有人點擊它*內部*的連結時將其關閉。
現在，您可以在揭露面板內使用 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 網站 →