# Tabs

Tabs are very easy to implement

# Default

To implement a tabs, use the vs-tabs component. It must include vs-tab child components that represent each tab.

TIP

For the title of each tab the vs-tab property is implemented in thevs-tab component.

Home

# Color

You can change the color of the component with the property color, the parameter allows the main colors and HEX or RGB

WARNING

Only RGB and HEX colors are supported.

Success

# Alignments

Change the alignment of the buttons with the property alignments. The allowed values ​​are:

  • center
  • right
  • fixed

Default

Center

Right

Fixed

# Position

You can change the position of the menu with the property position that as a value you can have: top, right,bottom, left.

Home

# Icons

You can add a left icon inside each tab with the property icon that has the same values as the icon component.

API #

Name Type Parameters Description default
vs-tabs Component Component that contains the children vs-tab.
v-model bind Link active tab index.
value Number, String Index of active tab. 0
position String top, left, bottom, right Tabs menu position.
color String RGB, HEX Color of the tabs component.
alignment String left (default), right, center, fixed Change the alignment of the tabs buttons. top
vs-tab Component component that wraps everything inside.
label String Text on the tab button.
icon String Same as `vs-icon` component. Add a left icon inside the tabs component.
v-on:click-tag Callback tab This function is executed by clicking on the tag.
tag Icon material icons Determine the icon inside the tag.
tagColor Colors Default Colors RGB, HEX Determine the color of the icon inside the tag.