Skip to content

Usage

Jump to bottom
thednp edited this page Mar 24, 2022 · 6 revisions

Add assets to your page

Download the latest package. unpack and inspect the contents. You need to copy the color-picker.js and color-picker.css or their minified variations to your app assets folders as follows.

Link the required CSS in your document <head> tag

<link href="../assets/css/color-picker.css" rel="stylesheet">

Link the required JavaScript in your document <body> tag, though it should work in the <head> as well

<script src="../assets/js/color-picker.js"></script>

Initialize your designated targets

Initiate the function for your elements at the end of your <body> tag

<script>
var myPicker = new ColorPicker('input.selector');
</script>

Initialize multiple targets

To use the DATA-API, you need to provide the data-function="color-picker" attribute to your target <input>, like so:

<div class="color-picker">
  <input class="color-preview" data-function="color-picker" data-format="rgb">
</div>

Then initialize all <input> targets that match this selector:

const { init, selector } = ColorPicker;
[...document.querySelectorAll(selector)].forEach(init);

The CustomElement

Alternatively you can use the custom Element, in this case the data-function="color-picker" attribute is no longer needed:

<label for="myPicker">Primary Color</label>
<color-picker data-format="rgb">
  <input class="color-preview btn-appearance" id="myPicker">
</color-picker>

Check the the demo for more markup examples.

Back to Top | Usage | API | CDN | NPM

Found any issues? Report them here.

Clone this wiki locally