Documentation

Rounded:none

Slider tabs can have different radius factors. Use the rounded prop to change the radius of the tab items.

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

Rounded:sm

Slider tabs can have rounded corners. Use the shape prop to display a rounded slider.

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

Rounded:md

Slider tabs can have curved corners. Use the shape prop to display a curved slider.

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

Rounded:lg

Slider tabs can have curved corners. Use the shape prop to display a curved slider.

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

Rounded:full

Slider tabs can have full corners. Use the shape prop to display a full slider.

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

Size:sm

Slider tabs can be made smaller using the size prop.

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
v-model
Show example
vue
tabs
An array of objects representing each tab. Each object should have a 'label' and a 'value' property.
Required
Show example
vue
classes
Optional CSS classes to apply to the component inner elements.
Show example
vue
color
Defines the color of the active tab

@since

3.0.0

Show example
vue
rounded
Controls the radius of the tabs.
Show example
vue
size
The size of the tabs.
Show example
vue
justify
Controls the alignment of the tabs. Can be 'start', 'center', or 'end'.
Show example
vue
#default
Show example
vue
color
Defines the color of the active tab
Show example
vue
rounded
Controls the radius of the tabs.
Show example
vue
size
The size of the tabs.
Show example
vue
justify
Controls the alignment of the tabs. Can be 'start', 'center', or 'end'.
Show example
vue