Theme ➜ Oruga Full
Tabs
Responsive horizontal navigation tabs, switch between contents with ease
Examples
Base
hat light is light, if Silvia be not seen?
What joy is joy.
What joy is joy.
Show code
Types
Show code
Position
Show code
Sizes
Show code
Vertical
Show code
Custom header
Show code
Long header
Show code
Class props
Lorem ipsum dolor sit amet.
| 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 | ||
| ▷ 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. | disabled | default | |
| ▷ itemHeaderIconClass | Class of the tab item header icon. | icon | ||
| ▷ itemHeaderTextClass | Class of the tab item header text. | |||
| ▷ itemHeaderTypeClass | Class of the tab item header type. | type | default | |
| itemWrapperClass | Class of the tab item wrapper. 🔍 Classes applied have a higher specificity than expected when expandedClass is applied | |||
| multilineClass | Class of Tabs component when multiline. | multiline | ||
| navPositionClass | Class of the Tabs component nav position. | position | bottom | |
| navSizeClass | Size of the navigation. | size | small | |
| 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 | |
| positionClass | Class of Tabs component when when is vertical and its position changes. | position | bottom | |
| rootClass | Root class of the element. | |||
| transitioningClass | Class of the tab content when transitioning. | |||
| verticalClass | Class of Tabs component when vertical. | vertical |
Tabs component
Responsive horizontal navigation tabs, switch between contents with ease
html
<o-tabs></o-tabs>Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| animateInitially | Apply animation on the initial render | boolean | - | From config: tabs: { |
| animated | Tab will have an animation | boolean | - | From config: tabs: { |
| animation | Transition animation name | Array<string> | [next, prev], [right, left, down, up] | From config: tabs: { |
| destroyOnHide | Destroy tabItem on hide | boolean | - | false |
| expanded | Tabs will be expanded (full-width) | boolean | - | false |
| multiline | Show tab items multiline when there is no space | boolean | - | false |
| override | Override existing theme classes completely | boolean | - | |
| position | Position of the tabs | string | left, centered, right | |
| size | Tab size | string | small, medium, large | From config: tabs: { |
| type | Tab type | string | boxed, toggle | From config: tabs: { |
| v-model | string|number | - | 0 | |
| variant | Color of the control | string | primary, info, success, warning, danger, and any other custom color | From config: tabs: { |
| vertical | Show tab in vertical layout | boolean | - | From config: tabs: { |
Events
| Event name | Properties | Description |
|---|---|---|
| update:modelValue | value string | number - updated modelValue prop | modelValue prop two-way binding |
| change | value string | number - new tab valuevalue string | number - 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
html
<o-tab-item></o-tab-item>Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| ariaRole | Role attribute to be passed to the div wrapper for better accessibility. | string | - | From config: tabs: { |
| disabled | Item will be disabled | boolean | - | false |
| icon | Icon on the left | string | - | From config: tabs: { |
| iconPack | Icon pack | string | - | From config: tabs: { |
| label | Item label | string | - | |
| override | Override existing theme classes completely | boolean | - | |
| tag | Tabs item tag name | DynamicComponent | - | From config: tabs: { |
| value | Item value (it will be used as v-model of wrapper component) | string|number | - | Default function (see source code) |
| 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 |
Sass variables
Current theme ➜ Oruga Base
| SASS Variable | Default |
|---|---|
| $tabs-disabled-opacity | $base-disabled-opacity |
| $tabs-font-size | $base-font-size |
| $tabs-icon-margin | 0.5em |
| $tabs-content-padding | 1rem |
| $tabs-margin-bottom | 1.5rem |
| $tabs-border-bottom-color | $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 | $primary |
| $tabs-link-active-color | $primary |
| $tabs-link-line-height | $base-line-height |
| $tabs-link-padding | 0.5em 1em |
| $tabs-boxed-link-radius | $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-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 Variable | Default |
|---|---|
| $tabs-disabled-opacity | $base-disabled-opacity |
| $tabs-font-size | $base-font-size |
| $tabs-icon-margin | 0.5em |
| $tabs-content-padding | 1rem |
| $tabs-margin-bottom | 1.5rem |
| $tabs-border-bottom-color | $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 | $primary |
| $tabs-link-active-color | $primary |
| $tabs-link-line-height | $base-line-height |
| $tabs-link-padding | 0.5em 1em |
| $tabs-boxed-link-radius | $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-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 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