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