Getting Started with the FlatColorPicker
This guide demonstrates how to get up and running with the Kendo UI for jQuery FlatColorPicker.
After the completion of this guide, you will achieve the following end result:
<div id="flatcolorpicker"></div>
<script>
$(document).ready(function(){
$("#flatcolorpicker").kendoFlatColorPicker({
clearButton: true
});
});
</script>
1. Create a Div Element
First, create a <div> element on the page that will be used to initialize the component. The content of the <div> will be the content of the FlatColorPicker.
<div id="flatcolorpicker"></div>
2. Initialize the FlatColorPicker
In this step, you will initialize the FlatColorPicker from the <div> element.
<div id="flatcolorpicker"></div>
<script>
$(document).ready(function(){
$("#flatcolorpicker").kendoFlatColorPicker();
});
</script>
3. Apply Configuration Settings
Here, you will apply some settings such as clearButton, buttons, and opacity.
<div id="flatcolorpicker"></div>
<script>
$(document).ready(function(){
$("#flatcolorpicker").kendoFlatColorPicker({
buttons: true, // Display the Apply / Cancel buttons.
clearButton: true, // Display the 'Clear color' button.
opacity: true // Render the opacity slider to allow selection of transparency.
});
});
</script>