Input - ColorPicker - 《PrimeNG Document》

Documentation
Source

ColorPickerColorPicker is an input component to select a color.

Documentation

Import


import {ColorPickerModule} from 'primeng/colorpicker';

Getting Started

ColorPicker uses ngModel directive to bind a value.


<p-colorPicker [(ngModel)]="color"></p-colorPicker>


export class MyComponent {
    color: string;
}

Formats

Default color format to use in value binding is "hex" and other possible values are "rgb" and "hsb". Example below has 3 colorpickers having default values with different formats.


<p-colorPicker [(ngModel)]="color1"></p-colorPicker>
<p-colorPicker [(ngModel)]="color2" format="rgb"></p-colorPicker>
<p-colorPicker [(ngModel)]="color3" format="hsb"></p-colorPicker>


export class MyComponent {
    color1: string;
    color2: any = {
        r: 100, g: 130, b: 150
    };
    color3: any = {
        h: 100, s: 50, b: 50
    };
}

Overlay and Inline

ColorPicker can be displayed as inline or as an overlay (default) using the "inline" property.


<p-colorPicker [(ngModel)]="color1" ></p-colorPicker>
<p-colorPicker [(ngModel)]="color2" [inline]="true"></p-colorPicker>

Model Driven Forms

Colorpicker can be used in a model driven form as well.


<p-colorPicker formControlName="color"></p-colorPicker>

Animation Configuration

Transition of the open and hide animations can be customized using the showTransitionOptions and hideTransitionOptions properties, example below disables the animations altogether.


<p-colorPicker [showTransitionOptions]="'0ms'" [hideTransitionOptions]="'0ms'" formControlName="color"></p-colorPicker>

Properties

Name	Type	Default	Description
style	string	null	Inline style of the component.
styleClass	string	null	Style class of the component.
inline	boolean	false	Whether to display as an overlay or not.
format	string	hex	Format to use in value binding, supported formats are "hex", "rgb" and "hsb".
appendTo	any	null	Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element.
tabindex	number	null	Index of the element in tabbing order.
disabled	boolean	false	When present, it specifies that the component should be disabled.
inputId	string	null	Identifier of the focus input to match a label defined for the dropdown.
baseZIndex	number	0	Base zIndex value to use in layering.
autoZIndex	boolean	true	Whether to automatically manage layering.
showTransitionOptions	string	225ms ease-out	Transition options of the show animation.
hideTransitionOptions	string	195ms ease-in	Transition options of the hide animation.

Events

Name	Parameters	Description
onChange	event.originalEvent: Browser event event.value: Selected color	Callback to invoke when a color is selected.

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name	Element
ui-colorpicker	Container element.
ui-colorpicker-overlay	Container element in overlay mode.
ui-colorpicker-preview	Preview input in overlay mode.
ui-colorpicker-panel	Panel element of the colorpicker.
ui-colorpicker-content	Wrapper that contains color and hue sections.
ui-colorpicker-color-selector	Color selector container.
ui-colorpicker-color	Color element.
ui-colorpicker-color-handle	Handle of the color element.
ui-colorpicker-hue	Hue slider.
ui-colorpicker-hue-handle	Handle of the hue slider.

Dependencies

None.

Source

View on GitHub


<h3 class="first">Inline</h3>
<p-colorPicker [(ngModel)]="color1" [inline]="true"></p-colorPicker>
<p style="margin-top:.5em">Selected Color: <span style="display:inline-block;width:32px;height:32px;vertical-align:middle" [style.backgroundColor]="color1"></span> {{color1}} </p>    
<h3>Overlay</h3>
<p-colorPicker [(ngModel)]="color2"></p-colorPicker>
<p style="margin-top:.5em">Selected Color: <span [ngStyle]="{'color':color2}">{{color2}}</span></p>


export class ColorPickerDemo {
    color1: string;
    color2: string = '#1976D2';
}