Tabs

Responsive horizontal navigation tabs, switch between contents with ease

Examples

Base

Show code

HTML

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

        <o-button label="Set Music" @click="activeTab = 2" />
    </o-field>

    <o-tabs v-model="activeTab" 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);

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",
        },
    },
    {
        label: "Music",
        value: 1,
        attrs: {
            icon: "music",
        },
    },
    {
        label: "Articles",
        value: 2,
        attrs: {
            icon: "pen",
        },
    },
    {
        label: "Videos",
        value: 3,
        attrs: {
            icon: "video",
            disabled: true,
        },
    },
];

Vertical

Show code

HTML

<section>
    <o-field grouped group-multiline>
        <o-field label="Position">
            <o-select v-model="position" placeholder="Position">
                <option :value="undefined">Default</option>
                <option value="left">Left</option>
                <option value="right">Right</option>
            </o-select>
        </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-switch v-model="expanded" label="Expanded" />
        </o-field>
    </o-field>

    <o-tabs
        :position="position"
        :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 position = ref<"left" | "right">("left");
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
activateOnFocus	Set the tab active on navigation focus	boolean	-	false
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<unknown>	-
override	Override existing theme classes completely	boolean	-
position	Position of the tabs	"centered" | "left" | "right"	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:model-value	value T - updated modelValue prop	modelValue prop two-way binding
change	value T - new tab value value T - 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
component	Component to be injected.	Component	-
content	Text content, unnecessary when default slot is used	string	-
disabled	Item will be disabled	boolean	-	false
events	Events to be binded to the injected component	{}	-
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	-
props	Props to be binded to the injected component	any	-
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 an uuid	string|number|object	-
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	active boolean - if item is shown
header	Override header label	active boolean - if item is shown

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