BaseTabs

Start tabs

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

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

Show code

Center tabs

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

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

Show code

End tabs

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

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

Show code

Icon tabs

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

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

Show code

Boxed tabs

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

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

Show code

Boxed icons

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

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

Show code
v-model
The value of the currently selected tab. This should match the value of one of the tabs in the tabs array.
Show example
tabs
An array of tab objects that contain a label and value
Required
Show example
type
The type of tabs to display. Can be either "tabs" or "box".
Show example
justify
The horizontal alignment of the tabs. Can be "start", "center", or "end".
Show example
boxed
Whether or not to display the tabs as boxes.
Show example
hide-label
Whether or not to hide the label for the tab.
Show example
#tab
Show example