Colorpicker With EasyLogic

This project was created to implement a color picker. It implemented basic functions for color and implemented image filters.




Document Site: https://colorpicker.easylogic.studio/#colorpicker-for-standalone

Install

npm

``npm
npm install @easylogic/colorpicker
`




How to use (for browser)

`


`

How to use



`
import '@easylogic/colorpicker/dist/colorpicker.css'
import ColorPickerUI from '@easylogic/colorpicker'
`

Use ColorPicker

`js
import '@easylogic/colorpicker/dist/colorpicker.css';
import ColorPickerUI from '@easylogic/colorpicker'

this.colorPicker = ColorPickerUI.create({
type: "sketch",
position: "inline",
container: document.getElementById('app'),
color: this.props.value || defaultColor,
onChange: c => {
this.changeColor(c);
}
});

`

Use GradientPicker

`js
import '@easylogic/colorpicker/dist/colorpicker.css';
import ColorPickerUI from '@easylogic/colorpicker'


this.gradientPicker = ColorPickerUI.createGradientPicker({
position: "inline",
container: this.refs.$color.el,
gradient: 'linear-gradient(to right, white 0%, black 100%)',
onChange: (gradientString) => {
console.log(gradientString);
}
});


// set value
this.gradientPicker.setValue('radial-gradient(circle, white 0%, black 100%'));

// get value
var gradientString = this.gradientPicker.getValue()

`




Developments

local dev

`
git clone https://github.com/easylogic/easylogic-colorpicker
cd easylogic-colorpicker
npm install
npm run dev
open localhost:10001
`

build

`
npm run build
``

License : MIT