Building a menu tree using VueJs, TailwindCSS and HeadlessUI
HTML-код
- Опубликовано: 20 май 2024
- What should I cover next? Leave a comment bellow!
In this video we'll build a menu tree component using VueJs, TailwindCSS, and HeadlessUI.
Code snippets: tallpad.com/series/headlessui...
▬ Contents of this video ▬▬▬▬▬▬▬▬▬▬
00:00 - Intro / focus
00:24 - HTML sidebar
01:21 - Style sidebar
02:24 - Turn nav HTML tree into an array of objects
05:10 - Create NavItem component
06:58 - Add HeadlessUI disclosures
08:28 - Add menu icons
09:49 - Default menu styles
11:07 - Hover menu styles
12:29 - Style disclosure OPEN state
14:14 - Style menu item ACTIVE state
15:22 - Open disclosures containing an active item 
Наука
Your videos are clean precise and right to the point, super easy to understand. 👍
Simply amazing, thank you!
Clear, concise and very useful indeed - thanks.
Wow finally, this is what I'm waiting for, thank you @Constantin
This is so helpfull, pls come out with more content like this :)
Very nice use of recursion
Nice Tutorial
Extra clear explanation! you've won my subscription! super underrated chanell, you need 100x more views!
Thanks for the sub! 👊
Your teaching makes me need to learn vuejs, such intuitive syntax, just few key strokes needed.
Please extend this into a blog or something, would like to see authentication, states and api integration.
You got 1+ sub
Greetings from Tanzania 🇹🇿
Glad you found the video useful! 👊
great vid! i wonder how you'd persist the disclosure in a way that it won't close as you go to another child item page
Any chance you could make a follow up adding transitions to the disclosures? 😊
How would you toggle the active state in this example with vue-router ?
Can you do a tutorial for building draggable nested lists like the WordPress menu builder?
can you grouping all vue & tailwind content to playlist?
what code editor are you using? i see it's not like vscode
It's PhpStorm
Yup, Phpstorm. I do a lot of Laravel PHP in my day to day. 🤷♂