Tabs

Responsive horizontal navigation tabs, switch between contents with ease

Base

Show Books item Multiline

Lorem ipsum dolor sit amet.

Lorem
ipsum
dolor
sit
amet.

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.

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.

Show code

<template>
  <section>
    <o-button @click="activeTab = 1">Set Music</o-button>
    <br /> <br />
    <o-switch v-model="showBooks"> Show Books item </o-switch>
    <o-switch v-model="multiline"> Multiline </o-switch>

    <o-tabs v-model="activeTab" :multiline="multiline">
      <o-tab-item :value="0" label="Pictures">
        Lorem ipsum dolor sit amet.
      </o-tab-item>

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

      <o-tab-item :value="2" :visible="showBooks" label="Books">
        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="3" 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>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
    setup() {
        const activeTab = ref(0)
        const showBooks = ref(false)
        const multiline = ref(false)
        return { activeTab, showBooks, multiline }
    }
})
</script>

Custom header

Show code

<template>
  <o-tabs type="boxed">
    <o-tab-item>
      <template #header>
        <o-icon icon="info-circle" rootClass="custom-icon"></o-icon>
        <span> Issues 3 </span>
      </template>
    </o-tab-item>
    <o-tab-item>
      <template #header>
        <o-icon icon="retweet" rootClass="custom-icon"></o-icon>
        <span> Pull Requests {{ count }} </span>
      </template>
    </o-tab-item>
  </o-tabs>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'

export default defineComponent({
    setup() {
        const count = ref(1)
        onMounted(() => {
            setTimeout(() => {
                count.value++;
            }, 3 * 1000);
        })
        return { count }
    }
})
</script>

<style>
.custom-icon {
  margin-right: 5px;
}
</style>

Long header

Show code

<template>
  <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>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
    setup() {
        const expanded = ref(false)
        const atRight = ref(false)
        const size = ref(null)
        const type = ref('default')
        return { expanded, atRight, size, type }
    }
})
</script>

Vertical

Right position

Expanded

Size

Type

Show code

<template>
  <section>
    <o-field grouped group-multiline>
      <div class="control">
        <o-switch v-model="atRight"> Right position </o-switch>
      </div>
      <div class="control">
        <o-switch v-model="expanded"> Expanded </o-switch>
      </div>
      <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' : ''"
      :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>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
    setup() {
        const expanded = ref(false)
        const atRight = ref(false)
        const size = ref(null)
        const type = ref('default')
        return { expanded, atRight, size, type }
    }
})
</script>

Types

Show code

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

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

Position

Show code

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

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

Class props

Lorem ipsum dolor sit amet.

Lorem
ipsum
dolor
sit
amet.

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.

How does Class props inspector work?

Class prop	Description	Props	Suffixes
contentClass	Class of the tab content.
expandedClass	Class of Tabs component when expanded.	`expanded`
▷ itemClass	Class of the tab item.
▷ itemHeaderActiveClass	Class of the tab item header when active.		`default boxed toggle`
▷ itemHeaderClass	Class of the tab item header. 🔍 Classes applied have a higher specificity than expected when verticalClass* or expandedClass or positionClass is applied*
▷ itemHeaderDisabledClass	Class of the tab item header when disabled.		`default boxed toggle`
▷ itemHeaderIconClass	Class of the tab item header icon.
▷ itemHeaderTextClass	Class of the tab item header text.
▷ itemHeaderTypeClass	Class of the tab item header type.		`default boxed toggle`
multilineClass	Class of Tabs component when multiline.	`multiline`
navPositionClass	Class of the Tabs component nav position.	`position`	`bottom left right`
navSizeClass	Size of the navigation.	`size`	`small medium large`
navTabsClass	Class of the Tabs component nav tabs. 🔍 Classes applied have a higher specificity than expected when positionClass* is applied*
navTypeClass	Type of the navigation.	`type`	`default boxed toggle`
positionClass	Class of Tabs component when when is vertical and its position changes.	`position vertical`	`bottom left right`
rootClass	Root class of the element.
tabItemWrapperClass	Class of the tab item wrapper. 🔍 Classes applied have a higher specificity than expected when expandedClass* is applied*
verticalClass	Class of Tabs component when vertical.	`vertical`

Props

Prop name	Description	Type	Values	Default
animated	Tab will have an animation	boolean	-	From config `tabs: { animated: true }`
expanded	Tabs will be expanded (full-width)	boolean	-
multiline	Show tab items multiline when there is no space	boolean	-
override		boolean	-
type	Tab type	string	`boxed`, `toggle`	'default'

Slots

Name	Description	Bindings
start
end
default

Tab Item

Props

Prop name	Description	Type	Values	Default
disabled	Item will be disabled	boolean	-
override		boolean	-
tag	Tabs item tag name	string	-	From config `tabs: { itemTag: 'button' }`

Style

📄 Full scss file

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

Tabs #

Base

Custom header

Long header

Vertical

Types

Position

Class props #

Class prop

Description

Props

Suffixes

Props #

Slots #

Tab Item #

Props #

Style #

Tabs

Class props

Props

Slots

Tab Item

Props

Style