angular-radial-color-picker
Advanced tools
Readme
The color picker has been developed treating the mobile devices as first class citizens:
The only dependency of Angular Radial Color Picker is Propeller for rotating the knob.
Color Picker in a modal window - GitHub Pages
Barebones example - Codepen
Color Picker on npm
npm install angular-material-color-picker
bower install angular-material-color-picker
And in your html:
<head>
<!-- Include the css -->
<link href="path/to/angular-radial-color-picker/dist/css/color-picker.min.css" rel="stylesheet">
</head>
<body>
<!-- The actual color picker component -->
<color-picker ng-model="$ctrl.initialColor" on-select="$ctrl.onSelect(color)"></color-picker>
<!-- Angular Radial Color Picker Dependencies -->
<script src="path/to/propeller.min.js"></script>
<script src="path/to/angular/angular.min.js"></script>
<!-- Include the package -->
<script src="path/to/angular-radial-color-picker/dist/js/color-picker.min.js"></script>
</body>
Once you have all the necessary assets installed, add color.picker.core as a dependency for your app:
angular.module('myApp', ['color.picker.core']);
<color-picker></color-picker> component has 2 attributes:
ng-model Object for initializing/changing the color of the picker (optional). Properties:| Name | Type | Default | Description |
|---|---|---|---|
| red | number | 255 | An integer between 0 and 255 |
| green | number | 0 | An integer between 0 and 255 |
| blue | number | 0 | An integer between 0 and 255 |
on-select callback which gets triggered when a color is selected (optional, see Events). The passed function is invoked with one argument which is an object with the following properties:| Name | Type | Description |
|---|---|---|
| hex | string | A hexidecimal string |
| rgba | object | RGBA color model |
| hsla | object | HSLA color model |
| Name | Type | Default | Description |
|---|---|---|---|
| red | number | 255 | An integer between 0 and 255 |
| green | number | 0 | An integer between 0 and 255 |
| blue | number | 0 | An integer between 0 and 255 |
| alpha | number | 1 | Transparency. A number between 0 and 1 |
| Name | Type | Default | Description |
|---|---|---|---|
| hue | number | 0 | A number between 0 and 359 |
| saturation | number | 100 | A number between 0 and 100 |
| luminosity | number | 50 | A number between 0 and 100 |
| alpha | number | 1 | A number between 0 and 1 |
For maximum flexibility the component utilizes the pub/sub pattern. For easier communication a set of events are provided that can even programatically open or close the picker without interacting with the UI. All events are published/subscribed at the $rootScope so that sibling components can subscribe to them too. All events carry the current (selected) color in the event data payload.
color-picker.show - Fires when the color picker is about to show and before any animation is started.color-picker.shown - Fires when the color picker is shown and has finished animating.color-picker.selected - Fires when a color is selected via the middle selector. Event is fired right before hide.color-picker.hide - Fires when the color picker is about to hide and before any animation is started.color-picker.hidden - Fires when the color picker is hidden and has finished animating.Example:
// Listening for something interesting to happen:
$rootScope.$on('color-picker.selected', function(ev, color) {
// a) using HSLA color model
vm.selectedColor = 'hsla(' + color.hsla.hue + ', ' + color.hsla.saturation + '%, ' + color.hsla.luminosity + '%, ' + color.hsla.alpha + ')';
// b) using RGB color model
vm.selectedColor = 'rgb(' + color.rgb.red + ', ' + color.rgb.green + ', ' + color.rgb.blue + ')';
// c) plain old hex
vm.selectedColor = '#' + color.hex;
});
// The good'n'tested "poke-it-with-a-stick" method:
$rootScope.$broadcast('color-picker.open');
The color picker has a default width/height of 280px, but can also be sized via CSS. For example:
color-picker {
width: 350px;
height: 350px;
}
TBD
FAQs
Angular-ready radial color picker with some sleek animations.
The npm package angular-radial-color-picker receives a total of 58 weekly downloads. As such, angular-radial-color-picker popularity was classified as not popular.
We found that angular-radial-color-picker demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A hospital in Mobile, Alabama, agreed to a settlement in a landmark ransomware death lawsuit, but is now reportedly reconsidering the agreement and refusing to pay.
Security News
A new report explores how advancements in LLMs are enhancing cyber threats, including polymorphic malware, personalized spearphishing, and the risk of hijacking customer service bots.
Security News
ESLint has approved an RFC that adds support for TypeScript configuration files, which is aimed at improving the developer experience and recognizing changes in the evolving JavaScript ecosystem.