color-input

WebJar for color-input

License	MIT
GroupId	org.webjars.bowergithub.fooloomanzoo
ArtifactId	color-input
Last Version	2.1.7
Release Date	Apr 25, 2019
Type	jar
Description	color-input WebJar for color-input
Project URL	http://webjars.org
Source Code Management	https://github.com/fooloomanzoo/color-input

Download color-input

Filename	Size
color-input-2.1.7.pom
color-input-2.1.7.jar	35 KB
color-input-2.1.7-sources.jar	22 bytes
color-input-2.1.7-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.bowergithub.fooloomanzoo/color-input/ -->
<dependency>
    <groupId>org.webjars.bowergithub.fooloomanzoo</groupId>
    <artifactId>color-input</artifactId>
    <version>2.1.7</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.bowergithub.fooloomanzoo/color-input/
implementation 'org.webjars.bowergithub.fooloomanzoo:color-input:2.1.7'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.bowergithub.fooloomanzoo/color-input/
implementation ("org.webjars.bowergithub.fooloomanzoo:color-input:2.1.7")

Apache Buildr

'org.webjars.bowergithub.fooloomanzoo:color-input:jar:2.1.7'

Apache Ivy

<dependency org="org.webjars.bowergithub.fooloomanzoo" name="color-input" rev="2.1.7">
  <artifact name="color-input" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.bowergithub.fooloomanzoo', module='color-input', version='2.1.7')
)

Scala SBT

libraryDependencies += "org.webjars.bowergithub.fooloomanzoo" % "color-input" % "2.1.7"

Leiningen

[org.webjars.bowergithub.fooloomanzoo/color-input "2.1.7"]

Dependencies

compile (5)

Group / Artifact	Type	Version
org.webjars.bowergithub.fooloomanzoo : number-input	jar	[2,3)
org.webjars.bowergithub.fooloomanzoo : input-picker-pattern	jar	[2,3)
org.webjars.bowergithub.fooloomanzoo : text-input	jar	[2,3)
org.webjars.bowergithub.polymer : polymer	jar	[2.6.1]
org.webjars.bowergithub.fooloomanzoo : property-mixins	jar	[2,3)

Project Modules

There are no modules declared in this project.

API & Demo

<color-input>

An input for color. It can use the formats rgb, hsl or hex. Additionally you can use text for automatically transform a color-string like red to its rgb-representation. If you are looking for a picker for color, please have a look at color-picker.

Example

  <span>color-input: </span><color-input value="{{color}}" alpha="{{alpha}}" r="{{r}}" g="{{g}}" b="{{b}}" h="{{h}}" s="{{s}}" l="{{l}}" format="{{format}}"></color-input>
  <br>
  <br>
  <span>color-text-input: </span><color-text-input value="{{color}}" alpha="{{alpha}}" format="{{format}}"></color-text-input>
  <p>
    <span>format </span>
    <select id="formats" value="{{format::change}}">
      <option value="auto">auto</option>
      <option value="rgb">rgb</option>
      <option value="hex">hex</option>
      <option value="hsl">hsl</option>
    </select>
    <br>
    <input type="range" min="0" max="1" step="0.01" value="{{alpha::change}}"><span> alpha: [[alpha]] </span>
    <br>
    <input type="range" min="0" max="255" step="1" value="{{r::input}}"><span> red: [[r]] </span>
    <br>
    <input type="range" min="0" max="255" step="1" value="{{g::input}}"><span> green: [[g]] </span>
    <br>
    <input type="range" min="0" max="255" step="1" value="{{b::input}}"><span> blue: [[b]] </span>
    <br>
    <input type="range" min="0" max="359" step="1" value="{{h::input}}"><span> hue: [[h]] </span>
    <br>
    <input type="range" min="0" max="1" step="0.001" value="{{s::input}}"><span> saturation: [[s]] </span>
    <br>
    <input type="range" min="0" max="1" step="0.001" value="{{l::input}}"><span> lightness: [[l]] </span>
    <br>
  </p>

Styling

Have a look at input-picker-pattern#input-shared-style to see how to style the element.

Installation

npm i --save @fooloomanzoo/color-input

License

MIT

Versions

Version
2.1.7 Apr 25, 2019
2.1.5 May 9, 2018