simple colorpicker and gradient picker
npm install @r2-d1/colorpickerEasyLogic ColorPicker is vanila-js colorpicker.
Document Site: https://colorpicker.easylogic.studio/#colorpicker-for-standalone
https://codepen.io/redgoose/pen/BaRaqEd
``shell`
npm install @easylogic/colorpicker
`javascript
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'),
})
`
`html
`
#### Initialize
`javascript`
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
`javascript`
new ColorPicker({
container,
type: 'circle',
color: 'lime',
onChange: function(color) {
console.log('change color', color);
},
})
`javascript`
new GradientPicker({
container,
gradient: "linear-gradient(to right, white 0%, black 100%)",
colorpicker: {
type: "circle",
},
onChange: function(gradient) {
console.log('change gradient', gradient);
},
})
- required
- type: Element
- default:
The element where the color picker is inserted is determined by the selector.
ex) document.querySelector('#picker'), document.getElementById('picker')
- type: string
- default:
- value:
color picker theme design
- type: string
- default:
Color code used for initialization
- type: string
- default:
- value:
The color format used when initializing
- type: string
- default:
- value:
Color format output by callback function
- type: boolean
- default:
Whether to use the form area where the color code is displayed
- type: boolean
- default:
투명도를 조절하는 슬라이더를 사용할지에 대한 여부를 정합니다.
- type: number
- default:
Pallet width.
It may not be available depending on the design type.
- type: number
- default:
palette vertical.
It may not be available depending on the design type.
- type: number
- default:
Thickness of circular pallet in design ring type
- type: string
- default:
title of color swatch
- type: array
- default:
- value:
Color list in color swatches
- type: function
- params:
Executed when the color picker is initialized.
- type: function
- params:
Executes when the color changes. ex) mousemove, touchmove
- type: function
- params:
Executes when the color change ends. ex) mouseup, touchend
- type: function
- params:
It is executed when the color format is changed.
- type: function
Executed when the color picker object disappears.
You can use the color picker instance object to perform specific actions.
`javascript`
picker.initialize();
Initialize the instance. You can use it after executing destroy().
`javascript`
let color = picker.getColor();
Gets the selected color.
`javascript`
picker.setColor('#A6341B');
Change color.
`javascript`
picker.setOption({
type: 'ring',
color: '#00ff00',
});
Change options. Restart the color picker when making changes.
`javascript`
picker.setType('circle');
Change the color picker design type. For the type value, refer to the type section. (Some set values may disappear.)
`javascript`
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.
`shell`
git clone https://github.com/easylogic/easylogic-colorpicker
cd colorpicker
npm install
cp resource/.env ./
`shell`
npm run dev
`shell`
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.