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 |