我們剛剛發布了 React 的 Headless UI v2.1，它大幅簡化了我們的轉換 API，並增加了對將多個對話框作為兄弟節點渲染的支援。
簡化的轉換 API
透過在您可能想要轉換的所有內建模件中新增一個新的 transition 屬性，並為每個轉換階段新增資料屬性，讓我們在 v2.1 中使轉換更加容易，因此您只需在目標元素上添加一些類別即可新增轉換樣式
import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";function Example() { return ( <Menu> <MenuButton>My account</MenuButton> <MenuItems transition className={` transition ease-out data-[closed]:scale-95 data-[closed]:opacity-0 data-[enter]:duration-200 data-[leave]:duration-300 `} > {/* Menu items… */} </MenuItems> </Menu> );}您可以使用四個資料屬性來針對轉換的不同階段
data-closed：元素在進入時應該轉換的起始樣式，以及在離開時轉換到的樣式。data-enter：元素進入時要套用的樣式，例如持續時間或緩和曲線。data-leave：元素離開時要套用的樣式，例如持續時間或緩和曲線。data-transition：元素進入或離開時要套用的樣式，對於在兩個階段之間共享值很有用。
您甚至可以堆疊這些屬性，以便為進入和離開使用不同的 closed 樣式。 例如，此對話框從左側滑入，但向右滑出
import { Dialog } from "@headlessui/react";import { useState } from "react";function Example() { let [isOpen, setIsOpen] = useState(false); return ( <> <button onClick={() => setIsOpen(true)}>Open dialog</button> <Dialog open={isOpen} onClose={() => setIsOpen(false)} transition className={` transition duration-300 ease-out data-[closed]:opacity-0 data-[closed]:data-[enter]:-translate-x-8 data-[closed]:data-[leave]:translate-x-8 `} > {/* Dialog content… */} </Dialog> </> );}對於轉換常規 HTML 元素或其他元件，您仍然可以使用 <Transition> 元件，但使用新的資料屬性 API
import { Transition } from "@headlessui/react";import { useState } from "react";function Example() { const [isShowing, setIsShowing] = useState(false); return ( <> <button onClick={() => setIsShowing((isShowing) => !isShowing)}>Toggle</button> <Transition show={isShowing}> <div className="transition duration-300 data-[closed]:opacity-0">I will fade in and out</div> </Transition> </> );}我們已更新了所有 Tailwind UI 以使用此新的轉換 API，並且程式碼更簡單、更輕巧。 請查看模態對話框、下拉式選單、側滑選單、彈出式選單或選取式選單元件以取得更多範例。
所有現有的 API 仍可向後相容，但我們將建議未來採用這種新方法。
查看更新後的Transition 元件文件以瞭解更多資訊。
將多個對話框作為兄弟節點渲染
在 Headless UI v2.1 中，您終於可以同時渲染多個對話框，而無需將一個對話框巢狀在另一個對話框內。
當應用程式的兩個不相關部分需要同時顯示對話框時，這會非常有用 - 例如，您可能已經開啟了某種類型的確認對話框，但應用程式的另一個部分偵測到您已失去網路連線或您的會話已逾時，並且需要在頂部彈出一個新的對話框。
以下是使用Catalyst（我們最近一直在開發的應用程式 UI 工具組）的類似情況
我們會追蹤每個對話框開啟的順序，並且最後開啟的對話框將在您按下 Esc 或點擊對話框外時關閉。
若要立即開始使用這些功能，只需安裝最新版本的 Headless UI
npm i @headlessui/react@latest如果您遇到任何問題，請在 GitHub 上告訴我們！