Tabs

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

Examples

const toggleTab = (tab_id) => {
    // do something here to toggle the content for selected tab_id
}

<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

Prop	Description	Options
--

Component Events

Event	Description	Args
tab-root:activeTabChanged	emits when the active tab state changes	passes the active tab id

CSS Classes

Class	Description
--

TabItem

Component Props

Prop	Description	Options
isDefault	sets the tab as the default active tab
id	the unique id of the tab. required
activeClass	the name of the css class to apply for active state

Component Events

Event	Description	Args
tabItem:click	emits when the tab is clicked	passes the tab id

CSS Classes

Class	Description
--