Ng-chroma NPM | npm.io

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