Tabs

Responsive horizontal navigation tabs, switch between contents with ease

Examples

Base

Show code

HTML

<section>
    <o-field grouped>
        <o-button label="Set Music" @click="activeTab = 1" />
    </o-field>

    <o-field grouped>
        <o-switch v-model="showBooks" label="Show Books item" />
        <o-switch v-model="multiline" label="Multiline" />
    </o-field>

    <o-tabs v-model="activeTab" :multiline="multiline" destroy-on-hide>
        <o-tab-item :value="0" label="Pictures" icon="image">
            hat light is light, if Silvia be not seen? <br />
            What joy is joy.
        </o-tab-item>

        <o-tab-item :value="1" label="Articles" icon="pen">
            Lorem ipsum dolor sit amet.
        </o-tab-item>

        <o-tab-item :value="2" label="Music" icon="music">
            Lorem <br />
            ipsum <br />
            dolor <br />
            sit <br />
            amet.
        </o-tab-item>

        <o-tab-item
            :value="3"
            :visible="showBooks"
            label="Books"
            icon="book">
            What light is light, if Silvia be not seen? <br />
            What joy is joy, if Silvia be not by— <br />
            Unless it be to think that she is by <br />
            And feed upon the shadow of perfection? <br />
            Except I be by Silvia in the night, <br />
            There is no music in the nightingale.
        </o-tab-item>

        <o-tab-item :value="4" label="Videos" icon="video" disabled>
            Nunc nec velit nec libero vestibulum eleifend. Curabitur
            pulvinar congue luctus. Nullam hendrerit iaculis augue vitae
            ornare. Maecenas vehicula pulvinar tellus, id sodales felis
            lobortis eget.
        </o-tab-item>
    </o-tabs>
</section>

JS

import { ref } from "vue";

const activeTab = ref(0);
const showBooks = ref(false);
const multiline = ref(false);

Types

Show code

HTML

<section>
    <o-field label="Boxed">
        <o-tabs type="boxed">
            <o-tab-item label="Pictures" icon="images" />
            <o-tab-item label="Music" icon="music" />
            <o-tab-item label="Videos" icon="video" />
        </o-tabs>
    </o-field>

    <o-field label="Toggle">
        <o-tabs type="toggle">
            <o-tab-item label="Pictures" icon="images" />
            <o-tab-item label="Music" icon="music" />
            <o-tab-item label="Videos" icon="video" />
        </o-tabs>
    </o-field>
</section>

Position

Show code

HTML

<section>
    <o-tabs type="boxed" position="left">
        <o-tab-item label="Pictures" icon="images" />
        <o-tab-item label="Music" icon="music" />
        <o-tab-item label="Videos" icon="video" />
    </o-tabs>

    <o-tabs type="boxed" position="centered">
        <o-tab-item label="Pictures" icon="images" />
        <o-tab-item label="Music" icon="music" />
        <o-tab-item label="Videos" icon="video" />
    </o-tabs>

    <o-tabs type="boxed" position="right">
        <o-tab-item label="Pictures" icon="images" />
        <o-tab-item label="Music" icon="music" />
        <o-tab-item label="Videos" icon="video" />
    </o-tabs>
</section>

Sizes

Show code

HTML

<section>
    <o-tabs size="small" type="boxed">
        <o-tab-item
            v-for="(tab, i) in tabs"
            :key="i"
            :value="i"
            :label="tab.label"
            :icon="tab.icon"
            :disabled="tab.disabled" />
    </o-tabs>

    <o-tabs size="medium" type="boxed">
        <o-tab-item
            v-for="(tab, i) in tabs"
            :key="i"
            :value="i"
            :label="tab.label"
            :icon="tab.icon"
            :disabled="tab.disabled" />
    </o-tabs>

    <o-tabs size="large" type="boxed">
        <o-tab-item
            v-for="(tab, i) in tabs"
            :key="i"
            :value="i"
            :label="tab.label"
            :icon="tab.icon"
            :disabled="tab.disabled" />
    </o-tabs>
</section>

JS

