Skip to content

Tabs

The Tabs component is a composable set of components to create a tab based navigation.

Examples

js
const toggleTab = (tab_id) => {
    // do something here to toggle the content for selected tab_id
}
html
<TabRoot @tab-root:activeTabChanged="toggleTab">
    <TabItem id="tab-1" activeClass="border-gray-600" :isDefault=true>Tab 1</TabItem>
    <TabItem id="tab-2" activeClass="border-gray-600">Tab 2</TabItem>
    <TabItem id="tab-3" activeClass="border-gray-600">Tab 3</TabItem>
</TabRoot>

<section id="tab-1-section" class="p-4">
    tab 1 content
</section>
<section id="tab-2-section" class="hidden p-4">
    tab 2 content
</section>
<section id="tab-3-section" class="hidden p-4">
    tab 3 content
</section>

An example can be seen in /frontend/views/ComponentsExample.vue

TabRoot

Component Props

PropDescriptionOptions
--

Component Events

EventDescriptionArgs
tab-root:activeTabChangedemits when the active tab state changespasses the active tab id

CSS Classes

ClassDescription
--

TabItem

Component Props

PropDescriptionOptions
isDefaultsets the tab as the default active tab
idthe unique id of the tab. required
activeClassthe name of the css class to apply for active state

Component Events

EventDescriptionArgs
tabItem:clickemits when the tab is clickedpasses the tab id

CSS Classes

ClassDescription
--