Dark | Light |
---|---|
Note: The readme is always up-to-date with the latest commit. See Releases for installation instructions regarding to the latest version.
<link rel="stylesheet" href="dist/color-picker.min.css"/>
<script type="text/javascript" src="dist/color-picker.min.js"></script>
// Simple example, see optional options for more configuration.
const picker = new ColorPickerControl({
container: document.body,
theme: 'dark'
});
You can find more examples here.
Use the on(event, cb)
and off(event, cb)
functions to bind / unbind eventlistener.
Event | Description | Arguments |
---|---|---|
init |
Initialization done - color picker can be used | ColorPickerControlInstance |
open |
Color picker got opened | ColorPickerControlInstance |
change |
Color has changed | HSVaColorObject |
close |
Color picker got closed | ColorPickerControlInstance |
Example:
picker.on('init', (instance) => {
console.log('Event: "init"', instance);
});
picker.on('open', (instance) => {
console.log('Event: "open"', instance);
});
picker.on('change', (color) => {
console.log('Event: "change"', color);
});
picker.on('close', (instance) => {
console.log('Event: "close"', instance);
});
Author: ivanvmat
Demo: https://ivanvmat.github.io/color-picker/
Source Code: https://github.com/ivanvmat/color-picker
#javascript