Add-on Directory

color-picker - Vaadin Add-on Directory

A picker for color, that can use the native input color-picker - Vaadin Add-on Directory
[![Published on NPM](https://img.shields.io/npm/v/@fooloomanzoo/color-input.svg)](https://www.npmjs.com/package/@fooloomanzoo/color-picker) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@fooloomanzoo/color-picker) [![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/fooloomanzoocolor-picker) _[API & Demo](https://fooloomanzoo.github.io/color-picker)_ ## <color-picker> ### What is it for? `color-picker` is a picker for color for **[Polymer](https://github.com/Polymer/polymer)** that can use the **native** input, too. It has the same approach like in [<datetime-picker>](https://fooloomanzoo.github.io/datetime-picker/components/datetime-picker/). If the **native** picker is choosen and is not supported, this element use the **polyfill** color-picker. The `` will come in place if the native picker is not available or is not explicitly wanted. The `value` and `color-string` will give you directly the css-string in the selected `format`. ### Motivation Internally it tests the browser, if native input-type `color` is supported. You can decide to use the native or the replacements during runtime. `color-element` can also be used separately. By default, the polyfilled version is used. It might be useful for you to use, if you like to keep the native approach of Browsers on Mobile Devices, or you like to have a different look or you would like to have a guaranteed working **color-picker**. Another use case could be for example, if you want on _mobile devices_ use the native picker, when supported, and on _desktop devices_ this polyfill. For that purposes the attributes **native** and **native-on-mobile** are provided. ```html ``` ### How? The **[component page](https://fooloomanzoo.github.io/color-picker/components/color-picker/)** explains, which of the attributes you can use and how. You can see there a **[demo](https://fooloomanzoo.github.io/color-picker/components/color-picker/#/elements/color-picker/demos/demo/color-picker.html)**, too. Examples: #### color-picker ```html

red: [[r]]
green: [[g]]
blue: [[b]]

native color picker

auto confirm

``` #### Stand-alone color-element ```html

format
alpha: [[alpha]]
red: [[r]]
green: [[g]]
blue: [[b]]
hue: [[h]]
saturation: [[s]]
lightness: [[l]]

``` #### Use the polyfill or the native picker By default it checks if `color` is supported for a native input. If it is not and you have set `native`, the polyfill will be used instead of the native input. Additionally there is the attribute `native-on-mobile`. ### Styling Have a look at [input-picker-pattern#input-shared-style](https://github.com/fooloomanzoo/input-picker-pattern#input-shared-style) to see how to style the element. ### Installation ``` npm install --save @fooloomanzoo/color-picker ``` ### Contribute? Feel free to send a new issue, a commit, a pull request or just fork it!
GitHub Homepage
Issue tracker
License
Online Demo
Documentation
View on NPM
View on GitHub

color-picker version 1.0.0
### Dependencies Polymer/polymer#1.9 - 2 * PolymerElements/iron-overlay-behavior * fooloomanzoo/input-picker-pattern * fooloomanzoo/number-input

color-picker version 1.0.1
### Dependencies Polymer/polymer#1.9 - 2 * PolymerElements/iron-overlay-behavior * fooloomanzoo/input-picker-pattern * fooloomanzoo/number-input

color-picker version 1.0.2
### Dependencies Polymer/polymer#1.9 - 2 * PolymerElements/iron-overlay-behavior * fooloomanzoo/input-picker-pattern * fooloomanzoo/number-input

color-picker version 1.0.3
### Dependencies Polymer/polymer#1.9 - 2 * PolymerElements/iron-overlay-behavior * fooloomanzoo/input-picker-pattern * fooloomanzoo/number-input

color-picker version 1.0.4
### Dependencies Polymer/polymer#1.9 - 2 * PolymerElements/iron-overlay-behavior * fooloomanzoo/input-picker-pattern * fooloomanzoo/number-input

color-picker version 1.0.5
### Dependencies

color-picker version 2.0.0
### Dependencies

color-picker version 2.0.1
### Dependencies

color-picker version 2.0.2
### Dependencies

color-picker version 2.0.3
### Dependencies

color-picker version 2.0.4
### Dependencies

color-picker version 2.0.5
### Dependencies

color-picker version 2.0.6
### Dependencies Polymer/polymer#2 * fooloomanzoo/input-picker-pattern#2 * fooloomanzoo/property-mixins#2 * fooloomanzoo/color-input#2

color-picker version 2.0.7
### Dependencies

color-picker version 2.0.8
### Dependencies

color-picker version 2.0.9
### Dependencies * @polymer/polymer#^2.6.1 * @fooloomanzoo/input-picker-pattern#^2 * @fooloomanzoo/color-input#^2

color-picker version 2.0.10
### Dependencies * @polymer/polymer#^2.6.1 * @fooloomanzoo/input-picker-pattern#^2 * @fooloomanzoo/color-input#^2

color-picker version 2.0.11
### Dependencies * @polymer/polymer#^2.6.1 * @fooloomanzoo/input-picker-pattern#^2 * @fooloomanzoo/color-input#^2

color-picker version 3.0.0
### Dependencies * @polymer/polymer#^3 * @fooloomanzoo/input-picker-pattern#^3 * @fooloomanzoo/color-input#^3

color-picker version 3.0.1
### Dependencies * @fooloomanzoo/color-input#^3.0.2 * @fooloomanzoo/input-picker-pattern#^3.0.8 * @polymer/polymer#^3

color-picker version 3.0.2
### Dependencies * @fooloomanzoo/color-input#^3.0.4 * @fooloomanzoo/input-picker-pattern#^3.0.10 * @polymer/polymer#^3