Componente ColorPicker de PrimeNG angular

Angular PrimeNG es un marco de trabajo de código abierto con un amplio conjunto de componentes nativos de la interfaz de usuario de Angular que se utilizan para lograr un gran estilo y este marco se utiliza para crear sitios web receptivos con mucha facilidad. En este artículo, sabremos cómo usar el componente colorPicker en Angular PrimeNG.

Componente colorPicker: Se utiliza para hacer un componente en el que los usuarios pueden seleccionar colores.

Propiedades:

• estilo: se utiliza para establecer el estilo en línea del elemento. Es de tipo de datos de string y el valor predeterminado es nulo.
• styleClass: Se utiliza para establecer la clase de estilo del elemento. Es de tipo de datos de string y el valor predeterminado es nulo.
• en línea: se utiliza para especificar si se muestra como una superposición o no. Es de tipo de datos booleano y el valor predeterminado es falso.
• formato: se utiliza para establecer el formato que se utilizará en el enlace de valor, los formatos admitidos son hexadecimal, RGB y HSB. Es de tipo de datos de string y el valor predeterminado es hexadecimal.
• appendTo: se utiliza para establecer el elemento de destino para adjuntar la superposición. Es de tipo de datos de string y el valor predeterminado es nulo.
• tabindex: se utiliza para establecer el índice del elemento en orden de tabulación. Es de tipo de datos de número y el valor predeterminado es nulo.
• disabled: se utiliza para especificar que el componente debe estar deshabilitado. Es del tipo de datos booleano y el valor predeterminado es falso.
• inputId: es un identificador de ID del elemento de entrada subyacente. Es de tipo de datos de string y el valor predeterminado es nulo.
• baseZIndex: se usa para establecer el valor base de zIndex para usar en capas. Es de tipo de dato numérico, el valor por defecto es 0.
• autoZIndex: Se utiliza para especificar si se gestionan automáticamente las capas. Es del tipo de dato booleano, el valor predeterminado es verdadero.
• showTransitionOptions: se utiliza para establecer las opciones de transición de la animación del espectáculo. Es de tipo de datos de string, el valor predeterminado es .12s cubic-bezier (0,0,0.2,1).
• hideTransitionOptions: se utiliza para establecer las opciones de transición de la animación oculta. Es de tipo de datos de string, el valor predeterminado es .1s lineal.

Eventos:

• onChange: Es una devolución de llamada que se activa cuando se selecciona un color.
• onShow: es una devolución de llamada que se activa cuando se muestra la ventana emergente.
• onHide: es una devolución de llamada que se activa cuando la ventana emergente está oculta.

Estilo:

• p-colorpicker: Es un elemento contenedor de estilo.
• p-colorpicker-overlay: Es un elemento contenedor de estilo en modo superposición.
• p-colorpicker-preview: es la entrada de vista previa en el modo de superposición.
• p-colorpicker-panel: Es un elemento Panel de estilo del selector de color.
• p-colorpicker-content: Es un Wrapper que contiene secciones de color y tonalidad.
• p-colorpicker-color-selector: Es un selector de color.
• p-colorpicker-color: Es un elemento Color de estilo.
• p-colorpicker-color-handle: Es el handle del elemento color.
• p-colorpicker-hue: Es el control deslizante Tono.
• p-colorpicker-hue-handle: Es el controlador del control deslizante de tono.

Creación de aplicaciones angulares e instalación de módulos:

• Paso 1: Cree una aplicación Angular usando el siguiente comando.

  ng new appname

• Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la aplicación, muévase a ella con el siguiente comando.

  cd appname

• Paso 3: Instale PrimeNG en su directorio dado.

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

Estructura del proyecto : después de completar los procesos anteriores, se verá así.

Hay 2 propiedades para usar el selector de color, la primera propiedad usa en línea y la segunda propiedad usa superposición.

Ejemplo 1: En este ejemplo, usaremos una propiedad en línea para seleccionar el color y este es el ejemplo básico que muestra cómo usar el componente 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;
}

Producción:

Ejemplo 2: En este ejemplo, sabremos cómo usar la propiedad de superposición para seleccionar el color en el componente colorPicker. 

• aplicación.componente.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";
}

Producción:

Referencia: https://primefaces.org/primeng/showcase/#/colorpicker