去年秋天，我們宣布了 Headless UI，這是一個完全沒有樣式、完全可存取的 UI 元件庫，旨在與 Tailwind CSS 完美搭配使用。
今天，我們非常興奮地發布 Headless UI v1.0，它將 React 和 Vue 的元件數量增加了一倍以上。
新功能
我們在 React 函式庫中新增了四個新元件，在 Vue 中新增了五個新元件。
對話框（彈出式視窗）
Headless UI 現在包含強大的對話框實作，您可以用它來建構傳統的彈出式對話框、行動滑出式選單，或任何其他需要擷取整個頁面焦點的接管式 UI。
import { useState } from "react";import { Dialog } from "@headlessui/react";function MyDialog() { let [isOpen, setIsOpen] = useState(true); return ( <Dialog open={isOpen} onClose={setIsOpen}> <Dialog.Overlay /> <Dialog.Title>Deactivate account</Dialog.Title> <Dialog.Description>This will permanently deactivate your account</Dialog.Description> <p> Are you sure you want to deactivate your account? All of your data will be permanently removed. This action cannot be undone. </p> <button onClick={() => setIsOpen(false)}>Deactivate</button> <button onClick={() => setIsOpen(false)}>Cancel</button> </Dialog> );}展開/收合
我們新增了一個新的 Disclosure 元件，讓您可以輕鬆地以可存取的方式顯示/隱藏內嵌內容。這對於諸如可摺疊的常見問題解答、「顯示更多」介面，甚至是展開並將其他頁面內容推開的漢堡選單等功能都非常有用。
<template> <Disclosure> <DisclosureButton> Is team pricing available? </DisclosureButton> <DisclosurePanel> Yes! You can purchase a license that you can share with your entire team. </DisclosurePanel> </Disclosure></template><script> import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/vue"; export default { components: { Disclosure, DisclosureButton, DisclosurePanel }, };</script>單選群組
現在有一個 RadioGroup 元件，您可以用它來建構完全自訂的單選按鈕 UI，例如當您想要使用精美的卡片或其他東西，而不是簡單的小圓形單選按鈕時。
import { useState } from "react";import { RadioGroup } from "@headlessui/react";function MyRadioGroup() { let [plan, setPlan] = useState("startup"); return ( <RadioGroup value={plan} onChange={setPlan}> <RadioGroup.Label>Plan</RadioGroup.Label> <RadioGroup.Option value="startup"> {({ checked }) => <span className={checked ? "bg-blue-200" : ""}>Startup</span>} </RadioGroup.Option> <RadioGroup.Option value="business"> {({ checked }) => <span className={checked ? "bg-blue-200" : ""}>Business</span>} </RadioGroup.Option> <RadioGroup.Option value="enterprise"> {({ checked }) => <span className={checked ? "bg-blue-200" : ""}>Enterprise</span>} </RadioGroup.Option> </RadioGroup> );}彈出式視窗
新的 Popover 元件可讓您建構自訂的下拉式 UI，它們沒有像普通 Menu 元件那樣的內容限制。非常適合行銷網站上的飛出式選單、包含表單欄位的下拉式選單以及更多其他應用。
<template> <Popover class="relative"> <PopoverButton>Solutions</PopoverButton> <PopoverPanel class="absolute z-10"> <div> <a href="/analytics">Analytics</a> <a href="/engagement">Engagement</a> <a href="/security">Security</a> <a href="/integrations">Integrations</a> </div> <img src="/solutions.jpg" alt="" /> </PopoverPanel> </Popover></template><script> import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue"; export default { components: { Popover, PopoverButton, PopoverPanel }, };</script>TransitionRoot 和 TransitionChild (適用於 Vue)
Headless UI 已經為 React 提供了一個 Transition 元件，但我們一直建議 Vue 使用者使用 Vue 自帶的原生 <transition>。但是，原生轉換有一些限制，並且當嘗試協調應該並行執行的巢狀轉換時，事情可能會變得複雜。
Headless UI v1.0 也將我們的 React Transition 元件帶到了 Vue，這使得轉換彈出式對話框之類的東西變得容易得多。
<template> <!-- This `show` prop controls all nested `Transition.Child` components. --> <TransitionRoot :show="isOpen"> <!-- Background overlay --> <TransitionChild enter="transition-opacity" ease-linear duration-300" enter-from="opacity-0" enter-to="opacity-100" leave="transition-opacity" ease-linear duration-300" leave-from="opacity-100" leave-to="opacity-0" > <!-- … --> </TransitionChild> <!-- Sliding sidebar --> <TransitionChild enter="transition" ease-in-out duration-300 transform" enter-from="-translate-x-full" enter-to="translate-x-0" leave="transition" ease-in-out duration-300 transform" leave-from="translate-x-0" leave-to="-translate-x-full" > <!-- … --> </TransitionChild> </TransitionRoot></template><script>import { ref } from "vue";import { Transition, TransitionChild } from "@headlessui/vue";export default { components: { TransitionRoot: Transition, TransitionChild }, setup() { const isShowing = ref(true); return { isShowing, }; },};</script>試用看看
前往我們全新的文件網站，將 Headless UI 納入您的專案並試用看看！它是 MIT 授權且開源的，因此如果您想瀏覽程式碼或需要回報問題，請造訪 GitHub 儲存庫。
想試用看看嗎？ 造訪 Headless UI 網站 →