ruhley / Angular Color Picker
Licence: mit
Vanilla AngularJS Color Picker Directive with no requirement on jQuery
Stars: ✭ 173
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Angular Color Picker
Md Color Picker
Angular-Material based color picker
Stars: ✭ 253 (+46.24%)
Mutual labels: color-picker, angularjs
Spring Boot Axon Sample
Sample application using Spring Boot, Axon, AngularJS and Websockets
Stars: ✭ 169 (-2.31%)
Mutual labels: angularjs
Serviceportal Widget Library
A collection of Service Portal custom widgets
Stars: ✭ 155 (-10.4%)
Mutual labels: angularjs
Laravel Ecommerce
Laravel open source e-commerce system.
Stars: ✭ 163 (-5.78%)
Mutual labels: angularjs
Flexcolorpicker
Modern color picker library written in Swift 5 that can be easily extended and customized. It aims to provide great UX and performance with stable, quality code.
Stars: ✭ 164 (-5.2%)
Mutual labels: color-picker
Angularjs Webpack Starter
🚀 A modern frontend setup for AngularJS projects using NPM, TypeScript and Webpack.
Stars: ✭ 173 (+0%)
Mutual labels: angularjs
Restdemo
RESTful Web Service Demos with Jersey ,Hibernate,Mysql,SQLserver,jQuery,AangularJS,Boostrap. (REST 案例大全)
Stars: ✭ 166 (-4.05%)
Mutual labels: angularjs
Biking2
This is the source code of http://biking.michael-simons.eu
Stars: ✭ 162 (-6.36%)
Mutual labels: angularjs
Angular Ui Tour
Product tour using Angular UI Bootstrap Tooltips
Stars: ✭ 157 (-9.25%)
Mutual labels: angularjs
Angular Promise Buttons
Chilled loading buttons for AngularJS
Stars: ✭ 156 (-9.83%)
Mutual labels: angularjs
Angular Js Es6 Testing Example
Enhanced testing of Angular JS 1.X applications using ES6 modules
Stars: ✭ 170 (-1.73%)
Mutual labels: angularjs
Angular Bootstrap Checkbox
A checkbox for AngularJS styled to fit the Twitter Bootstrap standard design
Stars: ✭ 154 (-10.98%)
Mutual labels: angularjs
Ionic Toast
'ionic-toast' bower component for ionic framework applications
Stars: ✭ 160 (-7.51%)
Mutual labels: angularjs
Angular Unit Testing
🌟 Guidelines and patterns for unit testing AngularJS apps.
Stars: ✭ 173 (+0%)
Mutual labels: angularjs
Play Angular Require Seed
Seed Application for Playframework 2, RequireJS, WebJars, and AngularJS 1.x
Stars: ✭ 170 (-1.73%)
Mutual labels: angularjs
Angular Color Picker
Vanilla AngularJS Color Picker Directive with no requirement on jQuery
Demo
https://ruhley.github.io/angular-color-picker/
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].