Name: angular-bootstrap-colorpicker
Owner: looker
Description: Native AngularJS colorpicker directive. No dependency on jQuery or jQuery plugin is required.
Forked from: natatat/angular-bootstrap-colorpicker
Created: 2016-11-01 20:38:47.0
Updated: 2016-11-01 20:38:48.0
Pushed: 2015-12-01 01:00:13.0
Size: 343
Language: CSS
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
This version contains a native AngularJS directive based on bootstrap-colorpicker jQuery library.
No dependency on jQuery or jQuery plugin is required.
Previous releases:
Copy css/colorpicker.css and js/bootstrap-colorpicker-module.js.
Add a dependency to your app, for instance:
angular.module('myApp', ['colorpicker.module'])
Hex format
ut colorpicker type="text" ng-model="your_model" />
or
ut colorpicker="hex" type="text" ng-model="your_model" />
RGB format
ut colorpicker="rgb" type="text" ng-model="your_model" />
RBGA format
ut colorpicker="rgba" type="text" ng-model="your_model" />
As non input element
colorpicker ng-model="your_model"></div>
The color picker template with an input element
ut colorpicker colorpicker-with-input="true" type="text" ng-model="your_model" />
Position of the color picker (top, right, bottom, left).
ut colorpicker colorpicker-position="right" type="text" ng-model="your_model" />
The color picker in a fixed element
ut colorpicker colorpicker-fixed-position="true" type="text" ng-model="your_model" />
When using fixed positioning, you can also put the picker into the parent element (this allows more styling control)
ut colorpicker colorpicker-fixed-position="true" colorpicker-parent="true" type="text" ng-model="your_model" />
The color picker in UI Bootstrap modal (the parent element position property must be set to relative)
ut colorpicker colorpicker-parent="true" type="text" ng-model="your_model" />
Binding the visibility of the color picker to a variable in the scope
ut colorpicker colorpicker-is-open="isOpen" type="text" ng-model="your_model" />
Auto hiding the color picker when a color has been selected
ut colorpicker colorpicker-close-on-select type="text" ng-model="your_model" />
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.
A global selected event, will be fired when a color is selected from the saturation, hue or alpha slider.
Will be fired when a color is selected from the saturation slider.
Will be fired when a color is selected from the hue slider.
Will be fired when a color is selected from the alpha slider.
Will be fired when a color picker is opened.
Will be fired when a color picker is closed.