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
Edit In Stackblitz  
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()
		}
	}
})

In this article

Not finding the help you need?