README
Vue Segmented-Control
Segmented control for Vue.js
Demo
Installation
npm install vue-segmented-control
Usage
<template>
<segmented-control
:options="options"
label="label"
value="value"
color="#fff"
active-color="#333"
:multiple="false"
@select="onSelect"
/>
</template>
import SegmentedControl from 'vue-segmented-control'
export default {
components: {
SegmentedControl
},
data () {
return {
options: [
{ label: 'Red', value: 'red' },
{ label: 'Blue', value: 'blue' },
{ label: 'Green', value: 'green' }
]
}
},
methods: {
onSelect(optionsSelected) {
// optionSelected: [{ label: '__', value: '__', ... }]
}
}
}
Documentation
Props:
Property | Type | Default | Description | Required |
---|---|---|---|---|
options | Array(Object) | Items selectables | true | |
label | String | 'label' | Property that define the label | |
value | String | 'value' | Property that define the value (should be unique) | |
color | String | '#fff' | Text color | |
activeColor | String | '#000' | Background color of the selected items | |
multiple | Boolean | false | Set to true to enable multiple selection |