Accordion animation example
kelenakamura opened this issue · 6 comments
Is there a working example with the radix-state-open/closed utilities?
or even the headless ui example in the readme? (how does currentItem get set?)
The demo components use the radix-state-[open/closed] variants https://github.com/ecklf/tailwindcss-radix/blob/main/demo/components/Accordion.tsx#L47. There is no full example using headlessui, but feel free to contribute one if you want to :).
currentItem is just a value that you keep track of with onValueChange https://www.radix-ui.com/docs/primitives/components/accordion#api-reference.
yeah in the example though its not the animated version (like the radix example - https://www.radix-ui.com/docs/primitives/components/accordion) i ended up using their stitches method with a styled component to get it to work, as for some reason my radix-state-open prefixes weren't getting generated properly it seemed. will take a look at the headless ui approach again though.
The person who contributed this bit of the docs seems to go with a framer motion approach now: https://github.com/domosedov/domosedov-ui/blob/master/src/components/accordion.tsx.
It's not the first time I hear about issues getting that headlessui example to work so I'll go ahead and remove it. Feel free to open a PR if your research leads you to a working example.
Ah thanks for the link - that example with framer motion actually works better than relying on --radix-accordion-content-height - which didn't seem to work if there was an image inside the content.