JavaScript color picker
The jSuites.color
is a lightweight JavaScript color picker plugin. It can be used as a vanilla plugin or a webcomponent and can be integrated with React, Angular, Vue, or any other JS library. The color picker allows users to choose a color in a responsive color grid and perform actions using the available events such as onchange
. The available colors can be easily customized. This plugin brings a great user experience across different devices, independent of the screen site.
The javascript color plugin is responsive and can use different applications and devices.
Basic color picker input
Create a input color picker as a webcomponent
Source code
<html> <script src="https://jsuites.net/v4/jsuites.js"></script> <script src="https://jsuites.net/v4/jsuites.webcomponents.js"></script> <link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" /> <jsuites-color value="#009688"></jsuites-color> </script> document.querySelector('jsuites-color').addEventListener('onchange', function(a,b,c) { // Set the font color e.target.children[0].style.color = this.value; // Show on console console.log('New value:' + this.value); }); </script> </html>
Documentation
Methods
Method | Description |
---|---|
color.open(); | Open the color picker |
color.close(boolean); | Close the color picker @param int ignoreEvents - Do no execute onclose event |
color.getValue(); | Get the current value of the color picker |
color.setValue(string); | Set a new value to the color picker @param hex newColor - Set a new value |
Events
Method | Description |
---|---|
onchange | Method executed when a value is changed. (HTMLElement element, String color) => void |
onclose | Method executed when the color picker is closed. (HTMLElement element) => void |
onopen | Method executed when the color picker is opened. (HTMLElement element) => void |
Initialization settings
Property | Description |
---|---|
fullscreen: boolean | Open the color picker in fullscreen mode. Default: false |
value: string | Initial value of the compontent |
palette: Array of colors | Custom colors |
placeholder: string | The default instruction text on the element |
closeOnChange: boolean | Automatically close the color picker container when on color is selected |
doneLabel: string | Done button label |
resetLabel: string | Reset button label |