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.
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
$ npm install angular-bootstrap-colorpicker --save
bower
$ 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
or
RGB format
RBGA format
As non input element
The color picker template with an input element
Position of the color picker (top, right, bottom, left).
The color picker in a fixed element
When using fixed positioning, you can also put the picker into the parent element (this allows more styling control)
The color picker in UI Bootstrap modal (the parent element position property must be set to relative)
Binding the visibility of the color picker to a variable in the scope
Auto hiding the color picker when a color has been selected
Customize a size of the color picker saturation panel
Events:
Each color picker will emit the following events passing a data object in the following format:
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.