how can i close all accordion's label with 1 click?
please help me, i trying use
nuxtui then i want a button close accordion13 Replies
Hi @8l8
You can ref the UAccordion and then iterate over the Buttons.
see https://stackblitz.com/edit/nuxt-ui-22j1bp
Don't know if it's the intended way of doing so, but it works for me...
StackBlitz
Nuxt UI - Playground (forked) - StackBlitz
Playground of Nuxt UI, a UI library powered by Headless UI and Tailwind CSS for Nuxt.
thank you sm
i solved the trouble
@JonathanDoerfler
have an awesome day
can i ask you about
ref?
how can you find buttonRefs that will work fine?I looked into https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Accordion.vue
There you can see
1. how elements can be closed (line 155) and
2. that
buttonRefs is exposed (line 194)GitHub
ui/src/runtime/components/elements/Accordion.vue at dev · nuxt/ui
A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS. - nuxt/ui
thank you sm
i dont understand when i tried use
modal in modal then i can't close a modal when i click outside element?Can you provide a code snippet or repo (e. g. stackblitz.com) of what you're trying to achieve?
alptangal
StackBlitz
Nuxt - Starter (forked) - StackBlitz
Create a new Nuxt project, module, layer or start from a theme with our collection of starters.
here is my script
you can see when try click button#2 to show modal#2
then click outside area of modal#2, you can see modal#1 closed first
while my idea want close modal#2 first
how can i solve it?
thank you
i found the topic that same trouble
GitHub
If two modal boxes are opened in order, clicking on the mask layer ...
Environment Operating System: Windows_NT Node Version: v18.12.1 Nuxt Version: 3.9.0 CLI Version: 3.10.0 Nitro Version: 2.8.1 Package Manager: [email protected] Builder: - User Config: ssr, app, devtools...
@8l8 As you can see in the discussion, this problem soon will be resolved!
he said already does with sample video
i though its solved ?
@JonathanDoerfler
Oh, didn't read carefully...
You're right, the video shows a working example..
I did a little digging and found this issue: https://github.com/tailwindlabs/headlessui/issues/2876
Seems like the issue is fixed in the latest @headlessui/react version, but at the bottom people are asking for vue support... So perhaps Benjamin @benjamincanac showed the upcoming v3 of NuxtUI?
GitHub
headlessui / When two modals are opened as brothers(not nested chil...
What package within Headless UI are you using? package: headlessui/react What version of that package are you using? version : v1.7.16, What browser are you using? Browser : Chrome, Safari , ... Fi...
yes, react solved @JonathanDoerfler but i seen @benjamincanac told in
nuxtui topic