Программное управление Angular PrimeNG Accordion
Angular PrimeNG — это библиотека компонентов пользовательского интерфейса, созданная PrimeTek для помощи разработчикам Angular в упрощении процесса разработки согласованных и масштабируемых веб-интерфейсов за меньшее время. В этой статье мы поговорим о программном управлении Accordion в Angular PrimeNG.
Компонент Accordion используется для отображения содержимого в наборе вкладок. Вкладки аккордеона можно открывать и закрывать, щелкая заголовок вкладок аккордеона, но этим также можно управлять программно, изменяя массив activeIndex компонента аккордеона.
Свойства программного управления Angular PrimeNG Accordion:
- множественный: когда это свойство имеет значение true, несколько вкладок аккордеона могут быть открыты одновременно.
- activeIndex: это индекс активной вкладки или массив индексов для программного изменения выбранной вкладки.
Программное управление Angular PrimeNG Accordion AccordionTab Свойства:
- disabled: для этого свойства можно установить значение true, чтобы отключить конкретную вкладку аккордеона.
Синтаксис:
// File Name: app.component.html <button pButton type="button" label="..." (click)="toggleTab(index)"> </button> <p-accordion [multiple]="true"> <p-accordionTab header="..." [(selected)]="activeTabs[0]"> ... </p-accordionTab> <p-accordionTab header="..." [(selected)]="activeTabs[1]"> ... </p-accordionTab> </p-accordion> // File Name: app.component.ts toggleTab(idx: number) { this.activeTabs[idx] = !this.activeTabs[idx]; }
Создание приложения и установка необходимых модулей:
Шаг 1: Создайте приложение Angular с помощью следующей команды.
ng new my_app
Шаг 2: После создания приложения перейдите в папку проекта с помощью команды, написанной ниже.
cd new_app
Шаг 3: Наконец, установите следующие модули в каталог вашего проекта.
npm install primeng --save npm install primeicons --save
Структура проекта: Теперь структура проекта будет такой, как показано на рисунке ниже.
Пример 1. В этом примере мы использовали кнопки для программного переключения вкладок аккордеона.
- приложение.component.html:
HTML
< div style = "width: 400px;" > < h1 style = "color:green;" >GeeksforGeeks</ h1 > < h3 >A computer science portal for geeks</ h3 > < h4 > Angular PrimeNG Accordion Programmatic Control </ h4 > < div class = "mb-4" > < button pButton type = "button" class = "mr-3" label = "Toggle Tab 1" (click)="toggleTab(0)"> </ button > < button pButton type = "button" label = "Toggle Tab 2" (click)="toggleTab(1)"> </ button > </ div > < p-accordion [multiple]="true"> < p-accordionTab header = "AccordionTab 1 Header" [(selected)]="activeTabs[0]"> This is the content of the Accordion Tab 1. </ p-accordionTab > < p-accordionTab header = "AccordionTab 2 Header" [(selected)]="activeTabs[1]"> This is the content of the Accordion Tab 2. </ p-accordionTab > </ p-accordion > </ div > |
- app.component.ts:
Javascript
import { Component } from "@angular/core" ; @Component({ selector: "app-root" , templateUrl: "./app.component.html" , styleUrls: [ "./app.component.css" ], }) export class AppComponent { activeTabs: boolean[] = [ false , false ]; toggleTab(idx: number) { this .activeTabs[idx] = ! this .activeTabs[idx]; } } |
- app.module.ts:
Javascript
import { NgModule } from "@angular/core" ; import { BrowserModule } from "@angular/platform-browser" ; import { HttpClientModule } from "@angular/common/http" ; import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ; import { AppComponent } from "./app.component" ; import { ButtonModule } from "primeng/button" ; import { AccordionModule } from "primeng/accordion" ; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, HttpClientModule, ButtonModule, AccordionModule ], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule { } |
Выход:
Пример 2. Вкладки аккордеона с отключенным свойством, для которого установлено значение true, также можно переключать программно, даже если они отключены.
- приложение.component.html:
HTML
< div style = "width: 400px;" > < h1 style = "color:green;" >GeeksforGeeks</ h1 > < h3 >A computer science portal for geeks</ h3 > < h4 > Angular PrimeNG Accordion Programmatic Control </ h4 > < div class = "mb-4" > < button pButton type = "button" label = "Toggle The Disabled Tab" (click)="toggleTab(1)"> </ button > </ div > < p-accordion [multiple]="true"> < p-accordionTab header = "Active Accordion Tab" [(selected)]="activeTabs[0]"> This is the content of the Active Accordion Tab. </ p-accordionTab > < p-accordionTab header = "Disabled Accordion Tab" [disabled]="true" [(selected)]="activeTabs[1]"> This is the content of the Disabled Tab. </ p-accordionTab > </ p-accordion > </ div > |
- app.component.ts:
Javascript
import { Component } from "@angular/core" ; @Component({ selector: "app-root" , templateUrl: "./app.component.html" , styleUrls: [ "./app.component.css" ], }) export class AppComponent { activeTabs: boolean[] = [ false , false ]; toggleTab(idx: number) { this .activeTabs[idx] = ! this .activeTabs[idx]; } } |
- app.module.ts:
Javascript
import { NgModule } from "@angular/core" ; import { BrowserModule } from "@angular/platform-browser" ; import { HttpClientModule } from "@angular/common/http" ; import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ; import { AppComponent } from "./app.component" ; import { ButtonModule } from "primeng/button" ; import { AccordionModule } from "primeng/accordion" ; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, HttpClientModule, ButtonModule, AccordionModule ], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule { } |
Выход:
Ссылка: https://www.primefaces.org/primeng/accordion