Color picker is a vanilla javascript with alpha channel support that can be attached to any element. The color picker also comes with a popup mode that enables you to view the color picker in a popup.
A vanilla JavaScript coloration picker with alpha channel assist that may be hooked up to any ingredient.
How to make use of it:
Install the colour picker by way of NPM.
# NPM $ npm install vanilla-picker --save
Import the colour picker to your mission.
// ES 6 import Picker from 'vanilla-picker';
<!-- Browser --> <script src="dist/vanilla-picker.js"></script>
Create a component the place the colour picker should append to.
<div id="example"></div>
Create a brand new Picker occasion and append the colour picker to the DIV component.
new Picker({ parent: document.querySelector('#example') });
Display the colour picker in a popup window.
new Picker({ parent: document.querySelector('#example'), popup: false // 'right'(default), 'left', 'top', 'bottom' });
Enable/disable the alpha choice.
new Picker({ parent: document.querySelector('#example'), alpha: false // default: true });
Set the preliminary coloration.
new Picker({ parent: document.querySelector('#example'), color: '#222' });
Decide whether or not to point out a textual content area for coloration value modifying.
new Picker({ parent: document.querySelector('#example'), editor: true });
Set the format of the colour picker.
new Picker({ parent: document.querySelector('#example'), layout: 'default' });
Determine whether or not to show a textual content area for coloration values.
new Picker({ parent: document.querySelector('#example'), editor: true });
Define the colour format.
new Picker({ parent: document.querySelector('#example'), editorFormat: 'hex' // or 'rgb', 'hsl' });
Determine whether or not to show a detailed button within the popup.
new Picker({ parent: document.querySelector('#example'), cancelButton: false });
Set the default coloration on init.
new Picker({ parent: document.querySelector('#example'), defaultColor: '#0cf' });
Available callback features that can be utilized to use selector coloration to any component.
new Picker({ onChange: function(color){}, onDone:: function(color){}, onOpen:: function(color){}, onClose:: function(color){} });
API strategies.
// updates the options instance.setOptions(options); // opens the popup instance.openHandler(); // closes the popup instance.closeHandler(); // moves the popup instance.movePopup(options, open); // sets the color instance.setColor(color, silent); // shows the picker instance.show(); // hides the picker instance.hide(); // destroy the picker instance.destroy();
Vanilla JS Color Picker With Alpha Channel, vanilla-picker Plugin/Github
See Demo And Download
Official Website(Sphinxxxx): Click Here
This superior jQuery/javascript plugin is developed by Sphinxxxx. For extra Advanced Usages, please go to the official website.
Be First to Comment