ColorPicker颜色选择器

何时使用#

当用户需要自定义颜色选择的时候使用。

引入模块#

module:

import { NzColorPickerModule } from 'ng-zorro-antd/color-picker';

standalone:

import { NzColorPickerComponent } from 'ng-zorro-antd/color-picker'

代码演示

最简单的用法。

expand codeexpand code
      加载中
    
#1677ff

渲染触发器的默认文本, nzShowTexttrue 时生效。

expand codeexpand code
      加载中
    

禁用颜色透明度。

expand codeexpand code
      加载中
    

自定义颜色面板的触发事件,提供 clickhover 两个选项。

expand codeexpand code
      加载中
    
HEX: #1677ff
HSB: hsb(215, 91%, 100%)
RGB: rgb(22, 119, 255)

编码格式,支持 HEXHSBRGB

expand codeexpand code
      加载中
    
#1677ff

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

expand codeexpand code
      加载中
    




触发器有大、中、小三种尺寸

expand codeexpand code
      加载中
    
#1677ff

设置为禁用状态。

expand codeexpand code
      加载中
    

清除已选择的颜色。

expand codeexpand code
      加载中
    

自定义颜色面板的触发器。

expand codeexpand code
      加载中
    

最简单的用法。

expand codeexpand code
      加载中
    

API#

nz-color-picker#

参数说明类型默认值
[nzFormat]颜色格式rgbhexhsbhex
[nzValue]颜色的值stringNzColor-
[nzSize]设置触发器大小largedefaultsmalldefault
[nzDefaultValue]颜色默认的值stringNzColor-
[nzAllowClear]允许清除选择的颜色booleanfalse
[nzTrigger]颜色选择器的触发模式hoverclickclick
[nzShowText]显示颜色文本booleanfalse
[nzOpen]是否显示弹出窗口booleanfalse
[nzDisabled]禁用颜色选择器booleanfalse
[nzDisabledAlpha]禁用透明度booleanfalse
[nzTitle]设置颜色选择器的标题TemplateRef<void>string-
(nzOnChange)颜色变化的回调EventEmitter<{ color: NzColor; format: string }>-
(nzOnClear)清除的回调EventEmitter<boolean>-
(nzOnFormatChange)颜色格式变化的回调EventEmitter<'rgb'|'hex'|'hsb'>-
(nzOnOpenChange)打开颜色面板的回调EventEmitter<boolean>-

nz-color-block#

参数说明类型默认值
[nzColor]模块的颜色string#1677ff
[nzSize]色彩块的大小largedefaultsmalldefault
[nzOnClick]点击色彩块的回调EventEmitter<boolean>-

NzColor#

参数说明类型默认值
toHex转换成 hex 格式字符,返回格式如:1677ff() => string-
toHexString转换成 hex 格式颜色字符串,返回格式如:#1677ff() => string-
toHsb转换成 hsb 对象() => ({ h: number, s: number, b: number, a number })-
toHsbString转换成 hsb 格式颜色字符串,返回格式如:hsb(215, 91%, 100%)() => string-
toRgb转换成 rgb 对象() => ({ r: number, g: number, b: number, a number })-
toRgbString转换成 rgb 格式颜色字符串,返回格式如:rgb(22, 119, 255)() => string-