@MESG-COMPONENTS/CHOICE
Install
npm install @mesg-components/choice
or yarn add @mesg-components/choice
Properties
-
v-model:
[ String, Number, Array of String ]
, Optional -> default selected value, TypeArray of String
use on choice as typecheckbox
-
options:
Array of object
, Required -> Display value -
type:
String
.Required, Value of typesbutton-group | checkbox | radio | select
-> Display choice component by type.
Example
Type button-group:
const selected = 'Table'
const options = [
{ key: 1, value: 'Table', preIcon: 'fal fa-table' },
{ key: 2, value: 'Graph', preIcon: 'far fa-chart-area' },
{ key: 3, value: 'Button' },
{ key: 5, value: 'Pie', postIcon: 'far fa-chart-area' },
{ key: 6, value: 'Radio', postIcon: 'fal fa-table' }
]
<template>
<choice type="button-group" v-model="selectValue" />
</template>
Type checkbox:
const selectValue = [ "30", "100" ]
const options = [
{ key: "10", value: 10 },
{ key: "20", value: 20 },
{ key: "30", value: 30 },
...
]
<template>
<choice type="checkbox" :options="options" />
</template>
Type radio:
const selectValue = 30
const options = [
{ key: "10", value: 10 },
{ key: "20", value: 20 },
{ key: "30", value: 30 },
...
]
<template>
<choice type="radio" :options="options" />
</template>
Type select:
const selectValue = 30
const options = [
{ key: "10", value: 10 },
{ key: "20", value: 20 },
{ key: "30", value: 30 },
...
]
<template>
<choice type="select" :options="options" />
</template>