Basic pwc-color-picker Screenshots

Live Codepen Example

Installation

Script tag

• Put a script tag similar to this <script type="module" src="https://unpkg.com/@paraboly/pwc-color-picker@latest/dist/pwc-color-picker/pwc-color-picker.esm.js"></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install @paraboly/pwc-color-picker --save
• Put a script tag similar to this <script src='node_modules/@paraboly/pwc-color-picker/dist/pwc-color-picker.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install @paraboly/pwc-color-picker --save
• Add an import to the npm packages import @paraboly/pwc-color-picker;
• Then you can use the element anywhere in your template, JSX, html etc

Usage

<pwc-color-picker
  colors='["#951955","#130394","#444444","#989898", "#101516"]'
></pwc-color-picker>

Checkbox onCheckChange Listener Usage

JS Way

Also you can put this code into your html inside script tags. You can check the example as index.html

const component = document.querySelector("pwc-color-picker");
component.addEventListener("colorPickedEvent", event => {
  console.log("Event: ", event.detail);
});
component.colors = ["#989898", "#101516", "#951955", "#130394", "#444444"];

Authors

Şevval Eygül

License

WebComponent PWC Color Picker is available under the MIT license. See the LICENSE file for more info.