UNPKG

6.74 kBMarkdownView Raw
1# Angular Color Picker
2
3<a href="https://badge.fury.io/js/ngx-color-picker"><img src="https://badge.fury.io/js/ngx-color-picker.svg" align="right" alt="npm version" height="18"></a>
4
5This is a simple color picker based on the cool angular2-color-picker by Alberplz.
6
7This documentation is for the latest 5/6.x.x version which requires Angular 5 or newer. For Angular 4 you need to use the latest 4.x.x version. Documentation for the 4.x.x can be found from <a href="https://github.com/zefoy/ngx-color-picker/tree/4.x.x/">here</a>.
8
9### Quick links
10
11[Example application](https://zefoy.github.io/ngx-color-picker/)
12 |
13[StackBlitz example](https://stackblitz.com/github/zefoy/ngx-color-picker/tree/master)
14
15### Building the library
16
17```bash
18npm install
19npm run build
20```
21
22### Running the example
23
24```bash
25npm install
26npm run start
27```
28
29### Installing and usage
30
31```bash
32npm install ngx-color-picker --save
33```
34
35##### Load the module for your app:
36
37```javascript
38import { ColorPickerModule } from 'ngx-color-picker';
39
40@NgModule({
41 ...
42 imports: [
43 ...
44 ColorPickerModule
45 ]
46})
47```
48
49##### Use it in your HTML template:
50
51```html
52<input [(colorPicker)]="color" [style.background]="color"/>
53```
54
55```javascript
56[colorPicker] // The color to show in the color picker dialog.
57
58[cpWidth] // Use this option to set color picker dialog width ('230px').
59[cpHeight] // Use this option to force color picker dialog height ('auto').
60
61[cpToggle] // Sets the default open / close state of the color picker (false).
62[cpDisabled] // Disables opening of the color picker dialog via toggle / events.
63
64[cpColorMode] // Dialog color mode: 'color', 'grayscale', 'presets' ('color').
65
66[cpCmykEnabled] // Enables CMYK input format and color change event (false).
67
68[cpOutputFormat] // Output color format: 'auto', 'hex', 'rgba', 'hsla' ('auto').
69[cpAlphaChannel] // Alpha mode: 'enabled', 'disabled', 'always', 'forced' ('enabled').
70
71[cpFallbackColor] // Used when the color is not well-formed or is undefined ('#000').
72
73[cpPosition] // Dialog position: 'auto', 'top', 'bottom', 'left', 'right',
74 // 'top-left', 'top-right', 'bottom-left', 'bottom-right' ('auto').
75[cpPositionOffset] // Dialog offset percentage relative to the directive element (0%).
76[cpPositionRelativeToArrow] // Dialog position is calculated relative to dialog arrow (false).
77
78[cpPresetLabel] // Label text for the preset colors if any provided ('Preset colors').
79[cpPresetColors] // Array of preset colors to show in the color picker dialog ([]).
80
81[cpDisableInput] // Disables / hides the color input field from the dialog (false).
82
83[cpDialogDisplay] // Dialog positioning mode: 'popup', 'inline' ('popup').
84 // popup: dialog is shown as popup (fixed positioning).
85 // inline: dialog is shown permanently (static positioning).
86
87[cpIgnoredElements] // Array of HTML elements that will be ignored when clicked ([]).
88
89[cpSaveClickOutside] // Save currently selected color when user clicks outside (true).
90[cpCloseClickOutside] // Close the color picker dialog when user clicks outside (true).
91
92[cpOKButton] // Show an OK / Apply button which saves the color (false).
93[cpOKButtonText] // Button label text shown inside the OK / Apply button ('OK').
94[cpOKButtonClass] // Additional class for customizing the OK / Apply button ('').
95
96[cpCancelButton] // Show a Cancel / Reset button which resets the color (false).
97[cpCancelButtonText] // Button label text shown inside the Cancel / Reset button ('Cancel').
98[cpCancelButtonClass] // Additional class for customizing the Cancel / Reset button ('').
99
100[cpAddColorButton] // Show an Add Color button which add the color into preset (false).
101[cpAddColorButtonText] // Button label text shown inside the Add Color button ('Add color').
102[cpAddColorButtonClass] // Additional class for customizing the Add Color button ('').
103
104[cpRemoveColorButtonClass] // Additional class for customizing the Remove Color button ('').
105
106[cpPresetColorsClass] // Additional class for customizing the Preset Colors container ('').
107
108[cpMaxPresetColorsLength] // Use this option to set the max colors allowed in presets (null).
109
110[cpPresetEmptyMessage] // Message for empty colors if any provided used ('No colors added').
111[cpPresetEmptyMessageClass] // Additional class for customizing the empty colors message ('').
112
113[cpUseRootViewContainer] // Create dialog component in the root view container (false).
114 // Note: The root component needs to have public viewContainerRef.
115
116(colorPickerOpen) // Current color value, send when dialog is opened (value: string).
117(colorPickerClose) // Current color value, send when dialog is closed (value: string).
118
119(colorPickerChange) // Changed color value, send when color is changed (value: string).
120(colorPickerCancel) // Color select canceled, send when Cancel button is pressed (void).
121(colorPickerSelect) // Selected color value, send when OK button is pressed (value: string).
122
123(cpToggleChange) // Status of the dialog, send when dialog is opened / closed (open: boolean).
124
125(cpInputChange) // Input name and its value, send when user changes color through inputs
126 // ({input: string, value: number | string, color: string})
127
128(cpSliderChange) // Slider name and its value, send when user changes color through slider
129 // ({slider: string, value: number | string, color: string})
130(cpSliderDragStart) // Slider name and current color, send when slider dragging starts (mousedown,touchstart)
131 // ({slider: string, color: string})
132(cpSliderDragEnd) // Slider name and current color, send when slider dragging ends (mouseup,touchend)
133 // ({slider: string, color: string})
134
135(cpCmykColorChange) // Outputs the color as CMYK string if CMYK is enabled (value: string).
136
137(cpPresetColorsChange) // Preset colors, send when 'Add Color' button is pressed (value: array).
138```
139
140##### Available control / helper functions (provided by the directive):
141
142```javascript
143openDialog() // Opens the color picker dialog if not already open.
144closeDialog() // Closes the color picker dialog if not already closed.
145```