Angular PrimeNG Form ColorPicker动画配置组件

Angular PrimeNG 是一个用于Angular应用程序的前端UI组件库。它是由PrimeTek开发和维护的。PrimeNG帮助开发者使用预先构建的组件和主题在更短的时间内创建令人惊叹的网页界面。在这篇文章中，我们将讨论Angular PrimeNG表格ColorPicker动画配置组件。

ColorPicker组件用于从用户那里获得颜色的输入。它提供了一个漂亮的用户界面，用户可以选择颜色，并且该颜色可以被我们的应用程序以不同的颜色格式访问。可以使用showTransitionOptions和hideTransitionOptions属性定制弹出窗口的显示和隐藏动画的过渡。

语法:

<p-colorPicker 
    [(ngModel)]="..."
    [hideTransitionOptions]="..."
    [showTransitionOptions]="...">
</p-colorPicker>

Angular PrimeNG Form ColorPicker动画配置属性：

• showTransitionOptions。这个属性用于定义显示动画的过渡选项。它接受字符串值，默认值是”.12s cubic-bezier（0, 0, 0.2, 1）”。
• hideTransitionOptions。这个属性用于定义隐藏动画的过渡选项。它接受字符串值，默认值是”.1s linear”。

创建Angular应用程序并安装模块：

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

ng new myapp

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

cd myapp

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

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

项目结构：完成上述步骤后，其结构将如下所示。

Project Structure

例子1：在这个例子中，我们将showTransitionOptions设置为 “1s linear”，所以弹出窗口将需要1秒钟的时间来打开，并将以线性方式动画化。

• app.component.html:

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Form ColorPicker <br>
    Animation Configuration Component</h4>
  
<p-colorPicker 
    [(ngModel)]="selectedColor" 
    [showTransitionOptions]="'1s linear'">
</p-colorPicker>

• app.component.ts:

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    styleUrls: ['./app.component.css'],
    templateUrl: './app.component.html',
})
export class AppComponent {
    selectedColor?: String;
}

• app.module.ts:

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

输出:

例子2：在这个例子中，我们把hideTransitionOptions设置为 “3s”，这样选色器的弹出窗口将需要3秒钟才能关闭。

• app.component.html:

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Form ColorPicker <br>
    Animation Configuration Component</h4>
  
<p-colorPicker 
    [(ngModel)]="selectedColor" 
    [hideTransitionOptions]="'3s'">
</p-colorPicker>

• app.component.ts:

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    styleUrls: ['./app.component.css'],
    templateUrl: './app.component.html',
})
export class AppComponent {
    selectedColor?: String;
}

• app.module.ts:

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

输出: