# Switch
If you need to toggling between two states or on-off state.
# Usage
<su-switch v-model="order" state-on-label="Sell" state-off-label="Buy" state-on="SELL" state-off="BUY">
</su-switch>
<script>
import { Switch } from 'slim-ui'
export default {
components: {
'su-switch': Switch
},
data () {
return {
order: 'BUY'
}
}
}
</script>
# Demo
Buy Sell
# Props
# v-model - required
Use v-model
to bind the checked
state of the underlying <input />
tag. The v-model
binds to the value prop of the component and sets current checked state of the input.
# label
Will place label text to the (right/left) of the switch using state-on-label
and state-off-label
.
# Switch background color
You can change the checked background color of the switch by overwriting css and we are not supporting HTML attributes to change background color on switching states.