Пользовательский контент Angular PrimeNG Accordion в заголовках

Опубликовано: 24 Февраля, 2023

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

Компонент Accordion используется для отображения содержимого в наборе вкладок. По умолчанию может быть открыта только одна из вкладок Аккордеона, но это можно переопределить, установив для свойства «несколько» компонента значение true. Для размещения пользовательского контента в Accordion Header можно использовать шаблон заголовка элемента p-accordionTab .

Пользовательский контент Angular PrimeNG Accordion в свойствах заголовков:

множественный: когда это свойство имеет значение true, несколько вкладок аккордеона могут быть открыты одновременно.
activeIndex: это индекс активной вкладки или массив индексов для программного изменения выбранной вкладки.
expandIcon: это значок расширенной вкладки аккордеона.
коллапсИкон: это значок свернутой вкладки аккордеона.

Пользовательский контент Angular PrimeNG Accordion в шаблоне заголовков:

заголовок: этот шаблон используется для отображения пользовательского контента в качестве заголовка вкладок аккордеона.

Синтаксис:

<p-accordion>
    <p-accordionTab>
        <ng-template pTemplate="header">
            Header Content
        </ng-template>
           ...
    </p-accordionTab>
    ...
</p-accordion>

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

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

ng new my_app

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

cd new_app

Шаг 3: Наконец, установите следующие модули в каталог вашего проекта.

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

Структура проекта: Теперь структура проекта будет такой, как показано на рисунке ниже.

Пример 1. В этом примере мы вставили заголовок H3 в качестве заголовка вкладки аккордеона, используя шаблон заголовка .

приложение.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
        Custom Content at Headers
    </h4>
  
    <p-accordion>
        <p-accordionTab>
            <ng-template pTemplate="header">
                <h3>H3 as Header of Accordion Tab 1</h3>
            </ng-template>
            This is the content of the Accordion Tab 1.
        </p-accordionTab>
        <p-accordionTab header="AccordionTab 2 Header">
            This is the content of the Accordion Tab 2.
        </p-accordionTab>
        <p-accordionTab header="AccordionTab 3 Header">
            This is the content of the Accordion Tab 3.
        </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 { }

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 { ChipModule } from "primeng/chip";
import { AccordionModule } 
    from "primeng/accordion";
import { InplaceModule } 
    from "primeng/inplace";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        InplaceModule,
        AccordionModule,
        ChipModule,
        HttpClientModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Выход:

Пример 2: В этом примере мы использовали фишку в шапке вкладок Аккордеон с помощью шаблона шапки .

приложение.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
        Custom Content at Headers
    </h4>
  
    <p-accordion>
        <p-accordionTab>
            <ng-template pTemplate="header">
                <p-chip 
                    label="Header of Accordion Tab 1">
                </p-chip>
            </ng-template>
            This is the content of the Accordion Tab 1.
        </p-accordionTab>
        <p-accordionTab>
            <ng-template pTemplate="header">
                <p-chip 
                    label="Header of Accordion Tab 2">
                </p-chip>
            </ng-template>
            This is the content of the Accordion Tab 2.
        </p-accordionTab>
        <p-accordionTab header="AccordionTab 3 Header">
            This is the content of the Accordion Tab 3.
        </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 { }

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 { ChipModule } from "primeng/chip";
import { AccordionModule } 
    from "primeng/accordion";
import { InplaceModule } 
    from "primeng/inplace";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        InplaceModule,
        AccordionModule,
        ChipModule,
        HttpClientModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Выход:

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

Technical Scripter Picked

Пользовательский контент Angular PrimeNG Accordion в заголовках

HTML

Javascript

Javascript

HTML

Javascript

Javascript

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