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 |
|
5 | This is a simple color picker based on the cool angular2-color-picker by Alberplz.
|
6 |
|
7 | This 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
|
18 | npm install
|
19 | npm run build
|
20 | ```
|
21 |
|
22 | ### Running the example
|
23 |
|
24 | ```bash
|
25 | npm install
|
26 | npm run start
|
27 | ```
|
28 |
|
29 | ### Installing and usage
|
30 |
|
31 | ```bash
|
32 | npm install ngx-color-picker --save
|
33 | ```
|
34 |
|
35 | ##### Load the module for your app:
|
36 |
|
37 | ```javascript
|
38 | import { 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
|
143 | openDialog() // Opens the color picker dialog if not already open.
|
144 | closeDialog() // Closes the color picker dialog if not already closed.
|
145 | ```
|