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">
        <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);

css

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>

js

css

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>

js

css

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,
    },
];

css

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");

css

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>

js

css

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	Array<string>	[next, prev], [right, left, down, up]	From config: tabs: {   animation: [ "slide-next", "slide-prev", "slide-down", "slide-up", ] }
expanded	Tabs will be expanded (full-width)	boolean	-	false
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" }
v-model		string|number	-	0
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 - updated modelValue prop	modelValue prop two-way binding
change	value string | number - new tab value value string | number - 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)	string|number	-	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

Sass variables

Current theme ➜ Oruga Base

SASS Variable	Default
$tabs-disabled-opacity	$base-disabled-opacity
$tabs-font-size	$base-font-size
$tabs-icon-margin	0.5em
$tabs-content-padding	1rem
$tabs-margin-bottom	1.5rem
$tabs-border-bottom-color	$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	$primary
$tabs-link-active-color	$primary
$tabs-link-line-height	$base-line-height
$tabs-link-padding	0.5em 1em
$tabs-boxed-link-radius	$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-radius	$base-border-radius
$tabs-toggle-link-active-background-color	$primary
$tabs-toggle-link-active-border-color	$primary
$tabs-toggle-link-active-color	$primary-invert

See ➜ 📄 Full scss file

Current theme ➜ Oruga Full

SASS Variable	Default
$tabs-disabled-opacity	$base-disabled-opacity
$tabs-font-size	$base-font-size
$tabs-icon-margin	0.5em
$tabs-content-padding	1rem
$tabs-margin-bottom	1.5rem
$tabs-border-bottom-color	$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	$primary
$tabs-link-active-color	$primary
$tabs-link-line-height	$base-line-height
$tabs-link-padding	0.5em 1em
$tabs-boxed-link-radius	$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-radius	$base-border-radius
$tabs-toggle-link-active-background-color	$primary
$tabs-toggle-link-active-border-color	$primary
$tabs-toggle-link-active-color	$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