Skip to content

Tabs

Responsive horizontal navigation tabs, switch between contents with ease

Examples

Base

Show code

Types

Show code

Position

Show code

Sizes

Show code

Vertical

Show code

Custom header

Show code

Long header

Show code

Class props

'Classes applied to the element'

Tabs component

Responsive horizontal navigation tabs, switch between contents with ease

html
<o-tabs></o-tabs>

Props

Prop nameDescriptionTypeValuesDefault
animateInitiallyApply animation on the initial renderboolean-
From config:
tabs: {
  animateInitially: false
}
animatedTab will have an animationboolean-
From config:
tabs: {
  animated: true
}
animationTransition animation nameArray<string>[next, prev], [right, left, down, up]
From config:
tabs: {
  animation: [ "slide-next", "slide-prev", "slide-down", "slide-up", ]
}
destroyOnHideDestroy tabItem on hideboolean-false
expandedTabs will be expanded (full-width)boolean-false
multilineShow tab items multiline when there is no spaceboolean-false
overrideOverride existing theme classes completelyboolean-
positionPosition of the tabsstringleft, centered, right
sizeTab sizestringsmall, medium, large
From config:
tabs: {
  size: undefined
}
typeTab typestringboxed, toggle
From config:
tabs: {
  type: "default"
}
v-modelstring|number-0
variantColor of the controlstringprimary, info, success, warning, danger, and any other custom color
From config:
tabs: {
  variant: undefined
}
verticalShow tab in vertical layoutboolean-
From config:
tabs: {
  vertical: false
}

Events

Event namePropertiesDescription
update:modelValuevalue string | number - updated modelValue propmodelValue prop two-way binding
changevalue string | number - new tab value
value string | number - old tab value
on tab change event

Slots

NameDescriptionBindings
startAdditional slot before tabs
endAdditional slot after tabs
defaultPlace tab items here

TabItem component

html
<o-tab-item></o-tab-item>

Props

Prop nameDescriptionTypeValuesDefault
ariaRoleRole attribute to be passed to the div wrapper for better accessibility.string-
From config:
tabs: {
  ariaRole: "tab"
}
disabledItem will be disabledboolean-false
iconIcon on the leftstring-
From config:
tabs: {
  icon: undefined
}
iconPackIcon packstring-
From config:
tabs: {
  iconPack: undefined
}
labelItem labelstring-
overrideOverride existing theme classes completelyboolean-
tagTabs item tag nameDynamicComponent-
From config:
tabs: {
  itemTag: "button"
}
valueItem value (it will be used as v-model of wrapper component)string|number-Default function (see source code)
visibleShow/hide itemboolean-true

Events

Event namePropertiesDescription
activateon tab item activate event
deactivateon tab item deactivate event

Slots

NameDescriptionBindings
defaultTab item content

Sass variables

Current theme ➜ Oruga Base

SASS VariableDefault
$tabs-disabled-opacity$base-disabled-opacity
$tabs-font-size$base-font-size
$tabs-icon-margin0.5em
$tabs-content-padding1rem
$tabs-margin-bottom1.5rem
$tabs-border-bottom-color$grey-lighter
$tabs-border-bottom-stylesolid
$tabs-border-bottom-width1px
$tabs-link-colorhsl(0, 0%, 29%)
$tabs-link-active-border-bottom-color$primary
$tabs-link-active-color$primary
$tabs-link-line-height$base-line-height
$tabs-link-padding0.5em 1em
$tabs-boxed-link-radius$base-border-radius
$tabs-boxed-link-hover-background-colorhsl(0, 0%, 96%)
$tabs-boxed-link-hover-border-bottom-colorhsl(0, 0%, 86%)
$tabs-boxed-link-active-background-colorhsl(0, 0%, 100%)
$tabs-boxed-link-active-border-colorhsl(0, 0%, 86%)
$tabs-boxed-link-active-border-bottom-colortransparent
$tabs-toggle-link-border-colorhsl(0, 0%, 86%)
$tabs-toggle-link-border-stylesolid
$tabs-toggle-link-border-width1px
$tabs-toggle-link-hover-background-colorhsl(0, 0%, 96%)
$tabs-toggle-link-hover-border-colorhsl(0, 0%, 71%)
$tabs-toggle-link-radius$base-border-radius
$tabs-toggle-link-active-background-color$primary
$tabs-toggle-link-active-border-color$primary
$tabs-toggle-link-active-color$primary-invert

See ➜ 📄 Full scss file

Current theme ➜ Oruga Full

SASS VariableDefault
$tabs-disabled-opacity$base-disabled-opacity
$tabs-font-size$base-font-size
$tabs-icon-margin0.5em
$tabs-content-padding1rem
$tabs-margin-bottom1.5rem
$tabs-border-bottom-color$grey-lighter
$tabs-border-bottom-stylesolid
$tabs-border-bottom-width1px
$tabs-link-colorhsl(0, 0%, 29%)
$tabs-link-active-border-bottom-color$primary
$tabs-link-active-color$primary
$tabs-link-line-height$base-line-height
$tabs-link-padding0.5em 1em
$tabs-boxed-link-radius$base-border-radius
$tabs-boxed-link-hover-background-colorhsl(0, 0%, 96%)
$tabs-boxed-link-hover-border-bottom-colorhsl(0, 0%, 86%)
$tabs-boxed-link-active-background-colorhsl(0, 0%, 100%)
$tabs-boxed-link-active-border-colorhsl(0, 0%, 86%)
$tabs-boxed-link-active-border-bottom-colortransparent
$tabs-toggle-link-border-colorhsl(0, 0%, 86%)
$tabs-toggle-link-border-stylesolid
$tabs-toggle-link-border-width1px
$tabs-toggle-link-hover-background-colorhsl(0, 0%, 96%)
$tabs-toggle-link-hover-border-colorhsl(0, 0%, 71%)
$tabs-toggle-link-radius$base-border-radius
$tabs-toggle-link-active-background-color$primary
$tabs-toggle-link-active-border-color$primary
$tabs-toggle-link-active-color$primary-invert

See ➜ 📄 Full scss file

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

SASS VariableDefault
$nav-tabs-colorvar(--#{$prefix}body-color)
$nav-tabs-spacer$spacer
$nav-tabs-disabled-opacity0.5
$nav-underline-link-active-bg$nav-tabs-link-active-bg
$nav-underline-link-active-border-colorcurrentcolor

See ➜ 📄 Full scss file

Released under the MIT License.