# Tabs

Responsive horizontal navigation tabs, switch between contents with ease

edit on github

# Examples

# Base

# Custom header

# Vertical

# Types

# Position

# Props

Prop name Description Type Values Default
v-model string|number - undefined
variant Color of the control, optional string|object primary, info, success, warning, danger, and any other custom color
size Tab size, optional string small, medium, large
animated Tab will have an animation boolean - Config -> 'tabs.animated': true
vertical Show tab in vertical layout boolean - false
position Position of the tab, optional string centered, right
destroyOnHide Destroy tab on hide boolean - false
type Tab type string|object boxed, toggle
expanded Tabs will be expanded (full-width) boolean -
multiline Show tab items multiline when there is no space boolean -
rootClass string -
positionWrapperClass string -
expandedWrapperClass string -
verticalWrapperClass string -
multilineWrapperClass string -
tabsClass string -
typeClass string -
sizeClass string -
positionClass string -
contentClass string -
transitioningClass string -
tabItemHeaderActiveClass string -
tabItemHeaderDisabledClass string -

# Events

Event name Type Description
input undefined

# Slots

Name Description Bindings

# Tab Item

# Props

Prop name Description Type Values Default
label Item label string -
icon Icon on the left string -
iconPack Icon pack string -
visible Show/hide item boolean - true
value Item value (it will be used as v-model of wrapper component) string - function() { return this._uid.toString() }
headerClass Header class of the item string|array|object - null
disabled Item will be disabled boolean -
itemClass string -
itemHeaderActiveClass string -
itemHeaderDisabledClass string -

# Slots

Name Description Bindings

# Style

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 #dbdbdb
--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-hover-border-bottom-color $tabs-link-hover-border-bottom-color hsl(0, 0%, 21%)
--oruga-tabs-link-hover-color $tabs-link-hover-color hsl(0, 0%, 21%)
--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