极客教程Angular PrimeNG表格多选动画配置组件
Angular PrimeNG是一个免费的开源框架，其中有各种组件，Angular开发者可以在他们的应用程序中使用这些组件来增强用户体验，并加快开发速度，因为他们不必从头开始编写所有的东西。在这篇文章中，我们将看到Angular PrimeNG表单多选动画配置组件。
多选组件允许用户从提供的选项集中选择多个选项。多选动画配置属性可以用来控制多选面板的显示和隐藏动画。我们可以将动画配置传递给showTransitionOptions和hideTransitionOptions属性。
Angular PrimeNG表格多选动画配置模式属性：
- option。此属性用于传递一个对象数组，作为多选选项显示。
- defaultLabel。该属性接受一个字符串，作为多选组件的占位符显示。
- optionLabel。此属性接受一个字符串，该字符串是对象的属性名称，将被显示为多选选项的标签。
- showTransitionOptions。该属性用于自定义多选组件的显示过渡属性。
- hideTransitionOptions。该属性用于自定义多选组件的隐藏过渡属性。
语法:
<p-multiSelect
[options]="..."
[(ngModel)]="."..
showTransitionOptions="...
hideTransitionOptions="..."
defaultLabel="..."
optionLabel="...">
</p-multiSelect>
创建应用程序并安装所需模块：
第1步：使用以下命令创建Angular应用程序。
ng new my_app
第2步：创建应用程序后，使用下面写的命令移动到项目文件夹。
cd new_app
第3步：最后，在你的项目目录中安装以下模块。
npm install primeng --save
npm install primeicons --save
项目结构：项目结构将如下图所示。
Project Structure
例子1：在这个例子中，我们将showTransitionOptions属性设置为 “3s linear”，这样Multiselect面板将在3秒内线性打开，并以其默认速度隐藏。
- app.component.html
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h5>
Angular PrimeNG Form MultiSelect
Animation Configuration Component
</h5>
<p-multiSelect class="custom-ms"
[options]="cars"
[(ngModel)]="selected"
showTransitionOptions="3s linear"
defaultLabel="Select Car(s)"
optionLabel="name">
</p-multiSelect>
- app.component.ts
import { Component } from "@angular/core";
interface Car {
id: number;
name: string;
}
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styles: [
`
:host ::ng-deep .custom-ms
.p-multiselect-label {
width: 400px !important;
}
`
]
})
export class AppComponent {
cars: Car[] = [];
selected: Car[] = [];
ngOnInit() {
this.cars = [
{
id: 1,
name: "Vitara Brezza"
},
{
id: 2,
name: "Audi R8"
},
{
id: 3,
name: "Swift Dezire"
},
{
id: 4,
name: "Baleno"
},
{
id: 5,
name: "Ertiga"
},
{
id: 6,
name: "Seltos"
},
];
}
}
- 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 { MultiSelectModule }
from "primeng/multiselect";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
MultiSelectModule,
FormsModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
输出:
例子2：这是另一个例子，说明多选组件的动画配置。在这里，我们将hideTransitionOptions属性设置为 “2s linear”，这样Multiselect面板将在2s内线性地隐藏。
- app.component.html
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>
Angular PrimeNG Form MultiSelect
Animation Configuration Component
</h3>
<h4>
The Multiselect panel will
Hide in 2 seconds linearly
</h4>
<p-multiSelect class="custom-ms"
[options]="cars"
[(ngModel)]="selected"
hideTransitionOptions="2s linear"
defaultLabel="Select Car(s)"
optionLabel="name">
</p-multiSelect>
- app.component.ts
import { Component } from "@angular/core";
interface Car {
id: number;
name: string;
}
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styles: [
`
:host ::ng-deep .custom-ms
.p-multiselect-label {
width: 300px !important;
}
`
]
})
export class AppComponent {
cars: Car[] = [];
selected: Car[] = [];
ngOnInit() {
this.cars = [
{
id: 1,
name: "Vitara Brezza"
},
{
id: 2,
name: "Audi R8"
},
{
id: 3,
name: "Swift Dezire"
},
{
id: 4,
name: "Baleno"
},
{
id: 5,
name: "Ertiga"
},
{
id: 6,
name: "Seltos"
},
];
}
}
- 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 { MultiSelectModule }
from "primeng/multiselect";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
MultiSelectModule,
FormsModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
输出:
