Tabs

The Tabs component is a responsive horizontal navigation bar that allows the user to easily switch between content. Tab panelsare a set of individual content sections, where only one content panel can be displayed at a time. Each tab panel has an associated tab element that, when activated, displays the panel. The list of tab elements is arranged along one edge of the currently displayed panel, the top edge. The component implements the W3C ARIA APG Tabs Pattern.

Examples

Base

Each item component can have a value prop. The active tab is represented by the value of the item as the modelValue prop of the tabs component.

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

The tabs header can be displayed in different styles using the type prop.

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

The tabs header can be positioned by the position prop.

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

When the expanded prop is set, the tabs header will be occupy the full with it can have.

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

The component can be displayed in different sizes using the size prop.

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

Adding the vertical prop displays the component vertically instead of horizontally.

Show code

HTML

<section>
    <o-field grouped 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

The individual tab label can be customised using the header slot.

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

The multiple prop allows to break the tab header to be broken into multiple lines if there are too many tabs for one line.

Show code

HTML

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

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",] }
ariaLabel	Accessibility aria-label to be passed to the tablist wrapper element	string	-	From config: tabs: {   ariaLabel: undefined }
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 }
tag	Tablist tag name	DynamicComponent	-	From config: tabs: {   tag: "div" }
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
before	Additional slot before tabs
after	Additional slot after tabs
default	Place tab items here

TabItem component

An tab item used by the tabs 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	Override tab panel content	active boolean - if item is shown
header	Override tab header label	active boolean - if item is shown

Class Inspector

Classes applied to the element:

How does the Class props inspector work?

Class props inspector is useful to see class props you want to use to customize Oruga components and how they change a component. You can click on Inspect button to find the exact element where a specific class prop acts.

In the Class props inspector there are other columns:

Class prop

This column contains the name of the Class prop you want to inspect.
If you find a name with a link ( ▷ classPropName) this refers to a subitem (e.g. Dropdown Item in Dropdown).

Description

This column contains the description of the Class prop you want to inspect.
👉 This icon indicates some warning, e.g. this Class prop is visible only on mobile.

Props

This column contains a list of props that activate the class, e.g. if a class prop contains disabled prop it means that only when the component has disabled prop.

Suffixes

This column contains all the possible suffixes that you'll receive if you use a function to customize your Class prop.

Class prop	Description	Props	Suffixes
rootClass	Class of the root element.
positionClass	Class of the root element with position.	position	bottom left right
sizeClass	Class of the root element with size.	size	small medium large
typeClass	Class of the root element with type.	type	default boxed toggle pills
expandedClass	Class of the root element when expanded.	expanded
verticalClass	Class of the root element when vertical.	vertical
multilineClass	Class of the root element when multilined.	multiline
listClass	Class of the list container element.
contentClass	Class of the panel container element.
transitioningClass	Class of the panel container element when transitioning.
▷ tabClass	Class of the tab item element.
▷ tabActiveClass	Class of the tab item element when active.
▷ tabPreviousClass	Class of the tab item element before the active one.
▷ tabNextClass	Class of the tab item element after the active one.
▷ tabDisabledClass	Class of the tab item element when disabled.	disabled
▷ tabIconClass	Class of the tab item icon element.	icon
▷ tabLabelClass	Class of the tab item label element.	label
▷ tabPanelClass	Class of the tab panel element.

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 0.5em 0 0
$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-tab-color	hsl(0, 0%, 29%)
$tabs-tab-active-border-bottom-color	var(--#{$prefix}primary)
$tabs-tab-active-color	var(--#{$prefix}primary)
$tabs-tab-padding	0.5em 1em
$tabs-boxed-tab-radius	var(--#{$prefix}base-border-radius)
$tabs-boxed-tab-hover-background-color	hsl(0, 0%, 96%)
$tabs-boxed-tab-hover-border-bottom-color	hsl(0, 0%, 86%)
$tabs-boxed-tab-active-background-color	hsl(0, 0%, 100%)
$tabs-boxed-tab-active-border-color	hsl(0, 0%, 86%)
$tabs-boxed-tab-active-border-bottom-color	transparent
$tabs-toggle-tab-border-color	hsl(0, 0%, 86%)
$tabs-toggle-tab-border-style	solid
$tabs-toggle-tab-border-width	1px
$tabs-toggle-tab-hover-background-color	hsl(0, 0%, 96%)
$tabs-toggle-tab-hover-border-color	hsl(0, 0%, 71%)
$tabs-toggle-tab-active-background-color	var(--#{$prefix}primary)
$tabs-toggle-tab-active-border-color	var(--#{$prefix}primary)
$tabs-toggle-tab-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