2.12.3 • Published 2 years ago

vanilla-picker v2.12.3

Weekly downloads
115,234
License
ISC
Repository
github
Last release
2 years ago

vanilla-picker

License Version Size Downloads

A simple, easy to use vanilla JS (no dependencies) color picker with alpha selection.

Demo

https://codepen.io/Sphinxxxx/pen/zRmKBX

Getting Started

Installing

  • For the pros:

    • npm install vanilla-picker --save
    • import Picker from 'vanilla-picker';
  • For the rest of us:

<script src="https://unpkg.com/vanilla-picker@2"></script>

Note:

The script adds a <style> element to the page, with all the needed CSS. If your site's Content Security Policy doesn't allow that, use the CSP build with a separate CSS file instead:

import Picker from 'vanilla-picker/csp';
import 'vanilla-picker/dist/vanilla-picker.csp.css';

..or

<script src="vanilla-picker.csp.min.js"></script>
<link  href="vanilla-picker.csp.css" rel="stylesheet">

Usage

<div id="parent">Click me</div>

<script>

    /*
        Create a new Picker instance and set the parent element.
        By default, the color picker is a popup which appears when you click the parent.
    */
    var parent = document.querySelector('#parent');
    var picker = new Picker(parent);

    /*
        You can do what you want with the chosen color using two callbacks: onChange and onDone.
    */
    picker.onChange = function(color) {
        parent.style.background = color.rgbaString;
    };

    /* onDone is similar to onChange, but only called when you click 'Ok' */

</script>

API and advanced options

https://vanilla-picker.js.org/gen/Picker.html

Accessibility

The color picker is built to support basic keyboard navigation and use with screen readers. I would be very interested in feedback on improvements that could be done here!

Credits

License

The ISC license - see the LICENSE.md file for details.

qcauditformbuilderqcauditformbuilderjs@prem911/formiojsauditformbuilderjswoodsaucsnova-formjs-oldsnova-formjscrmcheap-formiojsjsoneditor-index-value@infinitebrahmanuniverse/nolb-van@everything-registry/sub-chunk-3042@opengisch/geogirafe-core@geogirafe/geoportaltalkable-ui-kitt6-formiojssvelte-jsoneditorsvelte-jsoneditor-cnsvelte-jsoneditor-plussvelte-jsoneditor-taosupperformjsvasion-formiojsjsonediterjsoneditorjsoneditor-fixedjsoneditor-mjsoneditor-modifiedjsoneditor-sg7jsoneditor-yaml-v2jsoneditor-plusjson-customhf-editorhauhdahdoahdoainline-style-editorlit-element-poc@wedevlt/jsoneditor@thrivehealth/formiojs@tomymehdi/formiojs@trimindtech/formiojs@vidday/svelte-jsoneditor@strikehawk/jsoneditor@tegrus/formiojs@zomurrod/custom-twilight-componentsb-formiojs@cmtech/formiojs-4795-fix@crmcheap/formiojssprasum-logicflow-extensionteson-formiojstwilight-components_test@beabee/formiojsyuchuangda-formiojsunideunicomformjsunum-formiojsvanilla-jsoneditorvanilla-jsoneditor-cnvanilla-jsoneditor-flvbvanilla-jsoneditor_yue@logicflow/extension@ledangdung/vanilla-jsoneditor@newhippo/formiojs@kit-data-manager/metadata-editor@salla.sa/twilight-components@rmorgan323/formiojsnanoformiojssean-jsoneditorrol-formioqcformiojsruntask-formiojsnetsa_formiojsqloudformjsreiciendisipsamptvce_formiojsrich-text-onerich-text-twosmartformjsreactfbuildergims-clientcommon-rtechinese-vanilla-jsoneditorchinese-svelte-jsoneditorcowing-formiojscustom-patch-formiojscustom-twilight-componentsbcformiojsdinesh-formioformiochangformiojsformiojs-arformiojs-changeformiojs-colfuturoformiojs-ekartonformiojs-emilyemrformiojs-ennformiojs-eorionformiojs-extformiojs-gpformiojs-kodiakformiojs-llqformiojs-sivaformiojs-tmp
2.12.3

2 years ago

2.12.2

2 years ago

2.12.0

4 years ago

2.12.1

4 years ago

2.11.2

5 years ago

2.11.1

5 years ago

2.11.0

5 years ago

2.10.1

6 years ago

2.10.0

6 years ago

2.9.2

6 years ago

2.9.1

6 years ago

2.9.0

6 years ago

2.8.2

6 years ago

2.8.1

6 years ago

2.8.0

7 years ago

2.7.2

7 years ago

2.7.1

7 years ago

2.7.0

7 years ago

2.6.0

7 years ago

2.5.3

7 years ago

2.5.2

7 years ago

2.5.1

7 years ago

2.5.0

7 years ago

2.4.3

7 years ago

2.4.2

7 years ago

2.4.1

7 years ago

2.4.0

7 years ago

2.3.0

7 years ago

2.2.1

7 years ago

2.2.0

7 years ago

2.1.0

8 years ago

2.0.2

8 years ago

2.0.1

8 years ago

2.0.0

8 years ago

2.0.0-alpha.8

8 years ago

2.0.0-alpha.7

8 years ago

2.0.0-alpha.6

8 years ago

2.0.0-alpha.5

8 years ago

2.0.0-alpha.4

8 years ago