ng-chroma
Description
ng-chroma is component for choosing colors using HSB spectrum, dedicated for Angular 1.5+. Library was created with simplicity of customization and configuration in mind.
Its features includes:
- CMYK selector
- Alpha channel selector
- Displaying list of user-defined colors
1. Installing via npm
npm install ng-chroma
2. Importing ng-chroma to your project
Using UMD (webpack etc.)
var ngChromaModule = require('ng-chroma');
angular.module('yourModule', [ngChromaModule]);
Using ES6 modules
import ngChromaModule from 'ng-chroma';
angular.module('yourModule', [ngChromaModule]);
Import CSS styles from node_modules
import 'ng-chroma/dist/ng-chroma.css';
If you're using webpack, css-loader or similar must be configured.
If you want to utilize style sources (or write your own), please refer to src/ng-chroma.styles.less file.
3. Usage
3.1 Simple usage
Just include component in your HTML and provide ng-model:
<ng-chroma ng-model="myModel"></ng-chroma>
It will render control, hook all event listeners and reflect any change to model in a two-way manner.
Preview:
3.2 With user provided predefined colors
// controller.js
$scope.myColors = ['#ff0000', '#0000ff'];
<!-- view.html -->
<ng-chroma ng-model="myModel" custom-colors="myColors"></ng-chroma>
Preview:
3.3 With user provided predefined colors and label
<!-- view.html -->
<ng-chroma ng-model="myModel" custom-colors="myColors" custom-colors-label="Saved colors:"></ng-chroma>
Preview:
3.4 With selected value indicator
<!-- view.html -->
<ng-chroma ng-model="myModel" show-selected-value></ng-chroma>
Preview:
3.5 With CMYK controls
<!-- view.html -->
<ng-chroma ng-model="myModel" cmyk-colors></ng-chroma>
Preview:
3.6 With alpha channel
<!-- view.html -->
<ng-chroma ng-model="myModel" alpha-colors></ng-chroma>
Preview:
4. Customizing component
All styles can be easily overriden, using following pattern:
<!-- view.html -->
<div class="myContainer">
<ng-chroma ng-model="myModel" alpha-colors></ng-chroma>
</div>
/* style-override.css */
.myContainer ng-chroma .<element-class> { /* ... */ }
Below is shortened list of sub-component classes that you can customize:
.color-picker-selector- Main popup element.margin- Margin between segments.separator- Separator between predefined colors and spectrum selector.main-button,.main-button-preview,.main-caret- Main button invoking popup and its elements.user-color,.user-color-container,.user-color-preview,.user-color-label- Buttons with predefined colors and their components.picker-cmyk,.picker-cmyk-input- Margin between segments.hsl-selector-saturation- Main spectrum saturation container.hsl-selector-saturation-handle- Main spectrum saturation handle.hsl-selector-hue- Main spectrum hue container.hsl-selector-hue-handle- Main spectrum hue handle.alpha-selector- Alpha channel selector
5. Contributing
Feel free to fork, hack, crack and change everything :). Don't hestitate to contact me to be added as contributor.
6. Development
ng-chroma goes with webpack build files with commands defined in package.json.
In order to run build script, run:
npm run build
In order to run watchers on webpack-dev-server with HTML testbed files served, run:
npm run watch