لاراول

Learn Headless UI

Learn Headless UI

Headless UI is a library that provides completely unstyled accessible UI components. Or in other words, you are responsible for providing your own markup and styles, which results in a completely custom look for your components. In this short series, we’ll use Vue 3 to explore some of the components that are available and style them using Tailwind CSS.

سطح متوسط 4 جلسه آموزشی 00:49:00 ساعت
01
قسمت 1

Menu Dropdown

Let's begin by installing Headless UI and playing around with the "Menu" (Dropdown) component. We take a look at some of the customization options available, learn about scoped slots, and style the dropdown with Tailwind CSS.

02
قسمت 2

Dialog

Next up, we'll review the Dialog (Modal) component. We'll review the different layers of a Dialog and how to animate them independently. Lastly, we'll apply a few customizations.

03
قسمت 3

Radio Group

Now, let's have a look at Radio Groups, which are one of my favorite components to style. I like to provide more detail to what the user is selecting and make it more visually appealing along the way.

04
قسمت 4

Tabs

To finish up this mini-series, let's review the Tabs component. Tabs are quite simple to implement. We'll consider two different styles for doing so.