# Installation

# Installation by use npm

  npm install ew-color-picker --save-dev
  //npm install ew-color-picker -D

# Installation by use yarn

  yarn add ew-color-picker --D

# import

  <script src="./dist/ew-color-picker.min.js"></script>

# use

A colorPicker as follows:

   //default configuration
   var color = new ewColorPicker('.demo');
   // or var color = new ewColorPicker(document.getElementByClassName('demo'));
   //click the sure button
   color.config.sure = function(color){
       //return color value
   //click the cancel button
   color.config.clear = function(defaultColor){
     //return default color value
  //  when the color changed
  color.config.changeColor = function(color){
     //return the changed color
     //Custom configuration
   var color = new ewColorPicker({
      el:'.demo2',//the dom element
      alpha:true,//open the alpha
      hue:false,//open the hue
      },//the colorPicker type,contained four value such as normal,medium,small,mini or an object that you defined by yourself,the min value is 25px
      predefineColor:['#223456','rgba(122,35,77,.5)'],//predefine color is an array
      disabled:false,//disabled all event
      defaultColor:'#eeff22',//the default color
      pickerAnimation:'opacity',//or 'height',`default`,the animation of open the colorPicker,the default value is `default`
      pickerAnimationTime:300,//Animation execution time,200 is default,the max time is 10000
      },//the handler of sure
      },//the handler of clear
      togglePicker:(el,flag,context) => {
        console.log('current root element',el);
        console.log('current color picker',context);
      },//Click the box event callback, you need to pay attention to the event trigger must be set `hasBox` to true 
      isLog:false, //Whether to turn on printing information, the default is true if the value is not specified
      changeColor:(color) => {
        console.log('the color value changed:',color);
      hasBox:true //The default is true, or false, indicating whether to display the box
      isClickOutside:true, //The default is true, or false,Indicates whether it is allowed to click outside the colorPicker area to close the colorPicker
      hasClear:true,//Whether to show the clear button,the default is true
      hasSure:true, //Whether to show the sure button,the default is true,it is not recommended to set to false
      hasInput:true, //Whether to show the sure input,the default is true,it is not recommended to set to false
      boxDisabled:true,//The default is false,set it to true and set haxBox to true,then click on the box not to open the color picker
      openChangeColorMode:true,//Whether to turn on the color switching mode, note that you must set alpha and hue to true to turn on this mode
      hueDirection:"horizontal",//Or `vertical`, the default is a vertical layout display, indicating whether the hue color scale column is displayed in a horizontal or vertical layout
      alphaDirection:"horizontal",//Or vertical, the default is a vertical layout display, indicating whether the transparency column is displayed in a horizontal or vertical layout
      lang:"zh",//Or `en`, means whether to enable Chinese mode or English mode
      clearText:"clear",//The clear button text, if you want to customize the value, you need to set `userDefineText` to true
      sureText:"sure",//The sure button text, if you want to customize the value, you need to set `userDefineText` to true
      userDefineText:false,//The default is false, after setting it to true, the switch of the `lang` attribute will be invalid
  //If you don’t like the way to instantiate to create a color picker, you can also use the `createColorPicker` method
  ewColorPicker.createColorPicker(config);//the param is the configuration
  //You can get the default configuration object by `getDefaultConfig` method
  //For the instantiated color picker class, we also provide 3 APIs, as follows:
  color.openPicker(pickerAnimation,time);//Open the color picker manually, the parameter is the animation type, namely `height` or `opacity`
  color.closePicker(pickerAnimation,time);//Manually close the color picker, the parameters are the same as the manual open method
  color.updateColor(color);//Manually update the color value, the parameter is the color value, the unqualified color value will give an error prompt, and the color picker panel must be open

# Special Note

tips: It should be noted that starting from version 1.6.4, if there are multiple dom elements passed in, only the first dom element will be rendered as a colorPicker. If multiple colorPickers need to be rendered, an array can be used for instance. E.g:

   let els = document.querySelectorAll('.demo');
   els.forEach(item => {
     new ewColorPicker(item);
     //or new ewColorPicker({
    //  el:item,
    //  }) //and the configuration

# use cdn


  //import css
  //full version,This always imports the latest version of the colorPicker
  //mini version
  //or import the detail version (full version)
  //mini version

# used in framework

   import ewColorPicker from 'ew-color-picker';
  //  import the style
   import "ew-color-picker/dist/ew-color-picker.min.css";
  //or  import "ew-color-picker/src/style/ew-color-picker.css";
   const colorPicker = new ewColorPicker(option);//option is the configuration object, see above for details
Last Updated: 11/13/2021, 7:23:15 PM