https://github.com/fooloomanzoo/color-picker
A picker for color, that can use the native input
https://github.com/fooloomanzoo/color-picker
Last synced: over 1 year ago
JSON representation
A picker for color, that can use the native input
- Host: GitHub
- URL: https://github.com/fooloomanzoo/color-picker
- Owner: fooloomanzoo
- License: mit
- Created: 2017-09-29T07:38:15.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-11-17T00:51:10.000Z (over 7 years ago)
- Last Synced: 2025-03-17T22:57:59.202Z (over 1 year ago)
- Language: JavaScript
- Size: 675 KB
- Stars: 11
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/@fooloomanzoo/color-picker)
[](https://www.webcomponents.org/element/@fooloomanzoo/color-picker)
[](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
auto
rgb
hex
hsl
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!