const tabs = [
    {
        label: "Pictures",
        icon: "image",
        content:
            "What light is light, if Silvia be not seen? <br />What joy is joy.",
    },
    {
        label: "Music",
        icon: "music",
        content: "Lorem <br />ipsum <br />dolor <br />sit <br />amet.",
    },
    {
        label: "Articles",
        icon: "pen",
        content:
            "What light is light, if Silvia be not seen? <br />What joy is joy, if Silvia be not by— <br />Unless it be to think that she is by <br />And feed upon the shadow of perfection? <br />Except I be by Silvia in the night, <br />There is no music in the nightingale.",
    },
    {
        label: "Videos",
        icon: "video",
        content:
            "Nunc nec velit nec libero vestibulum eleifend. Curabitur pulvinar congueluctus. Nullam hendrerit iaculis augue vitae ornare. Maecenas vehiculapulvinar tellus, id sodales felis lobortis eget.",
        disabled: true,
    },
];

Vertical

Show code

HTML

<section>
    <o-field grouped group-multiline>
        <o-field>
            <o-switch v-model="atRight" label="Right position" />
        </o-field>
        <o-field>
            <o-switch v-model="expanded" label="Expanded" />
        </o-field>
        <o-field label="Size">
            <o-select v-model="size" placeholder="Size">
                <option :value="null">Default</option>
                <option value="small">Small</option>
                <option value="medium">Medium</option>
                <option value="large">Large</option>
            </o-select>
        </o-field>
        <o-field label="Type">
            <o-select v-model="type" placeholder="Type">
                <option value="default">Default</option>
                <option value="boxed">Boxed</option>
                <option value="toggle">Toggle</option>
            </o-select>
        </o-field>
    </o-field>

    <o-tabs
        :position="atRight ? 'right' : 'left'"
        :size="size"
        :type="type"
        vertical
        :expanded="expanded">
        <o-tab-item label="Pictures" icon="images">
            Lorem ipsum dolor sit amet. <br />
            Lorem ipsum dolor sit amet. <br />
            Lorem ipsum dolor sit amet. <br />
            Lorem ipsum dolor sit amet. <br />
            Lorem ipsum dolor sit amet. <br />
            Lorem ipsum dolor sit amet.
        </o-tab-item>

        <o-tab-item label="Music" icon="music">
            What light is light, if Silvia be not seen? <br />
            What joy is joy, if Silvia be not by— <br />
            Unless it be to think that she is by <br />
            And feed upon the shadow of perfection? <br />
            Except I be by Silvia in the night, <br />
            There is no music in the nightingale.
        </o-tab-item>

        <o-tab-item label="Videos" icon="video" disabled>
            Nunc nec velit nec libero vestibulum eleifend. Curabitur
            pulvinar congue luctus. Nullam hendrerit iaculis augue vitae
            ornare. Maecenas vehicula pulvinar tellus, id sodales felis
            lobortis eget.
        </o-tab-item>
    </o-tabs>
</section>

JS

import { ref } from "vue";

const expanded = ref(false);
const atRight = ref(false);
const size = ref(null);
const type = ref("default");

Custom header

Show code

HTML

<section>
    <o-tabs type="boxed">
        <o-tab-item>
            <template #header>
                <o-icon icon="info-circle" root-class="custom-icon" />
                <span> Issues 3 </span>
            </template>
        </o-tab-item>

        <o-tab-item>
            <template #header>
                <o-icon icon="retweet" root-class="custom-icon" />
                <span> Pull Requests {{ count }} </span>
            </template>
        </o-tab-item>
    </o-tabs>
</section>

JS

import { ref, onMounted } from "vue";

const count = ref(1);

onMounted(() => {
    setTimeout(() => {
        count.value++;
    }, 3000);
});

SCSS

.custom-icon {
    margin-right: 5px;
}

Long header

Show code

HTML

<section>
    <o-tabs type="boxed">
        <o-tab-item
            v-for="(item, index) in new Array(45)"
            :key="`longitem-${index}`">
            <template #header>
                <span>Head {{ index }}</span>
            </template>
        </o-tab-item>
    </o-tabs>
</section>

Class props

'Classes applied to the element'

Tabs component

Responsive horizontal navigation tabs, switch between contents with ease

<o-tabs></o-tabs>

Props

