Aggressive and impacting effect and the most important functional
To add a checkBox, we have the vs-checkbox
component which expects a principal parameter v-model
that would be our value.
You can change the color of the checkBox with the property color
. You are able to use the Main Colors or RGB and HEX colors.
WARNING
Only RGB and HEX colors are supported.
In most cases you will need a boolean data type while working with checkBoxes. For making this possible you have to link a boolean value in v-model
.
You can pass as a value a string by giving it as a value of the property vs-value
.
You can have several checkBoxs linked to the same array only by using v-model
with a value of array.
Sometimes you need to link an object as a value when selecting a checkBox for it, you only have to put it as value in vs-value
an object either literal or linked.
Sometimes we want to change the internal icon inside the checkbox. To do so, we have the property icon
TIP
Vuesax uses the Google Material Icons font library by default. For a list of all available icons, visit the official Material Icons page. Other icon libraries can be used by providing the class for the respective pack in the icon-pack property. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal.
Name | Type | Parameters | Description | default |
---|---|---|---|---|
v-model | String / boolean / array | Link values. | ||
color | String | primary, success, danger, warning, dark, RGB, HEX | Color options for checkBox. | primary |
vs-value | String | primary, success, danger, warning, dark, RGB, HEX | Value if different from a boolean. | |
icon | String | Material Icons | Change the checkBox icon. | checked |
icon-pack | String | Icon Pack Class Name | Icon Pack to be used. If not set, icon will default to Material Icons. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal. | material-icons |