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 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.
You can use hover-line property to display a translucent line, on hover, below the vs-tab.
You can pass an alpha/percent opacity to hover-line, default opacity is 0.3.
The hover-text property is enabled by default, and apply color to the text on hover.
You can pass an alpha/percent opacity to hover-text, opaque by default.
You can provide a boolean to both hover-line / hover-text properties, to enable/disable them.
In that case default opacity will be used.
WARNING
Only RGB and HEX colors are supported.
TIP
The color property defined on vs-tabs is the default value for all tabs, but you can override it by defining it on a vs-tab.
Since vuesax3@4.1.0
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.
Icons
You can add a left icon inside each tab with the property icon that has the same values as the icon component.