Pickment example

Pickment 0.9.0

A minimalistic Angular color picker directive.

~12 kb minified. Only depends on TinyColor.

Demo

Try Pickment out

Documentation

Usage

Include Pickment files and dependencies.

<script type="text/javascript" src="tinycolor.js"></script>
<script type="text/javascript" src="pickment.js"></script>
<!-- Color modes are optional, but you need at least one -->
<script type="text/javascript" src="pickment-hue.js"></script>

Inject Pickment and one or more Pickment modes into your Angular app:

angular.module('app', ['pickment', 'pickment-hue']);

Pickment is used with the pickment element with its ng-model holding the CSS color value.

<pickment ng-model="color" preview="true" alpha="true" size="256" mode="hue" format="rgb" position="left top, left top"></pickment>

Using the element requires appropriate styles for the pickment class element it's transformed to. For example:

.pickment {
  min-width: 1em;
  min-height: 1em;
  vertical-align: middle;
  display: inline-block;
  cursor: pointer;
}

Options

Option Default Explanation
preview true Show color preview element
alpha true Show alpha selection element
size 256 Base size of the picker element
mode 'hue' Color selection mode (hue, brightness or saturation)
format 'rgb' Color format (anything Tinycolor supports)
position 'left top, left top' Position and origin of the color picker element