ColorPicker Overview
The ColorPicker allows the user to select a color from a drop-down menu.
It is designed to replace the <input type="color"> HTML5 tag, which is not widely supported in browsers. The original input element is kept in the DOM. The value attribute element gets updated as the user selects a color which allows the submission of forms with ColorPickers.
The ColorPicker wrapper for Vue is a client-side wrapper for Kendo UI ColorPicker widget.
Basic Usage
The following example demonstrates the ColorPicker in action.
Example
View Source
Change Theme:
Functionality and Features
Events
The following example demonstrates basic ColorPicker events. You can subscribe to all ColorPicker events by the handler name.
<div id="vueapp" class="vue-app">
<kendo-colorpicker :value="color" v-on:change="onChange">ColorPicker</kendo-colorpicker>
color: <span v-text="color"></span>
</div>Vue.use(InputsInstaller);
new Vue({
el: "#vueapp",
data () {
return {
color: "5CE500"
}
},
methods: {
onChange (ev) {
this.color = ev.sender.value()
}
}
})