前言
ngx-color-picker 是一款基于 Angular 的颜色选择器,提供了丰富的颜色选择方式,支持多种颜色格式的转换,并支持颜色选择器的自定义主题。
安装
使用 npm 安装 ngx-color-picker:
--- ------- ---------------- ------
使用
在需要使用的组件中引入 NgxColorPickerModule 并导入:
------ - -------------------- - ---- ------------------- ----------- -------- - -------------------- - --
在模板中使用 ngx-color-picker:
----------------- -------------------------------------
在组件中定义颜色值:
----- - ----------
API
@Input() color
设置或获取 ngx-color-picker 的颜色值,可以是以下格式的字符串:
- #RRGGBB
- #RGB
- rgb(r, g, b)
- rgba(r, g, b, a)
- hsl(h, s%, l%)
- hsla(h, s%, l%, a)
- color name
----------------- ---------------------------------------
@Output() colorChange
当颜色发生变化时,会触发该事件。
----------------- ---------------------------------------------------------
@Input() presets
设置或获取 ngx-color-picker 的预设颜色集合。
------- - ----------- ---------- -----------
----------------- ----------------- ---------------------------------------
@Input() presetEmptyMessage
当预设颜色集合为空时,提示用户的信息。
----------------- ----------------- ------------------- ---------------------- ------ ---------- --------------------
@Input() disabled
设置是否禁用 ngx-color-picker。
----------------- ----------------- -----------------------------------------
@Input() format
设置或获取颜色格式,可以是以下格式:
- hex
- rgb
- rgba
- hsl
- hsla
----------------- ----------------- ------------------------------------
@Input() alpha
设置或获取是否显示 alpha 通道。
----------------- ----------------- ----------------------------------
@Input() hue
设置或获取是否显示 hue 选择器。
----------------- ----------------- --------------------------------
@Input() saturation
设置或获取是否显示饱和度选择器。
----------------- ----------------- ---------------------------------------
@Input() lightness
设置或获取是否显示亮度选择器。
----------------- ----------------- --------------------------------------
@Input() alphaChannel
设置或获取 alpha 通道的名称。
----------------- ----------------- ----------------------------------------------
@Input() fallbackColor
当输入的颜色值无效时的默认颜色值。
----------------- ----------------- -----------------------------------------------
@Input() customTheme
自定义主题,可以设置以下属性:
- colorBoxBorder
- colorBoxHeight
- colorBoxMargin
- colorBoxWidth
- hueHeight
- hueWidth
- swatchWidth
- swatchHeight
-------------------------- - ------------------ ------ ------------- ----- --------------- ----- -
----------------- ----------------- --------------------------- -----------------------------------------------------
示例代码
----------------- ----------------- ------------------- ---------------------- ------ ---------- --------------------- ---------------- --------------- ------------ ------------------- ------------------ -------------------------- --------------------------- --------------------------- ------------------------------------- --------------------------------- --------------------
------ - --------- - ---- ---------------- ------------ --------- ------------------- --------- ------------------ --------------------------------------- -- ------ ----- -------------------- - ----- - ---------- ------- - ----------- ---------- ----------- -------- - ------ ----------- - - -------------------- -------- --------------- ------- ----------------- ------- -- -------------------- ------- - ------------------- - -
结束语
ngx-color-picker 提供了丰富的颜色选择方式和多种颜色格式的转换功能,并支持自定义主题,是一个十分实用的前端组件。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/62063