Tabs
A pure vanilla JS implementation of Zag JS Tabs
Anatomy
The Tabs component consists of the following data-part
It can include multiple trigger and content parts.
data-value
is required on all trigger and content parts
root
list
trigger
content
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis a sem ut diam interdum ultricies sit amet id arcu.
Donec pretium magna cursus ante tincidunt porta.
Data attributes
Each tabs can be set with different settings with the following data-attribute.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis a sem ut diam interdum ultricies sit amet id arcu.
Donec pretium magna cursus ante tincidunt porta.
Callbacks
Each Tabs component can receive callbacks that can be used to respond to user interaction with custom behavior.
You must add a custom id for the dialog and a event listener for your event name
document.getElementById("my-callback-tabs")
?.addEventListener("my-callback-tabs-event", (event) => {
console.log("Received event:", (event as CustomEvent).detail);
});
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis a sem ut diam interdum ultricies sit amet id arcu.
Open your browser's console to see the events received when select a tab
Modifier
Each tab can be styled with modifiers.
You can mix as many modifiers on the same button, however you can choose only one choice per modifer
For convenience the default variant name is omited, meaning there is no need to add the default name class
Variant
Set the variant of each tab
Options: neutral(default), accent
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis a sem ut diam interdum ultricies sit amet id arcu.
Donec pretium magna cursus ante tincidunt porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis a sem ut diam interdum ultricies sit amet id arcu.
Donec pretium magna cursus ante tincidunt porta.
Color
Set the color of each tabs
Options: base(default), brand, alert
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis a sem ut diam interdum ultricies sit amet id arcu.
Donec pretium magna cursus ante tincidunt porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis a sem ut diam interdum ultricies sit amet id arcu.
Donec pretium magna cursus ante tincidunt porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis a sem ut diam interdum ultricies sit amet id arcu.
Donec pretium magna cursus ante tincidunt porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis a sem ut diam interdum ultricies sit amet id arcu.
Donec pretium magna cursus ante tincidunt porta.
Size
Set the size of each button
Options: md(default), sm, lg, xl
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis a sem ut diam interdum ultricies sit amet id arcu.
Donec pretium magna cursus ante tincidunt porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis a sem ut diam interdum ultricies sit amet id arcu.
Donec pretium magna cursus ante tincidunt porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis a sem ut diam interdum ultricies sit amet id arcu.
Donec pretium magna cursus ante tincidunt porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis a sem ut diam interdum ultricies sit amet id arcu.
Donec pretium magna cursus ante tincidunt porta.
RTL
RTL support for tabs
سقط وبلجيكا، أن ولم, يتم غضون الأوروبية عل, أن بين وقرى مكثّفة
ي وبدون الخاسرة الأعمال بعض, عن دول القوى القادة
حتى سعر الجري الرائع قبل بوابة المطورين.
سقط وبلجيكا، أن ولم, يتم غضون الأوروبية عل, أن بين وقرى مكثّفة
ي وبدون الخاسرة الأعمال بعض, عن دول القوى القادة
حتى سعر الجري الرائع قبل بوابة المطورين.
Mix
Mix as many modifiers for each tab
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis a sem ut diam interdum ultricies sit amet id arcu.
Donec pretium magna cursus ante tincidunt porta.
Custom (Tailwind)
If you are using Tailwind styling, you can customize each tabs and its parts with Tailwind utilities
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Ipsum suspendisse ultrices gravida dictum fusce ut. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien et.
Templates
Tabs components is available in the followng templates
-
Corex template
Default corex templates. It provides the global, semantic and components tokens
-
Modex template
Based on Corex default template, it adds dark and light mode option to the tokens
-
Themex template
Based on the Corex default template, it adds theming capabilities as well as light and dark mode options to the tokens.