ngx-color-picker
安装
npm install ngx-color-picker --save
引入
-
在module中引入
import { ColorPickerModule } from 'ngx-color-picker'; @NgModule({ ... imports: [ ... ColorPickerModule ] }) -
在html中使用
<input [(colorPicker)]="color" [style.background]="color"/>
配置与事件
| 配置与事件 | 说明 | 配置参数类型与事件参数 | 默认值 |
|---|---|---|---|
| [disabled] | 禁用颜色选择器对话框的打开 | boolean | false |
| [(colorPicker)] | 颜色选择器对话框中显示的颜色 | string | |
| [cpWidth] | 使用此选项设置颜色选择器对话框宽度 | string | '230px' |
| [cpHeight] | 使用此选项强制设置颜色选择器对话框高度 | string | ‘auto’ |
| [cpToggle] | 设置颜色选择器的默认打开/关闭状态 | boolean | false |
| [cpOutputFormat] | 输出的颜色格式： 'hex', 'rgba', 'hsla' | string('hex', 'rgba', 'hsla') | 'hex' |
| [cpAlphaChannel] | 是否可以设置Alpha：'enabled', 'disabled', 'always' | string('enabled', 'disabled', 'always') | 'enabled' |
| [cpFallbackColor] | 当颜色格式错误或没有定义时的默认颜色值 | string | '#fff' |
| [cpPosition] | 颜色对话框的位置：'right', 'left', 'top', 'bottom' | string('right', 'left', 'top', 'bottom') | ‘right’ |
| [cpPositionOffset] | 对话框相对于指令元素的偏移百分比 | string | 0% |
| [cpPositionRelativeToArrow] | 对话框位置是否相对于对话框箭头计算的 | boolean | false |
| [cpPresetLabel] | 如果提供了预设颜色，请标记预设颜色的文本 | string | 'Preset colors' |
| [cpPresetColors] | 在颜色选择器对话框中显示的预设颜色的数组 | array | [] |
| [cpDisableInput] | 禁用/隐藏对话框中的颜色输入字段 | boolean | false |
| [cpDialogDisplay] | 对话框中定位模式: 'popup', 'inline' | string('popup', 'inline') | ' popup' |
| [cpIgnoredElements] | 当单击时将被忽略的HTML元素数组 | array | [] |
| [cpSaveClickOutside] | 当用户点击外部时，保存当前选定的颜色。 | boolean | true |
| [cpOKButton] | 显示一个保存颜色的OK / Apply按钮 | boolean | false |
| [cpOKButtonText] | OK/ Apply按钮显示的文本内容 | string | 'OK' |
| [cpOKButtonClass] | 定制OK/ Apply按钮额外的class | string | '' |
| [cpCancelButton] | 显示一个重置颜色的Cancel / Reset按钮 | boolean | false |
| [cpCancelButtonText] | Cancel / Reset按钮显示的文本内容 | string | ' Cancel' |
| [cpCancelButtonClass] | 定制Cancel / Reset按钮额外的class | string | '' |
| [cpAddColorButton] | 显示添加颜色按钮，将颜色添加到预设值中 | boolean | false |
| [cpAddColorButtonText] | 添加颜色按钮显示的文本内容 | string | 'Add color' |
| [cpAddColorButtonClass] | 定制添加颜色按钮额外的class | string | '' |
| [cpRemoveColorButtonClass] | 定制移除颜色按钮额外的class | string | '' |
| [cpMaxPresetColorsLength] | 使用此选项设置预设中允许的颜色数量 | number | 8 |
| [cpPresetEmptyMessage] | 当选择器没有颜色值时的文字显示 | string | 'No colors added' |
| [cpPresetEmptyMessageClass] | 当选择器没有颜色值时的文字样式类 | string | '' |
| [cpUseRootViewContainer] | 创建对话框组件是否在根容器中 | boolean | false |
| (colorPickerOpen) | 当颜色选择器对话框打开时触发 | value: string | |
| (colorPickerClose) | 当颜色选择器对话框关闭时触发 | value: string | |
| (colorPickerChange) | 当颜色选择器所选颜色改变时触发 | value: string | |
| (colorPickerCancel) | 当颜色选择器颜色选择取消时(取消按钮被按下时)触发 | void | |
| (colorPickerSelect) | 当颜色选择器颜色选择确定时(OK按钮被按下时)触发 | value: string | |
| (cpToggleChange) | 对话框的状态，当对话框打开/关闭时触发 | open: boolean | |
| (cpInputChange) | 输入名称及其值，当用户通过输入改变颜色时触发 | {input: string, value: number | string, color: string} | |
| (cpSliderChange) | 滑块名称及其值，当用户通过滑块更改颜色时触发 | {slider: string, value: number | string, color: string} | |
| (cpSliderDragEnd) | 滑块名称和当前颜色，当滑块拖动结束时触发(mouseup,touchend) | 同(cpSliderChange) | |
| (cpSliderDragStart) | 滑块名称和当前颜色，当滑块拖动开始时触发（mousedown,touchstart） | 同(cpSliderChange) | |
| (cpPresetColorsChange) | 预设颜色，按“添加颜色”按钮时触发 | value: array |
