Компонент конфигурации раскрывающегося списка анимации формы Angular PrimeNG

Опубликовано: 20 Декабря, 2022

Angular PrimeNG — это библиотека компонентов пользовательского интерфейса с открытым исходным кодом для приложений Angular. Используя компоненты, предоставляемые Angular PrimeNG, можно создавать потрясающие и отзывчивые угловые приложения. В этой статье мы увидим компонент конфигурации раскрывающейся анимации формы Angular PrimeNG.

Компонент Form Dropdown предоставляет пользователю список опций, из которых можно выбрать любую опцию. Анимацию открытия и скрытия раскрывающегося наложения можно настроить с помощью свойств showTransitionOptions и hideTransitionOptions .

Свойства конфигурации раскрывающегося списка анимации формы Angular PrimeNG:

showTransitionOptions: это свойство используется для указания свойств отображения перехода раскрывающегося наложения. Он принимает строковые значения, и его значение по умолчанию — «.12s кубический-безье (0, 0, 0,2, 1)».
hideTransitionOptions: это свойство используется для указания свойств скрытия перехода раскрывающегося наложения. Он принимает строковые значения, и его значение по умолчанию — «.1s linear».
options: это свойство используется для передачи массива объектов для отображения в качестве параметров раскрывающегося списка.
optionLabel: указывает свойство объектов параметров для отображения меток параметров раскрывающегося списка.

Синтаксис:

<p-dropdown 
    [(ngModel)]="..."
    [hideTransitionOptions]=""...""
    [showTransitionOptions]=""...""
    [options]="..."
    optionLabel="...">
</p-dropdown>

Создание приложения Angular и установка модулей:

Шаг 1: Создайте приложение Angular, используя следующую команду.

ng new myapp

Шаг 2: После создания папки проекта, т. е. myapp, перейдите к ней с помощью следующей команды.

cd myapp

Шаг 3: Установите PrimeNG в указанный вами каталог.

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

Структура проекта: после выполнения вышеуказанных шагов структура будет выглядеть следующим образом:

Пример 1. В этом примере мы установили для свойства showTransitionOptions раскрывающегося компонента значение «2s linear», чтобы всплывающее окно открывалось через 2 секунды и анимировалось линейно.

приложение.component.html:

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form Dropdown 
    Animation Configuration Component
</h3>
  
<p-dropdown [options]="cars" 
            optionLabel="car"
            placeholder="Select a Car"
            [(ngModel)]="preferredCar" 
            [showTransitionOptions]=""2s linear"">   
</p-dropdown>

app.component.ts:

Javascript

import { Component } from "@angular/core";
  
interface Car {
    car: String;
    val: String;
}
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"],
})
  
export class AppComponent {
    cars: Car[] = [];
    preferredCar!: Car;
  
    ngOnInit() {
        this.cars = [
            {
                car: "Tata Safari",
                val: "TATASAF"
            },
            {
                car: "Innova Crysta",
                val: "INVACRS"
            },
            {
                car: "Jeep Compass",
                val: "JEEPCMP"
            },
            {
                car: "Tata Nexon",
                val: "TATANXN"
            },
            {
                car: "Isuzu D-Max",
                val: "ISZUDMX"
            },
            {
                car: "Honda City",
                val: "HNDACTY"
            },
            {
                car: "Hyundai Creta",
                val: "HNDICTA"
            },
        ];
    }
}

app.module.ts:

HTML

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

Выход:

Пример 2. В этом примере мы устанавливаем для свойства hideTransitionOptions компонента раскрывающегося списка значение «1s», а для свойства showTransitionOptions — значение «2s», поэтому для закрытия всплывающего окна выбора цвета потребуется 1 секунда и 2 секунды для открытия.

приложение.component.html:

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form Dropdown 
    Animation Configuration Component
</h3>
  
<p-dropdown [options]="cars" 
            optionLabel="car"
            placeholder="Select a Car"
            [(ngModel)]="preferredCar"
            [hideTransitionOptions]=""1s"" 
            [showTransitionOptions]=""2s"">    
</p-dropdown>

app.component.ts:

Javascript

import { Component } from "@angular/core";
  
interface Car {
    car: String;
    val: String;
}
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"],
})
  
export class AppComponent {
    cars: Car[] = [];
    preferredCar!: Car;
  
    ngOnInit() {
        this.cars = [
            {
                car: "Tata Safari",
                val: "TATASAF"
            },
            {
                car: "Innova Crysta",
                val: "INVACRS"
            },
            {
                car: "Jeep Compass",
                val: "JEEPCMP"
            },
            {
                car: "Tata Nexon",
                val: "TATANXN"
            },
            {
                car: "Isuzu D-Max",
                val: "ISZUDMX"
            },
            {
                car: "Honda City",
                val: "HNDACTY"
            },
            {
                car: "Hyundai Creta",
                val: "HNDICTA"
            },
        ];
    }
}

app.module.ts:

Javascript

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

Выход:

Ссылка: https://www.primefaces.org/primeng/dropdown

Technical Scripter Picked Web технологии AngularJS

Компонент конфигурации раскрывающегося списка анимации формы Angular PrimeNG

HTML

Javascript

HTML

HTML

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