EasyLogic ColorPicker is vanila-js colorpicker.
Document Site: https://colorpicker.easylogic.studio/#colorpicker-for-standalone
https://codepen.io/redgoose/pen/BaRaqEd
npm install @easylogic/colorpicker
import ColorPicker, {GradientPicker} from '@easylogic/colorpicker';
import '@easylogic/colorpicker/dist/EasyLogicColorPicker.css';
const picker = new ColorPicker({
container: document.getElementById('basic'),
});
const gradientPicker = new GradientPicker({
container: document.getElementById('gradient-picker'),
})
<link href="https://cdn.jsdelivr.net/npm/@easylogic/[email protected]/dist/colorpicker.css" />
<div id="picker"></div>
<script src="https://cdn.jsdelivr.net/npm/@easylogic/[email protected]/dist/colorpicker.min.js"></script>
<script>
window.picker = new EasyLogicColorPicker({
container: document.getElementById('picker'),
})
</script>
import ColorPicker from '@easylogic/colorpicker';
const picker = new ColorPicker({
container: document.getElementById('picker'),
onInit: function(self) { console.log('initial colorpicker'); },
});
refer to colorpicker javascript for detail
new ColorPicker({
container,
type: 'circle',
color: 'lime',
onChange: function(color) {
console.log('change color', color);
},
})
new GradientPicker({
container,
gradient: "linear-gradient(to right, white 0%, black 100%)",
colorpicker: {
type: "circle",
},
onChange: function(gradient) {
console.log('change gradient', gradient);
},
})
Element
undefined
The element where the color picker is inserted is determined by the selector.
ex) document.querySelector('#picker')
, document.getElementById('picker')
string
null
default,circle,ring,mini,none
color picker theme design
string
#ffffff
Color code used for initialization
string
hex
hex,rgb,hsl
The color format used when initializing
string
undefined
hex,rgb,hsl
Color format output by callback function
boolean
true
Whether to use the form area where the color code is displayed
boolean
true
투명도를 조절하는 슬라이더를 사용할지에 대한 여부를 정합니다.
number
200
Pallet width. It may not be available depending on the design type.
number
undefined
palette vertical. It may not be available depending on the design type.
number
16
Thickness of circular pallet in design ring
type
string
Color palette
title of color swatch
array
[]
['#ff0000', '#00ff00', '#0000ff']
Color list in color swatches
function
this: EasylogicColorPickere
Executed when the color picker is initialized.
function
color: string
Executes when the color changes. ex) mousemove, touchmove
function
color: string
Executes when the color change ends. ex) mouseup, touchend
function
format: string
It is executed when the color format is changed.
function
Executed when the color picker object disappears.
You can use the color picker instance object to perform specific actions.
picker.initialize();
Initialize the instance. You can use it after executing destroy()
.
let color = picker.getColor();
Gets the selected color.
picker.setColor('#A6341B');
Change color.
picker.setOption({
type: 'ring',
color: '#00ff00',
});
Change options. Restart the color picker when making changes.
picker.setType('circle');
Change the color picker design type. For the type value, refer to the type section. (Some set values may disappear.)
picker.destroy();
Destroy the instance object.
You can edit the color picker style directly by referring to the colorpicker stylesheet page.
Prepare the development environment with the following process.
git clone https://github.com/easylogic/easylogic-colorpicker
cd colorpicker
npm install
cp resource/.env ./
npm run dev
npm run build
.env file can be used by modifying some of the local server options.
You can tweak things like port numbers and server status by editing the .env
file.