ColorPicker

Used for color selection.
Import

When To Use#

Used when the user needs to customize the color selection.

Examples

The simplest usage.

      Loading...
    
#1677ff

The default text of the rendering trigger, effective when nzShowText is true.

      Loading...
    

Disabled color alpha.

      Loading...
    

Triggers event for customizing color panels, provide options click and hover.

      Loading...
    
HEX: #1677ff
HSB: hsb(215, 91%, 100%)
RGB: rgb(22, 119, 255)

Encoding formats, support HEX, HSB, RGB.

      Loading...
    
#1677ff

<nz-color-picker formControlName="color"></nz-color-picker>

      Loading...
    




The trigger has three sizes: large, medium and small.

      Loading...
    
#1677ff

Set to disabled state.

      Loading...
    

Clear Color.

      Loading...
    

Triggers for customizing color panels.

      Loading...
    

Color Block.

      Loading...
    

API#

nz-color-picker#

ParameterDescriptionTypeDefault
[nzFormat]Format of color'rgb' | 'hex' | 'hsb''hex'
[nzValue]Value of colorstring | NzColor-
[nzSize]Setting the trigger size'large' | 'small' | 'default''default'
[nzDefaultValue]Default value of colorstring | NzColorfalse
[nzAllowClear]Allow clearing color selectedbooleanfalse
[nzTrigger]ColorPicker trigger mode'hover' | 'click''click'
[nzShowText]Show color textbooleanfalse
[nzOpen]Whether to show popupsbooleanfalse
[nzDisabled]Disable ColorPickerbooleanfalse
[nzDisabledAlpha]Disable Alphabooleanfalse
[nzTitle]Setting the title of the color pickerTemplateRef<void> | string-
(nzOnChange)Callback when value is changedEventEmitter<{ color: NzColor; format: string }>-
(nzOnClear)Called when clearEventEmitter<boolean>-
(nzOnFormatChange)Callback when format is changedEventEmitter<'rgb'|'hex'|'hsb'>-
(nzOnOpenChange)Callback for opening the color panelEventEmitter<boolean>-

nz-color-block#

ParameterDescriptionTypeDefault
[nzColor]Module colorsstring'#1677ff'
[nzSize]Color block size'large' | 'small' | 'default''default'
[nzOnClick]Callbacks for clicking on color blocksEventEmitter<boolean>-

NzColor#

ParameterDescriptionTypeDefault
toHexConvert to hex format characters, the return type like: 1677ff() => string-
toHexStringConvert to hex format color string, the return type like: #1677ff() => string-
toHsbConvert to hsb object() => ({ h: number, s: number, b: number, a number })-
toHsbStringConvert to hsb format color string, the return type like: hsb(215, 91%, 100%)() => string-
toRgbConvert to rgb object() => ({ r: number, g: number, b: number, a number })-
toRgbStringConvert to rgb format color string, the return type like: rgb(22, 119, 255)() => string-