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 the> vs-tab component.

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.>

Alignments

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

  • center
  • right
  • fixed

    Default

Position

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

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
vs-position String top, left, bottom, right Tabs menu position.
color String RGB, HEX Color of the tabs component.
alignment String top (default), left, bottom, right 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.