All Components

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.

<div id="vueapp" class="vue-app">
    <kendo-colorpicker v-model="color">ColorPicker</kendo-colorpicker>
    color: <span v-text="color"></span>
</div>
Vue.use(InputsInstaller);

new Vue({
    el: "#vueapp",
    data () {
        return {
            color: "5CE500"
        }
    }
})

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