ng-color-picker的使用

·  阅读 1410

ngx-color-picker

  1. Demo地址
  2. github地址

安装

npm install ngx-color-picker --save
复制代码

引入

  1. 在module中引入

    import { ColorPickerModule } from 'ngx-color-picker';
    
    @NgModule({
      ...
      imports: [
        ...
        ColorPickerModule
      ]
    })
    复制代码
  2. 在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
分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改