search

ecklf / tailwindcss-radix

Utilities and variants for styling Radix state
https://tailwindcss-radix.vercel.app
MIT License
2.11k stars 67 forks source link

Accordion animation example #13

Closed kelenakamura closed 2 years ago

kelenakamura commented 2 years ago

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?)

ecklf commented 2 years ago

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.

kelenakamura commented 2 years ago

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.

ecklf commented 2 years ago

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.

kelenakamura commented 2 years ago

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.

elhe26 commented 1 year ago

Hey @ecklf, I was trying to implement group-radix-state-open:rotate-180 as-is but it didn't work.

ecklf commented 1 year ago

Hi @elhe26 seems unrelated to this specific issue (OP tries to animate the accordion content height). Mind creating a new issue and providing a reproduction? Thanks 🤝 !