Author: | fanaiai |
---|---|
Views Total: | 3,440 views |
Official Page: | Go to website |
Last Update: | February 15, 2021 |
License: | MIT |
Preview:

Description:
xncolorpicker is a beautiful, feature-rich, JavaScript-powered color & gradient picker component for the web.
Features:
- Supports RGBA, HEX, and HSLA color formats.
- Supports both Linear and Radial gradients.
- Allows you to customize the preset colors.
- Automatically saves your preferred colors to the palette.
- Useful callbacks to handle color changes.
How to use it:
1. Create a container to hold the trigger of the color picker.
<div id="colorpicker"> </div>
2. Load the xncolorpicker plugin in the document.
<script src="dist/xncolorpicker.min.js"></script>
3. Call the plugin on the container element.
var xncolorpicker = new XNColorPicker({ selector: "#colorpicker" })
4. Apply styles to the trigger element.
#colorpicker { /* your styles here */ }
‘
5. Set the color format you prefer: ‘rgba’, ‘hex’, or ‘hsla’.
var xncolorpicker = new XNColorPicker({ selector: "#colorpicker", format: "rgba" })
6. Customize the preset colors.
var xncolorpicker = new XNColorPicker({ selector: "#colorpicker", // determine whether to show preset colors showprecolor: true, // customize your colors here prevcolors: ['#EF534F', '#BA69C8', '#FFD54F', '#81C784', '#7FDEEA', '#90CAF9', '#F44436', '#AB47BC', '#FFC106', '#66BB6A', '#25C6DA', '#4EC3F7', '#E53934', '#9D27B0', '#FFA726', '#4CAF50', '#00ACC1', '#29B6F6', '#D32E30', '#8F24AA', '#FB8C01', '#378E3C', '#0097A7', '#02AAF4', '#C62928', '#7B1FA2', '#F57C02', '#2F7D31', '#00838F', '#029BE5', '#B71B1C', '#6A1B9A', '#EF6C00', '#34691D', '#006164', '#0388D1', '#980A0B', '#4A148C', '#E65100', '#1A5E20', '#004D41', '#01579B', 'rgba(0,0,0,0)', '#FFFFFF', '#DBDBDB', '#979797', '#606060', '#000000'] })
7. Show a a history of the recent colors that you picked.
var xncolorpicker = new XNColorPicker({ selector: "#colorpicker", // determine whether to show history showhistorycolor: true, // number of colors to show historycolornum: 16, })
8. Determine whether to show the palette.
var xncolorpicker = new XNColorPicker({ selector: "#colorpicker", showPalette: false // default: true })
9. Determine whether to show the color picker on page load.
var xncolorpicker = new XNColorPicker({ selector: "#colorpicker", show: false // default: true })
10. Determine whether to always show the color picker.
var xncolorpicker = new XNColorPicker({ selector: "#colorpicker", alwaysShow: true })
11. Determine whether the color picker is draggable.
var xncolorpicker = new XNColorPicker({ selector: "#colorpicker", canMove: true })
12. Determine whether or not to automatically confirm the selection. Default: false.
var xncolorpicker = new XNColorPicker({ selector: "#colorpicker", autoConfirm: true })
13. Event handlers.
var xncolorpicker = new XNColorPicker({ onError: function (e) { // do something }, onCancel:function(color){ console.log("cancel",color) }, onChange:function(color){ console.log("change",color) }, onConfirm:function(color){ console.log("confirm",color) } })