|
| 1 | +import { adamwathan } from '@/authors' |
| 2 | +import card from './card.jpg' |
| 3 | + |
| 4 | +export const meta = { |
| 5 | + title: 'Headless UI v1.0', |
| 6 | + description: `Last fall we announced Headless UI, a library of completely unstyled, fully accessible UI components, designed to pair perfectly with Tailwind CSS. Today we’re super excited to release Headless UI v1.0, which more than doubles the amount of included components for both React and Vue.`, |
| 7 | + date: '2021-04-14T16:00:00.000Z', |
| 8 | + authors: [adamwathan], |
| 9 | + image: card, |
| 10 | + footer: ` |
| 11 | + <p> |
| 12 | + Want to try it out? |
| 13 | + <a href="https://headlessui.dev" class="font-medium text-teal-500 hover:text-teal-600"> |
| 14 | + Visit the Headless UI website → |
| 15 | + </a> |
| 16 | + </p> |
| 17 | + `, |
| 18 | +} |
| 19 | + |
| 20 | +Last fall we announced [Headless UI](https://blog.tailwindcss.com/headless-ui-unstyled-accessible-ui-components), a library of completely unstyled, fully accessible UI components, designed to pair perfectly with Tailwind CSS. |
| 21 | + |
| 22 | +Today we’re super excited to release [Headless UI v1.0](https://headlessui.dev), which more than doubles the amount of included components for both React and Vue. |
| 23 | + |
| 24 | +<!--more--> |
| 25 | + |
| 26 | +<a href="https://headlessui.dev"> |
| 27 | + <img src={card} alt="Headless UI" /> |
| 28 | +</a> |
| 29 | + |
| 30 | +## What’s new |
| 31 | + |
| 32 | +We’ve added four new components to the React library, and five new components for Vue. |
| 33 | + |
| 34 | +### Dialog (modal) |
| 35 | + |
| 36 | +Headless UI now includes a robust dialog implementation you can use to build traditional modal dialogs, mobile slide-out menus, or any other take-over-style UI that needs to capture the focus of the entire page. |
| 37 | + |
| 38 | +```jsx |
| 39 | +import { useState } from 'react' |
| 40 | +import { Dialog } from '@headlessui/react' |
| 41 | + |
| 42 | +function MyDialog() { |
| 43 | + let [isOpen, setIsOpen] = useState(true) |
| 44 | + |
| 45 | + return ( |
| 46 | + <Dialog open={isOpen} onClose={setIsOpen}> |
| 47 | + <Dialog.Overlay /> |
| 48 | + |
| 49 | + <Dialog.Title>Deactivate account</Dialog.Title> |
| 50 | + <Dialog.Description> |
| 51 | + This will permanently deactivate your account |
| 52 | + </Dialog.Description> |
| 53 | + |
| 54 | + <p> |
| 55 | + Are you sure you want to deactivate your account? All of your data will |
| 56 | + be permanently removed. This action cannot be undone. |
| 57 | + </p> |
| 58 | + |
| 59 | + <button onClick={() => setIsOpen(false)}>Deactivate</button> |
| 60 | + <button onClick={() => setIsOpen(false)}>Cancel</button> |
| 61 | + </Dialog> |
| 62 | + ) |
| 63 | +} |
| 64 | +``` |
| 65 | +
|
| 66 | +### Disclosure |
| 67 | +
|
| 68 | +We’ve added a new `Disclosure` component that makes it easy to show/hide inline content accessibly. This is useful for things like collapsible FAQ questions, "show more" interfaces, or even hamburger menus that open up and push the rest of the page content away. |
| 69 | +
|
| 70 | +```html |
| 71 | +<template> |
| 72 | + <Disclosure> |
| 73 | + <DisclosureButton> Is team pricing available? </DisclosureButton> |
| 74 | + <DisclosurePanel> |
| 75 | + Yes! You can purchase a license that you can share with your entire team. |
| 76 | + </DisclosurePanel> |
| 77 | + </Disclosure> |
| 78 | +</template> |
| 79 | + |
| 80 | +<script> |
| 81 | + import { |
| 82 | + Disclosure, |
| 83 | + DisclosureButton, |
| 84 | + DisclosurePanel, |
| 85 | + } from '@headlessui/vue' |
| 86 | + |
| 87 | + export default { |
| 88 | + components: { Disclosure, DisclosureButton, DisclosurePanel }, |
| 89 | + } |
| 90 | +</script> |
| 91 | +``` |
| 92 | +
|
| 93 | +### Radio Group |
| 94 | +
|
| 95 | +There’s now a `RadioGroup` component that you can use to build totally custom radio button UIs, like when you want to use fancy cards or something instead of a simple little radio circle. |
| 96 | +
|
| 97 | +```jsx |
| 98 | +import { useState } from 'react' |
| 99 | +import { RadioGroup } from '@headlessui/react' |
| 100 | + |
| 101 | +function MyRadioGroup() { |
| 102 | + let [plan, setPlan] = useState('startup') |
| 103 | + |
| 104 | + return ( |
| 105 | + <RadioGroup value={plan} onChange={setPlan}> |
| 106 | + <RadioGroup.Label>Plan</RadioGroup.Label> |
| 107 | + <RadioGroup.Option value="startup"> |
| 108 | + {({ checked }) => ( |
| 109 | + <span className={checked ? 'bg-blue-200' : ''}>Startup</span> |
| 110 | + )} |
| 111 | + </RadioGroup.Option> |
| 112 | + <RadioGroup.Option value="business"> |
| 113 | + {({ checked }) => ( |
| 114 | + <span className={checked ? 'bg-blue-200' : ''}>Business</span> |
| 115 | + )} |
| 116 | + </RadioGroup.Option> |
| 117 | + <RadioGroup.Option value="enterprise"> |
| 118 | + {({ checked }) => ( |
| 119 | + <span className={checked ? 'bg-blue-200' : ''}>Enterprise</span> |
| 120 | + )} |
| 121 | + </RadioGroup.Option> |
| 122 | + </RadioGroup> |
| 123 | + ) |
| 124 | +} |
| 125 | +``` |
| 126 | +
|
| 127 | +### Popover |
| 128 | +
|
| 129 | +The new `Popover` component lets you build custom dropdown UIs that don’t have any content restrictions like a regular `Menu` component would. Great for fly-out menus on marketing sites, dropdowns that have form fields in them, and tons more. |
| 130 | +
|
| 131 | +```html |
| 132 | +<template> |
| 133 | + <Popover class="relative"> |
| 134 | + <PopoverButton>Solutions</PopoverButton> |
| 135 | + |
| 136 | + <PopoverPanel class="absolute z-10"> |
| 137 | + <div> |
| 138 | + <a href="/analytics">Analytics</a> |
| 139 | + <a href="/engagement">Engagement</a> |
| 140 | + <a href="/security">Security</a> |
| 141 | + <a href="/integrations">Integrations</a> |
| 142 | + </div> |
| 143 | + |
| 144 | + <img src="/solutions.jpg" alt="" /> |
| 145 | + </PopoverPanel> |
| 146 | + </Popover> |
| 147 | +</template> |
| 148 | + |
| 149 | +<script> |
| 150 | + import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue' |
| 151 | + |
| 152 | + export default { |
| 153 | + components: { Popover, PopoverButton, PopoverPanel }, |
| 154 | + } |
| 155 | +</script> |
| 156 | +``` |
| 157 | +
|
| 158 | +### TransitionRoot and TransitionChild (for Vue) |
| 159 | +
|
| 160 | +Headless UI already had a `Transition` component for React, but we’ve always recommended the native `<transition>` that already ships with Vue for Vue users. There are some limitations to the native transition though, and things can get complicated when trying to co-ordinate nested transitions that are supposed to run in parallel. |
| 161 | +
|
| 162 | +Headless UI v1.0 brings our React `Transition` component to Vue as well, which makes it a lot easier to transition things like modal dialogs. |
| 163 | +
|
| 164 | +```html |
| 165 | +<template> |
| 166 | + <!— This `show` prop controls all nested `Transition.Child` components. —> |
| 167 | + <TransitionRoot :show="isOpen"> |
| 168 | + <!— Background overlay —> |
| 169 | + <TransitionChild |
| 170 | + enter="transition-opacity" |
| 171 | + ease-linear |
| 172 | + duration-300" |
| 173 | + enter-from="opacity-0" |
| 174 | + enter-to="opacity-100" |
| 175 | + leave="transition-opacity" |
| 176 | + ease-linear |
| 177 | + duration-300" |
| 178 | + leave-from="opacity-100" |
| 179 | + leave-to="opacity-0" |
| 180 | + > |
| 181 | + <!— … —> |
| 182 | + </TransitionChild> |
| 183 | + |
| 184 | + <!— Sliding sidebar —> |
| 185 | + <TransitionChild |
| 186 | + enter="transition" |
| 187 | + ease-in-out |
| 188 | + duration-300 |
| 189 | + transform" |
| 190 | + enter-from="-translate-x-full" |
| 191 | + enter-to="translate-x-0" |
| 192 | + leave="transition" |
| 193 | + ease-in-out |
| 194 | + duration-300 |
| 195 | + transform" |
| 196 | + leave-from="translate-x-0" |
| 197 | + leave-to="-translate-x-full" |
| 198 | + > |
| 199 | + <!— … —> |
| 200 | + </TransitionChild> |
| 201 | + </TransitionRoot> |
| 202 | +</template> |
| 203 | + |
| 204 | +<script> |
| 205 | + import { ref } from "vue"; |
| 206 | + import { Transition, TransitionChild } from "@headlessui/vue"; |
| 207 | + |
| 208 | + export default { |
| 209 | + components: { TransitionRoot: Transition, TransitionChild }, |
| 210 | + |
| 211 | + setup() { |
| 212 | + const isShowing = ref(true); |
| 213 | + |
| 214 | + return { |
| 215 | + isShowing, |
| 216 | + }; |
| 217 | + }, |
| 218 | + }; |
| 219 | +</script> |
| 220 | +``` |
| 221 | +
|
| 222 | +## Try it out |
| 223 | +
|
| 224 | +Head over to our [brand new documentation website](https://headlessui.dev) to pull Headless UI into your projects and play with it! It’s MIT licensed and open-source, so if you’d like to poke around the code or you need to report an issue, [visit the GitHub repository](https://github.com/tailwindlabs/headlessui). |
0 commit comments