Building a menu tree using VueJs, TailwindCSS and HeadlessUI
9.3 هزار بار بازدید -
2 سال پیش
-
What should I cover next?
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: https://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
In this video we'll build a menu tree component using VueJs, TailwindCSS, and HeadlessUI.
Code snippets: https://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
2 سال پیش
در تاریخ 1401/05/31 منتشر شده
است.
9,328
بـار بازدید شده