Documentation
Documentation Hub

Start tabs

Tabs can have different alignments. Use the justify prop to display tabs aligned to the left, center or right.

TeamProjects

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid iudicant sensus? Primum quid tu dicis breve? Etiam beatissimum? Ne discipulum abducam, times.

Show code
vue

Center tabs

Tabs can have different alignments. Use the justify prop to display tabs aligned to the left, center or right.

TeamProjects

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid iudicant sensus? Primum quid tu dicis breve? Etiam beatissimum? Ne discipulum abducam, times.

Show code
vue

End tabs

Tabs can have different alignments. Use the justify prop to display tabs aligned to the left, center or right.

TeamProjectsTasks

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid iudicant sensus? Primum quid tu dicis breve? Etiam beatissimum? Ne discipulum abducam, times.

Show code
vue

Icon tabs

Tabs can have icons. Use the icon prop to display an icon inside the tab element.

TeamProjectsTasks

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid iudicant sensus? Primum quid tu dicis breve? Etiam beatissimum? Ne discipulum abducam, times.

Show code
vue

Boxed tabs

Tabs can be displayed in a boxed style. Use the type prop to display the tabs in a boxed style.

TeamProjectsTasks

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid iudicant sensus? Primum quid tu dicis breve? Etiam beatissimum? Ne discipulum abducam, times.

Show code
vue

Boxed icons

Tabs can have icons. Use the icon prop to display an icon inside the tab element.

TeamProjectsTasks

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid iudicant sensus? Primum quid tu dicis breve? Etiam beatissimum? Ne discipulum abducam, times.

Show code
vue

#<BaseTabs>

•Model

v-model
Show example
vue

•Properties

tabs
An array of tab objects that contain a label and value
Required
Show example
vue
classes
Optional CSS classes to apply to the component inner elements.
Show example
vue
hide-label
Whether or not to hide the label for the tab.
Show example
vue

•Properties (with app.config)

color
Defines the hover color of the active tab

@since

3.0.0

Show example
vue
type
The type of tabs to display..
Show example
vue
justify
The horizontal alignment of the tabs.
Show example
vue

•Slots

#icon
Show example
vue
#tab
Show example
vue

•Exposed

color
Defines the hover color of the active tab
Show example
vue
type
The type of tabs to display..
Show example
vue
justify
The horizontal alignment of the tabs.
Show example
vue