Loading repository data…
buberdds / repository
Native AngularJS colorpicker directive. No dependency on jQuery or jQuery plugin is required.
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
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:
$ npm install angular-bootstrap-colorpicker --save
$ 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'])
Hex format
<input colorpicker type="text" ng-model="your_model" />
or
<input colorpicker="hex" type="text" ng-model="your_model" />
RGB format
<input colorpicker="rgb" type="text" ng-model="your_model" />
RBGA format
<input colorpicker="rgba" type="text" ng-model="your_model" />
As non input element
<div colorpicker ng-model="your_model"></div>
The color picker template with an input element
<input colorpicker colorpicker-with-input="true" type="text" ng-model="your_model" />
Position of the color picker (top, right, bottom, left).
<input colorpicker colorpicker-position="right" type="text" ng-model="your_model" />
The color picker in a fixed element
<input 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)
<input 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)
<input colorpicker colorpicker-parent="true" type="text" ng-model="your_model" />
Binding the visibility of the color picker to a variable in the scope
<input colorpicker colorpicker-is-open="isOpen" type="text" ng-model="your_model" />
Auto hiding the color picker when a color has been selected
<input colorpicker colorpicker-close-on-select type="text" ng-model="your_model" />
Customize a size of the color picker saturation panel
<input colorpicker colorpicker-size="200" 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.
Selected from shared topics, language and repository description—not editorial ratings.
ionlyseespots /
Live style editor - A native AngularJS colorpicker / front end admin panel to save & generate CSS rule sets
32/100 health