Appearance
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
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 |
---|---|
-- |