在前端开发过程中，经常需要为应用程序设计配色方案。而使用 color-picker-angular 这个 npm 包可以快速地实现色彩选择器，方便开发者选择合适的颜色。
安装
安装 color-picker-angular 的命令很简单：
npm install color-picker-angular --save
使用
导入
在要使用这个组件的 module 中需要导入 color-picker-angular：
import { ColorPickerModule } from 'color-picker-angular';
@NgModule({
imports: [
ColorPickerModule
]
})
export class AppModule { }基本用法
在模板文件中添加 color-picker-angular 组件，并绑定输出属性以获取用户所选择的颜色：
<ngx-color-picker [(color)]="selectedColor"></ngx-color-picker>
然后，即可使用 selectedColor 变量来获取用户选择的颜色。
自定义颜色值范围
通过设置 colorPickerColors 属性，可以指定 color-picker-angular 可供用户选择的颜色值范围：
<ngx-color-picker [(color)]="selectedColor" [colorPickerColors]="['#FFFFFF', '#000000', '#FF0000', '#00FF00', '#0000FF']"></ngx-color-picker>
自定义输入框
通过设置 inputStyle 属性，可以自定义 color-picker-angular 中输入颜色值的样式：
<ngx-color-picker [(color)]="selectedColor" [inputStyle]="{ 'width': '200px', 'height': '30px', 'font-size': '16px' }"></ngx-color-picker>自定义标签文字
通过设置 label 属性，可以替换 color-picker-angular 中默认的标签：
<ngx-color-picker [(color)]="selectedColor" label="选择颜色"></ngx-color-picker>
示例代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ---------
--------- -
-----
-------------
----------------- ------------------------- -------------------------------- ---------- ---------- ---------- -------------------------------
---- ------------------------ ------------------ ------- ----- ------ -------------
------
-
--
------ ----- ------------ -
-------------- ------ - ----------
-总结
color-picker-angular 是一个非常易于使用的 npm 包，可以让开发者迅速地实现色彩选择器，方便快捷地为应用程序进行配色设计。尽管涉及了一些自定义选项，但它仍然拥有简洁的 API，并可以与 Angular 框架轻松集成。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556d681e8991b448d3ae7