angular-bootstrap-colorpicker


angular-bootstrap-colorpicker
=============================

This version contains a native AngularJS directive based on bootstrap-colorpicker jQuery library.

No dependency on jQuery or jQuery plugin is required.

Demo page (Bootstrap v3.x.x)

Previous releases:
- branch 2.0 (Bootstrap v2.x.x)
- branch 1.0 if you need a functionality from the original plugin or IE<9 support

Installation
===============================

#### npm
``shell
$ npm install angular-bootstrap-colorpicker --save
`

#### bower
`shell
$ bower install angular-bootstrap-colorpicker --save
`

Copy css/colorpicker.css and js/bootstrap-colorpicker-module.js.
Add a dependency to your app, for instance:

angular.module('myApp', ['colorpicker.module'])

Examples:
===============================

Hex format
`html

`
or
`html

`

RGB format
`html

`

RBGA format
`html

`

As non input element
`html



`

The color picker template with an input element
`html

`

Position of the color picker (top, right, bottom, left).
`html

`

The color picker in a fixed element
`html

`

When using fixed positioning, you can also put the picker into the parent element (this allows more styling control)
`html

`

The color picker in UI Bootstrap modal (the parent element position property must be set to relative)
`html

`

Binding the visibility of the color picker to a variable in the scope
`html

`

Auto hiding the color picker when a color has been selected
`html

`

Customize a size of the color picker saturation panel
`html

`

Events:
===============================

Each color picker will emit the following events passing a data object in the following format:
`javascript
{
name: '',
value: ''
}
``
Name is the string representation of ng-model and value is the current color.

#### colorpicker-selected
A global selected event, will be fired when a color is selected from the saturation, hue or alpha slider.

#### colorpicker-selected-saturation
Will be fired when a color is selected from the saturation slider.

#### colorpicker-selected-hue
Will be fired when a color is selected from the hue slider.

#### colorpicker-selected-alpha
Will be fired when a color is selected from the alpha slider.

#### colorpicker-shown
Will be fired when a color picker is opened.

#### colorpicker-closed
Will be fired when a color picker is closed.