Angular Color Picker
Vanilla AngularJS Color Picker Directive with no requirement on jQuery
Installation
Bower
bower install angularjs-color-picker --save
Npm
npm install angularjs-color-picker --save
Usage
-
Include files
- Bower
<!-- only include if you use bootstrap -->- Node
<!-- only include if you use bootstrap --> -
Add the module to your app
angular;
- Include in your view
Options
HTML - Only ng-model
is required. If supplying an api it must be a unique object per color picker. However the event api can be shared among color pickers.
Javascript
$scopecolor = '#FF0000'; // options - if a list is given then choose one of the items. The first item in the list will be the default$scopeoptions = // html attributes required: false true disabled: false true placeholder: '' inputClass: '' id: undefined name: undefined // validation restrictToFormat: false true preserveInputFormat: false true allowEmpty: false true // color format: 'hsl' 'hsv' 'rgb' 'hex' 'hexString' 'hex8' 'hex8String' 'raw' case: 'upper' 'lower' // sliders hue: true false saturation: false true lightness: false true // Note: In the square mode this is HSV and in round mode this is HSL alpha: true false dynamicHue: true false dynamicSaturation: true false dynamicLightness: true false dynamicAlpha: true false // swatch swatch: true false swatchPos: 'left' 'right' swatchBootstrap: true false swatchOnly: true false // popup round: false true pos: 'bottom left' 'bottom right' 'top left' 'top right' inline: false true horizontal: false true // show/hide show: swatch: true false focus: true false hide: blur: true false escape: true false click: true false // buttons close: show: false true label: 'Close' class: '' clear: show: false true label: 'Clear' class: '' reset: show: false true label: 'Reset' class: '' ; // exposed api functions$scopeapi; // opens the popup$scopeapi; // closes the popup$scopeapiclear; // removes value$scopeapi; // resets color value to original value$scopeapi; // returns the wrapping <color-picker> element$scopeapi; // returns the color picker $scope // api event handlers$scopeeventApi = {} {} {} {} {} {} {}; // decorator - all variables in options can be globally overridden hereangular ;
Requirements
- angularjs (v1.3 and higher)
- tinycolor.js (18.8 KB minified)
NO requirement for jQuery!
Inspiration
Inspiration and code taken from projects like