Switch

Simple and functional.

State

To implement a switch element in the application, we add the component vs-switch.

Type

You can choose the default Switch type like: primary, danger, success, dark, warning or also put the color to your liking.

WARNING

Supported colors are RGB and HEX

Color

You can change the color with the same vs-type directive but passing as a value a color RGB or HEX, Example: vs-type ="rgb (232, 167, 28)"

Icons

We can add a representative icon inside our switch with the property vs-icon.

TIP

Vuesax use the Google Material Icons font library. For a list of all available icons, visit the official Material Icons page.

Array Value

Puedes guardar los valores dentro de un array, es tan simple como usarlo como valor

WARNING

para poder agregar un valor al array tenemos que usar la propiedad vs-value dentro del switch, ese es el valor que se va a agregar al array

  • [ "luis" ]

API #

NameTypeParametersDescriptiondefault
v-modelboolean || Arraytrue || false || []Link values.
vs-valueStringValue if different from a boolean.
vs-typeStringtype || HEX || RGBType of element or color.primary
vs-iconStringicon materialIcon within the element.
changeEventfunctionEvent that is executed when changing data in the component.