UPDATED TO ANGULAR 10/11
FORKED FROM https://github.com/bytelabsco/ngx-color-selector
ngx-color-selector provides a simple interface for selecting from a predefined set of colors.
Clone the repository and run
npm install
npm run playground
then navigate in a browser to
http://localhost:3000
npm install --save ngx-color-selector
Import the BytelabsColorSelectorModule
in your application module:
import { NgModule } from '@angular/core';
// ... Other imports
import { BytelabsColorSelectorModule } from 'sngx-color-selector';
@NgModule({
imports: [
// ...
BytelabsColorSelectorModule
],
/...
})
export class AppModule {}
In your component, set up a variable to store your color:
import { Component } from '@angular/core';
import { IColor } from 'ngx-color-selector';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public currentColor: IColor = {
hex: "#000"
}
}
In your template, use the component:
<bytelabs-color-selector [(color)]="currentColor"></bytelabs-color-selector>
The following options are defined in IColorSelectorConfig
and a basic implementation is provided in ColorSelectorConfig
using reasonable defaults from the constant COLOR_SELECTOR_CONFIG_DEFAULTS
. Those can all be found in the color-selector-config.ts file.
Option | Type | Default | Description |
---|---|---|---|
palette | IColor[] | Flat Colors | An array of predefined IColor objects to display on the palette. Some pre-made collections using colors from htmlcolorcodes.com are provided. |
direction | PaletteDirection (enum) | Columns (1) | Direction to fill the color palette, either rows first or columns first |
itemSize | ISwatchSize | {height: 20, width: 20} | Size of each swatch on the palette, and used for the preview color |
itemsPer | number | 10 | Number of items to display before moving to the next row or column |
position | PalettePosition (enum) | BottomRight (3) | Position to place the palette, relative to the preview color, when displayed |
Rows, // 0
Columns // 1
TopLeft, // 0
TopRight, // 1
BottomLeft; // 2
BottomRight // 3
In your component you can create a variable to hold your custom options, or you can provide them directly to the component in your template:
import { Component } from '@angular/core';
import { IColorSelectorConfig, IColor, PalettePosition } from 'ngx-color-selector';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',s
styleUrls: ['./app.component.css']
})
export class AppComponent {
// You can just provide an object containing the options you want to override
public colorSelectorOptions : IColorSelectorConfig = {
position: PalettePosition.BottomLeft
};
public currentColor: IColor = {
hex: "#000"
}
}
In your template, pass your option overrides with the component:
<bytelabs-color-selector [(color)]="currentColor" [options]="colorSelectorOptions" ></bytelabs-color-selector>
Or just provide your overrides in the template:
<bytelabs-color-selector [(color)]="currentColor" [options]="{itemsPer: 5}" ></bytelabs-color-selector>
jvandemo/generator-angular2-library for their excellent Angular2 Library Yeoman Generator
HTMLColorCodes.com for the pre-made color charts.
Shout-out to scoutzfiction
This project is licensed under the MIT license. Se the LICENSE for more info.