JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 41
  • Score
    100M100P100Q76029F
  • License MIT

Modern Color Picker Component

Package Exports

  • @thednp/color-picker
  • @thednp/color-picker/dist/js/color-picker.esm.js
  • @thednp/color-picker/dist/js/color-picker.min.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@thednp/color-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ColorPicker Web Component

The feature rich color picker component for the modern web built with TypeScript definition, WAI-ARIA compliant.

NPM Version NPM Downloads jsDeliver

Demo

Download the package and check the demo folder, or check it online here.

Highlights

  • Accessibility Focus
  • ES6+ sources with TypeScript definitions
  • SCSS sources
  • very light footprint, 5kb in size when minified
  • 3 sets of positions top (main), left or right
  • provides a set of options for JavaScript initialization
  • DATA API allows you to automatically initiate without JS invocation
  • modern browsers supported and semi-modern alike with a special polyfill for IE10+ provided

NPM

You can install ColorPicker through NPM:

$ npm install @thednp/color-picker

Browser Usage

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 JS in your document <body> tag, though it should work in the <head> as well

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

OR use the ColorPickerElement custom element:

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

If you don't want to use the custom element, you can initialize the function for your elements at the end of your <body> tag

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

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

<label for="myPicker">Color Label</label>
<div class="color-picker">
  <input id="myPicker" name="myPicker" class="color-preview" value="#069" data-function="color-picker">
</div>

Alternatively you can use the ColorPickerElement custom element:

<label for="myPicker">Color Label</label>
<color-picker>
  <input id="myPicker" name="myPicker" class="color-preview" value="#069">
</color-picker>

<script type="module" src="../path-to/color-picker-element.js"></script>

In this case the data-function="color-picker" attribute is no longer required.

Other initialization and markup options apply, explained in the demo.

ES6+

import ColorPicker from '@thednp/color-picker'

let myPicker = new ColorPicker('#myPicker')

Thanks

License

MIT License