Angular PrimeNG ColorPicker组件

Angular PrimeNG是一个开源框架，它拥有丰富的原生Angular UI组件，这些组件被用来做伟大的造型，这个框架被用来制作响应式网站，非常容易。在这篇文章中，我们将了解如何在Angular PrimeNG中使用colorPicker组件。

colorPicker组件：它用于制作一个用户可以选择颜色的组件。

属性：

style。它用于设置元素的内联风格。它是字符串数据类型，默认值为空。
styleClass。它用于设置元素的风格类别。它是字符串数据类型，默认值为空。
inline。它用于指定是否以叠加方式显示。它是布尔数据类型，默认值是false。
format。它用于设置值绑定中使用的格式，支持的格式有十六进制、RGB和HSB。它是字符串数据类型，默认值是十六进制。
appendTo。它用于设置目标元素来附加覆盖。它是字符串数据类型，默认值为空。
tabindex。它用于设置元素在标签顺序中的索引。它的数据类型为数字，默认值为空。
disabled:它用于指定该组件应该被禁用。它是布尔数据类型，默认值是false。
inputId。这是一个基础输入元素的ID标识符。它的数据类型为字符串，默认值为空。
baseZIndex。它用于设置分层时使用的基础ZIndex值。它是数字数据类型，默认值是0。
autoZIndex。它用于指定是否自动管理分层。它是布尔数据类型，默认值为真。
showTransitionOptions。用来设置显示动画的过渡选项。它是字符串数据类型，默认值是0.12s cubic-bezier（0,0,0.2,1）。
hideTransitionOptions。用来设置隐藏动画的过渡选项。它是字符串数据类型，默认值是0.1s线性。

Events:

onChange。它是一个回调，当一个颜色被选中时被触发。
onShow。这是一个回调，当弹出式窗口被显示时被触发。
onHide。它是一个回调，当弹出窗口被隐藏时被触发。

Styling:

p-colorpicker：它是一个风格化的容器元素。
p-colororpicker-overlay。它是一个叠加模式下的造型容器元素。
p-colororpicker-preview。它是叠加模式下的预览输入。
p-colorpicker-panel。它是colorpicker的一个造型面板元素。
p-colorpicker-content。它是一个Wrapper，包含颜色和色调部分。
p-colorpicker-color-selector。它是一个颜色选择器。
p-colorpicker-color：它是一个风格化的颜色元素。
p-colorpicker-color-handle。它是颜色元素的句柄。
p-colorpicker-hue。它是色调滑块。
p-colorpicker-hue-handle。它是色调滑块的手柄。

创建Angular应用程序和模块安装。

第1步：使用以下命令创建一个Angular应用程序。

ng new appname

第2步：在创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

第3步：在你给定的目录中安装PrimeNG。

npm install primeng --save
npm install primeicons --save

项目结构 。在完成上述过程后，它将看起来像如下。

Angular PrimeNG ColorPicker组件

有两个属性可以使用颜色选择器，第一个属性是使用内联，第二个属性是使用覆盖。

例子1：在这个例子中，我们将使用一个内联属性来选择颜色，这就是展示如何使用colorPicker组件的基本例子。

<h2>GeeksforGeeks</h2>
<h5>PrimeNG colorPicker component</h5>
<p-colorPicker [(ngModel)]="selectColor" [inline]="true"> </p-colorPicker>

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
  
import { AppComponent } from "./app.component";
  
import { ColorPickerModule } from "primeng/colorpicker";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ColorPickerModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

import { Component } from "@angular/core";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  selectColor: string;
}

输出:

Angular PrimeNG ColorPicker组件

例子2：在这个例子中，我们将知道如何使用overlay属性来选择colorPicker组件中的颜色。

app.component.html:

<h2>GeeksforGeeks</h2>
<h5>PrimeNG colorPicker component</h5>
<p-colorPicker [inline]="false" [(ngModel)]="gfg"></p-colorPicker>

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
  
import { AppComponent } from './app.component';
  
import { ColorPickerModule } from 'primeng/colorpicker';
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ColorPickerModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

import { Component } from "@angular/core";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  gfg: string = "#05f211";
}

输出:

Angular PrimeNG ColorPicker组件