前言
ngx-color-picker 是一款基于 Angular 的颜色选择器，提供了丰富的颜色选择方式，支持多种颜色格式的转换，并支持颜色选择器的自定义主题。
安装
使用 npm 安装 ngx-color-picker：
npm install ngx-color-picker --save
使用
在需要使用的组件中引入 NgxColorPickerModule 并导入：
import { NgxColorPickerModule } from 'ngx-color-picker'; @NgModule({ imports: [ NgxColorPickerModule ] })
在模板中使用 ngx-color-picker：
<ngx-color-picker [(color)]="color"></ngx-color-picker>
在组件中定义颜色值：
color = '#ff0000';
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
<ngx-color-picker [color]="'#ff0000'"></ngx-color-picker>
@Output() colorChange
当颜色发生变化时，会触发该事件。
<ngx-color-picker (colorChange)="onColorChange($event)"></ngx-color-picker>
@Input() presets
设置或获取 ngx-color-picker 的预设颜色集合。
presets = ['#ff0000', '#00ff00', '#0000ff'];
<ngx-color-picker [(color)]="color" [presets]="presets"></ngx-color-picker>
@Input() presetEmptyMessage
当预设颜色集合为空时，提示用户的信息。
<ngx-color-picker [(color)]="color" [presets]="presets" presetEmptyMessage="No colors available" ></ngx-color-picker>
@Input() disabled
设置是否禁用 ngx-color-picker。
<ngx-color-picker [(color)]="color" [disabled]="disabled"></ngx-color-picker>
@Input() format
设置或获取颜色格式，可以是以下格式：
- hex
- rgb
- rgba
- hsl
- hsla
<ngx-color-picker [(color)]="color" [format]="'hsl'"></ngx-color-picker>
@Input() alpha
设置或获取是否显示 alpha 通道。
<ngx-color-picker [(color)]="color" [alpha]="true"></ngx-color-picker>
@Input() hue
设置或获取是否显示 hue 选择器。
<ngx-color-picker [(color)]="color" [hue]="true"></ngx-color-picker>
@Input() saturation
设置或获取是否显示饱和度选择器。
<ngx-color-picker [(color)]="color" [saturation]="true"></ngx-color-picker>
@Input() lightness
设置或获取是否显示亮度选择器。
<ngx-color-picker [(color)]="color" [lightness]="true"></ngx-color-picker>
@Input() alphaChannel
设置或获取 alpha 通道的名称。
<ngx-color-picker [(color)]="color" [alphaChannel]="'opacity'"></ngx-color-picker>
@Input() fallbackColor
当输入的颜色值无效时的默认颜色值。
<ngx-color-picker [(color)]="color" [fallbackColor]="'#ffffff'"></ngx-color-picker>
@Input() customTheme
自定义主题，可以设置以下属性：
- colorBoxBorder
- colorBoxHeight
- colorBoxMargin
- colorBoxWidth
- hueHeight
- hueWidth
- swatchWidth
- swatchHeight
.custom-color-picker-theme { --color-box-width: 150px; --hue-height: 20px; --swatch-width: 30px; }
<ngx-color-picker [(color)]="color" [customTheme]="customTheme" class="custom-color-picker-theme"></ngx-color-picker>
示例代码
-- -------------------- ---- ------- ----------------- ----------------- ------------------- ---------------------- ------ ---------- --------------------- ---------------- --------------- ------------ ------------------- ------------------ -------------------------- --------------------------- --------------------------- ------------------------------------- --------------------------------- --------------------展开代码
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ------------------- --------- ------------------ --------------------------------------- -- ------ ----- -------------------- - ----- - ---------- ------- - ----------- ---------- ----------- -------- - ------ ----------- - - -------------------- -------- --------------- ------- ----------------- ------- -- -------------------- ------- - ------------------- - -展开代码
结束语
ngx-color-picker 提供了丰富的颜色选择方式和多种颜色格式的转换功能，并支持自定义主题，是一个十分实用的前端组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/62063