Prop name	Description	Type	Values	Default
animateInitially	Apply animation on the initial render	boolean	-	From config: tabs: {   animateInitially: false }
animated	Tab will have an animation	boolean	-	From config: tabs: {   animated: true }
animation	Transition animation name	string[]	[next, prev], [right, left, down, up]	From config: tabs: {   animation: [ "slide-next", "slide-prev", "slide-down", "slide-up",] }
destroyOnHide	Destroy tabItem on hide	boolean	-	false
expanded	Tabs will be expanded (full-width)	boolean	-	false
v-model	The selected item value	string|number|object	-	0
multiline	Show tab items multiline when there is no space	boolean	-	false
override	Override existing theme classes completely	boolean	-
position	Position of the tabs	string	left, centered, right
size	Tab size	string	small, medium, large	From config: tabs: {   size: undefined }
type	Tab type	string	boxed, toggle	From config: tabs: {   type: "default" }
variant	Color of the control	string	primary, info, success, warning, danger, and any other custom color	From config: tabs: {   variant: undefined }
vertical	Show tab in vertical layout	boolean	-	From config: tabs: {   vertical: false }

Events

Event name	Properties	Description
update:modelValue	value string | number | object - updated modelValue prop	modelValue prop two-way binding
change	value string | number | object - new tab value value string | number | object - old tab value	on tab change event

Slots

Name	Description	Bindings
start	Additional slot before tabs
end	Additional slot after tabs
default	Place tab items here

TabItem component

<o-tab-item></o-tab-item>

Props

Prop name	Description	Type	Values	Default
ariaRole	Role attribute to be passed to the div wrapper for better accessibility.	string	-	From config: tabs: {   ariaRole: "tab" }
disabled	Item will be disabled	boolean	-	false
icon	Icon on the left	string	-	From config: tabs: {   icon: undefined }
iconPack	Icon pack	string	-	From config: tabs: {   iconPack: undefined }
label	Item label	string	-
override	Override existing theme classes completely	boolean	-
tag	Tabs item tag name	DynamicComponent	-	From config: tabs: {   itemTag: "button" }
value	Item value (it will be used as v-model of wrapper component) - default is a uuid	string|number|object	-	Default function (see source code)
visible	Show/hide item	boolean	-	true

Events

Event name	Properties	Description
activate		on tab item activate event
deactivate		on tab item deactivate event

Slots

Name	Description	Bindings
default	Tab item content
header	Override header label

Sass variables

Current theme ➜ Oruga

SASS Variable	Default
$tabs-disabled-opacity	var(--#{$prefix}base-disabled-opacity)
$tabs-font-size	var(--#{$prefix}base-font-size)
$tabs-icon-margin	0.5em
$tabs-content-padding	1rem
$tabs-margin-bottom	1.5rem
$tabs-border-bottom-color	var(--#{$prefix}grey-lighter)
$tabs-border-bottom-style	solid
$tabs-border-bottom-width	1px
$tabs-link-color	hsl(0, 0%, 29%)
$tabs-link-active-border-bottom-color	var(--#{$prefix}primary)
$tabs-link-active-color	var(--#{$prefix}primary)
$tabs-link-line-height	var(--#{$prefix}base-line-height)
$tabs-link-padding	0.5em 1em
$tabs-boxed-link-radius	var(--#{$prefix}base-border-radius)
$tabs-boxed-link-hover-background-color	hsl(0, 0%, 96%)
$tabs-boxed-link-hover-border-bottom-color	hsl(0, 0%, 86%)
$tabs-boxed-link-active-background-color	hsl(0, 0%, 100%)
$tabs-boxed-link-active-border-color	hsl(0, 0%, 86%)
$tabs-boxed-link-active-border-bottom-color	transparent
$tabs-toggle-link-border-color	hsl(0, 0%, 86%)
$tabs-toggle-link-border-style	solid
$tabs-toggle-link-border-width	1px
$tabs-toggle-link-hover-background-color	hsl(0, 0%, 96%)
$tabs-toggle-link-hover-border-color	hsl(0, 0%, 71%)
$tabs-toggle-link-active-background-color	var(--#{$prefix}primary)
$tabs-toggle-link-active-border-color	var(--#{$prefix}primary)
$tabs-toggle-link-active-color	var(--#{$prefix}primary-invert)

See ➜ 📄 Full scss file

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

SASS Variable	Default
$nav-tabs-color	var(--#{$prefix}body-color)
$nav-tabs-spacer	$spacer
$nav-tabs-disabled-opacity	0.5
$nav-underline-link-active-bg	$nav-tabs-link-active-bg
$nav-underline-link-active-border-color	currentcolor

See ➜ 📄 Full scss file