Robin Malfait
34a10538d6
* simplify examples by using the implicit open/closed state * introduce Open/Closed context (React) * use Open/Closed context in Dialog component (React) * use Open/Closed context in Disclosure component (React) * use Open/Closed context in Listbox component (React) * use Open/Closed context in Menu component (React) * use Open/Closed context in Popover component (React) * use Open/Closed context in Transition component (React) * introduce Open/Closed context (Vue) * use Open/Closed context in Dialog component (Vue) * use Open/Closed context in Disclosure component (Vue) * use Open/Closed context in Listbox component (Vue) * use Open/Closed context in Menu component (Vue) * use Open/Closed context in Popover component (Vue) * use Open/Closed context in Transition component (Vue) * use a ref in the Description comopnent This allows us to update the ref and everything should work after that. Currently we only saw the "current" state. * add more Vue examples * update changelog
26 lines
850 B
TypeScript
26 lines
850 B
TypeScript
import React from 'react'
|
|
import { Disclosure, Transition } from '@headlessui/react'
|
|
|
|
export default function Home() {
|
|
return (
|
|
<div className="flex justify-center w-screen h-full p-12 bg-gray-50">
|
|
<div className="w-full max-w-xs mx-auto">
|
|
<Disclosure>
|
|
<Disclosure.Button>Trigger</Disclosure.Button>
|
|
|
|
<Transition
|
|
enter="transition duration-1000 ease-out"
|
|
enterFrom="transform scale-95 opacity-0"
|
|
enterTo="transform scale-100 opacity-100"
|
|
leave="transition duration-1000 ease-out"
|
|
leaveFrom="transform scale-100 opacity-100"
|
|
leaveTo="transform scale-95 opacity-0"
|
|
>
|
|
<Disclosure.Panel className="p-4 bg-white mt-4">Content</Disclosure.Panel>
|
|
</Transition>
|
|
</Disclosure>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|