ncp

ngjs-color-picker

🌈 A color picker with a few extra functions - for AngularJS

Showing:

Popularity

Downloads/wk

588

GitHub Stars

18

Maintenance

Last Commit

3yrs ago

Contributors

6

Package

Dependencies

1

Size (min+gzip)

1.7KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

ngjs-color-picker npm Build Status

A small directive which essentially is a color picker but with a few extra functions - for AngularJS. Based on ng-color-picker.

Requirements: Angular 1.2+

Screenshot

Features

  • Customize the appearance of the color picker (vertical, horizontal, columns etc.)
  • Generate random colors
  • Generate gradient colors

Demo

Installation

npm:

npm install --save ngjs-color-picker

You may have to run

grunt wiredep

to make grunt automatically add the needed files to your index.html.

Manually:

Clone or download the repository and include the production file in your application.

<script type="text/javascript" src="dist/ngjs-color-picker.js"></script>

Inject the directive as a dependency in your app:

angular.module('myApp', ['ngjsColorPicker']);

Usage and documentation

For documentation, examples and usage see the GitHub page for this repository.

Option prioritization

  1. Custom colors
  2. Random colors
  3. Gradient
  4. Default colors

Contribute πŸ™Œ

Run npm install and then you're able to start dev server with

npm run serve

The server is then available at http://localhost:8080.

The file dev/app/ngjs-color-picker.js is a symlink to source/ngjs-color-picker.js, so you can edit either one of them and the change will be shown on the dev server.

(Development server environment created using awesome angular-webpack).

TODO

  • See issues
  • Click (or something) to get the hex-code for the color (rgb should also be available)
  • Add reverse option for gradient
  • Include color themes (Good palettes: http://jsfiddle.net/nicgirault/bqph3pkL/)
  • Add option to select rows instead of columns

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100