Tabs are very easy to implement


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


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


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


    Only RGB and HEX colors are supported.


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

      • center
      • right
      • fixed






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


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