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/Tabs">
        <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>

    <o-field label="Pills">
        <o-tabs type="pills">
            <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>

Expanded

Show code

HTML

<section>
    <o-tabs expanded>
        <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" :options="options" />

    <o-tabs size="medium" type="boxed" :options="options" />

    <o-tabs size="large" type="boxed" :options="options" />
</section>

JS

import type { OptionsProp } from "@oruga-ui/oruga-next";

const options: OptionsProp = [
    {
        label: "Pictures",
        value: 0,
        attrs: {
            icon: "image",
            content:
                "What light is light, if Silvia be not seen? What joy is joy.",
        },
    },
    {
        label: "Music",
        value: 1,
        attrs: {
            icon: "music",
            content: "Lorem ipsum dolor sit amet.",
        },
    },
    {
        label: "Articles",
        value: 2,
        attrs: {
            icon: "pen",
            content:
                "What light is light, if Silvia be not seen? What joy is joy, if Silvia be not by— Unless it be to think that she is by And feed upon the shadow of perfection? Except I be by Silvia in the night, There is no music in the nightingale.",
        },
    },
    {
        label: "Videos",
        value: 3,
        attrs: {
            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="undefined">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 atRight = ref(false);
const expanded = ref(false);
const size = ref();
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, string] | [string, string, string, 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, use v-model to make it two-way binding	string|number|object	-
multiline	Show tab items multiline when there is no space	boolean	-	false
options	Tabs options, unnecessary when default slot is used	OptionsProp<string | number | object>	-
override	Override existing theme classes completely	boolean	-
position	Position of the tabs	"left" | "right" | "centered"	left, centered, right
size	Tab size	string	small, medium, large	From config: tabs: {   size: undefined }
type	Tab type	string	default, boxed, toggle, pills	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			-	From config: tabs: {   ariaRole: "tabpanel" }
component			-
content			-
disabled			-	false
events			-
icon			-	From config: tabs: {   icon: undefined }
iconPack			-	From config: tabs: {   iconPack: undefined }
label			-
override			-
props			-
tag			-	From config: tabs: {   itemTag: "button" }
value			-
visible			-	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

SASS Variable	Default
$tabs-focused-outline	none
$tabs-link-focus-border-bottom-color	css.getVar( "tabs-link-hover-border-bottom-color")
$tabs-link-focus-active-border-bottom-color	css.getVar( "tabs-link-active-border-bottom-color")
$tabs-boxed-link-focus-active-background-color	css.getVar( "tabs-boxed-link-active-background-color")
$tabs-boxed-link-focus-background-color	css.getVar( "tabs-boxed-link-hover-background-color")
$tabs-boxed-link-focus-active-border-bottom-color	css.getVar( "tabs-boxed-link-active-border-bottom-color")
$tabs-boxed-link-focus-border-bottom-color	css.getVar( "tabs-boxed-link-hover-border-bottom-color")
$tabs-toggle-link-focus-active-background-color	css.getVar( "tabs-toggle-link-active-background-color")
$tabs-toggle-link-focus-background-color	css.getVar( "tabs-toggle-link-hover-background-color")
$tabs-toggle-link-focus-active-border-color	css.getVar( "tabs-toggle-link-active-border-color")
$tabs-toggle-link-focus-border-color	css.getVar( "tabs-toggle-link-hover-border-color")

See ➜ 📄 Full scss file

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