You did a great job of stepping through the implementation. Love this library! As a Vue only developer seeing React syntax made me laugh / gasp at points!
Thanks! Haha I hear you - having gasps looking at the Vue 3 syntax for a future Headless UI video 🤣 Spoiler: they're both great libraries, but switching from one to the other is definitely challenging 😅
I picked up the pre-release version of Headless UI and used it to provide the implementation for one of Tailwind UI's custom selects a couple of weeks ago. I'm using Vue3 and everything "just worked". When you look at the number of components required to implement a "simple" select it looks a bit overwhelming, but the control you get is pretty cool. As you'd expect (since it all comes from the same people) it mapped really easily onto the Tailwind UI sample and made everything really easily (this was about a week before Tailwind UI started publishing code samples in Vue with Headless UI). This is really amazing work, congrats to the entire team, Tailwind CSS + Tailwind UI + Headless UI has been a total game changer for me.
This is pretty cool, for React/Vue folks. As a Svelte person, I think some of it would be nice (aria, etc), but the things like transitions aren't needed (svelte already can do all that easily).
I had few issue with Menu comp. headless/react its difficult to control event propagation from Menu.Button when used inside tag, thereby causing a click event on tag, any idea for a work around?
is it possible to disable the spacebar from opening and closing the button? we have a text field in the dropdown that closes the dropdown when typing space
Is it possible to do the same with both click and hover event? I tried using group and group hover, but when the button is not clicked. the component is not even in the DOM. Is there any way? Let me know!
I am facing problem with tailwindcss. In my development server everything is okay. but in build file and after running the build file some designs are not working.
Thank you so much it's very quick trick to achieve the popup behaviours could you tell me can I install headless ui in my project is there having any disadvantages.?
this is amazing, but is there any change that this menu would work like React Spectrum's in phones, that it would show the list on a tray from the bottom of the phone's screen, also a searchable select , i know its a lot of request but I have no idea how can I go about building it
The video is Grate: NOW how can I us it in Laravel 8 with php 8 Trying to follow along but have more questions the answers. Can Some One Please Help ? I installed the headless UI but now how can I set it up to use in the menu or side menu bar I am trying to create?
The Headless UI components don't come with any styling. The menu isn't even positioned absolutely by default. The only thing it provides is accessibility controls, anything related to the positioning or design of the menu is completely up to how you style it. This was just an example of one way you could style the menu.
Hello all, happy coding I wanna ask some questions is it free to use? or we have to buy like tailwindui? and Where can I find the source code for this video? thanks
My DRY nose smells bad code here. Why didn't you finish with consolidating all that repeated code into an array.each() with the item icon,name and disabled state ? The way it is it would be a nightmare to maintain.
Honestly, we are totally disappointed by the product from Tailwind Labs. Its really hopeless and confused a lot of things we have learnt. I think you guys just wasted your time. Look at the code for dropdown. It has a number of vue component imports and none of these are provided. The whole thing looks so silly and incomplete. I love Tailwindcss but this one is really a disappointment. Looks like a rush job.
