angularjs-color-picker

js Styles
Color Picker Directive For AngularJS
Version 3.4.8 License MIT
INSTALL
Type:
Version:
- Static
- Latest Patch
- Latest Minor
- Latest Major
- 3.4.8
- 3.4.7
- 3.4.6
- 3.4.5
- 3.4.4
- 3.4.3
- 3.4.2
- 3.4.1
- 3.4.0
- 3.3.0
- 3.2.1
- 3.2.0
- 3.1.2
- 3.1.1
- 3.1.0
- 3.0.1
- 3.0.0
- 2.7.2
- 2.7.1
- 2.7.0
- 2.6.2
- 2.6.1
- 2.6.0
- 2.5.0
- 2.4.8
- 2.4.7
- 2.4.6
- 2.4.5
- 2.4.4
- 2.4.3
- 2.4.2
- 2.4.1
- 2.4.0
- 2.3.0
- 2.2.0
- 2.1.6
- 2.1.5
- 2.1.3
- 2.1.2
- 2.1.1
- 2.1.0
- 2.0.0
- 1.1.7
- 1.1.6
- 1.1.5
- 1.1.4
- 1.1.2
- 1.1.1
- 1.1.0
- 1.0.7
- 1.0.6
- 1.0.3
- 1.0.1
- 1.0.0
- 0.8.1
- 0.6.11
- 0.6.9
- 0.6.4
<script src=" https://cdn.jsdelivr.net/npm/angularjs-color-picker@3.4.8/dist/angularjs-color-picker.min.js "></script>
<link href=" https://cdn.jsdelivr.net/npm/angularjs-color-picker@3.4.8/dist/angularjs-color-picker.min.css " rel="stylesheet">
No default CSS file set by the package author so the URL is guessed. You can always browse all package files to use another one.
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
<link rel="stylesheet" href="bower_components/angular-color-picker/dist/angularjs-color-picker.min.css" /> <!-- only include if you use bootstrap --> <link rel="stylesheet" href="bower_components/angular-color-picker/dist/themes/angularjs-color-picker-bootstrap.min.css" /> <script src="bower_components/tinycolor/dist/tinycolor-min.js"></script> <script src="bower_components/angular-color-picker/dist/angularjs-color-picker.min.js"></script>
- Node
<link rel="stylesheet" href="node_modules/angularjs-color-picker/dist/angularjs-color-picker.min.css" /> <!-- only include if you use bootstrap --> <link rel="stylesheet" href="node_modules/angularjs-color-picker/dist/themes/angularjs-color-picker-bootstrap.min.css" /> <script src="node_modules/tinycolor2/dist/tinycolor-min.js"></script> <script src="node_modules/angularjs-color-picker/dist/angularjs-color-picker.min.js"></script>
Add the module to your app
angular.module('app', ['color.picker']);
- Include in your view
<color-picker ng-model="myColor"></color-picker>
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.
<color-picker
ng-model="color"
options="options"
api="api"
event-api="eventApi"
></color-picker>
Javascript
$scope.color = '#FF0000';
// options - if a list is given then choose one of the items. The first item in the list will be the default
$scope.options = {
// 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
$scope.api.open(); // opens the popup
$scope.api.close(); // closes the popup
$scope.api.clear(); // removes value
$scope.api.reset(); // resets color value to original value
$scope.api.getElement(); // returns the wrapping <color-picker> element
$scope.api.getScope(); // returns the color picker $scope
// api event handlers
$scope.eventApi = {
onChange: function(api, color, $event) {},
onBlur: function(api, color, $event) {},
onOpen: function(api, color, $event) {},
onClose: function(api, color, $event) {},
onClear: function(api, color, $event) {},
onReset: function(api, color, $event) {},
onDestroy: function(api, color) {},
};
// decorator - all variables in options can be globally overridden here
angular
.module('app', ['color.picker'])
.config(function($provide) {
$provide.decorator('ColorPickerOptions', function($delegate) {
var options = angular.copy($delegate);
options.round = true;
options.alpha = false;
options.format = 'hex';
return options;
});
});
Requirements
- angularjs (v1.3 and higher)
- tinycolor.js (18.8 KB minified)
NO requirement for jQuery!
Inspiration
Inspiration and code taken from projects like