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.

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.

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

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.

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.