Свойства меню панели Angular PrimeNG
Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. В этой статье мы узнаем, как использовать свойства PanelMenu в Angular PrimeNG . Мы также узнаем о свойствах и их синтаксисе, которые будут использоваться в коде.
Компонент PanelMenu используется для создания меню в виде панели. Его можно рассматривать как сочетание компонентов аккордеона и дерева.
Свойства меню панели Angular PrimeNG:
- модель: это массив пунктов меню. Он принимает тип данных массива в качестве входных данных, а значение по умолчанию равно null.
- стиль: используется для установки встроенного стиля компонента. Это строковый тип данных, и значение по умолчанию равно null.
- styleClass: используется для установки класса стиля компонента. Это строковый тип данных, и значение по умолчанию равно null.
- множественный: используется, чтобы указать, можно ли активировать несколько вкладок одновременно или нет. Это логический тип данных, и значение по умолчанию равно true.
- transitionOptions: используется для установки параметров перехода анимации. Это строковый тип данных, а значение по умолчанию — 400 мс кубического Безье (0,86, 0, 0,07, 1).
Создание приложения Angular и установка модуля:
Шаг 1: Создайте приложение Angular, используя следующую команду.
ng new appname
Шаг 2: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.
cd appname
Шаг 3: Установите PrimeNG в указанный вами каталог.
npm install primeng --save npm install primeicons --save
Структура проекта: После полной установки он будет выглядеть следующим образом:
Шаги для запуска приложения: Чтобы запустить указанный выше файл, выполните следующую команду:
ng serve --save
Пример 1: Это базовый пример, иллюстрирующий использование свойств PanelMenu Angular PrimeNG.
- приложение.component.html:
HTML
<h1 style="color: green">GeeksforGeeks</h1><h5>Angualar PrimeNG PanelMenu Properties</h5><p-panelMenu [model]="gfg"></p-panelMenu> |
- app.component.ts:
Javascript
import { Component } from "@angular/core";import { MenuItem } from "primeng/api"; @Component({ selector: "app-root", templateUrl: "./app.component.html",}) export class AppComponent { gfg: MenuItem[]; ngOnInit() { this.gfg = [ { label: "HTML", items: [ { label: "HTML 1", }, { label: "HTML 2", }, ], }, { label: "Angular", items: [ { label: "Angular 1", }, { label: "Angular 2", }, ], }, ]; }} |
- 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 { PanelMenuModule } from "primeng/panelmenu"; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, PanelMenuModule, ], declarations: [ AppComponent ], bootstrap: [ AppComponent ]}) export class AppModule { } |
Выход:
Пример 2: Это еще один базовый пример, который иллюстрирует использование свойств PanelMenu Angular PrimeNG с использованием multiple="false" .
- приложение.component.html:
HTML
<h1 style="color: green">GeeksforGeeks</h1><h5>Angualar PrimeNG PanelMenu Properties</h5><p-panelMenu [multiple]="false" [model]="gfg"></p-panelMenu> |
- app.component.ts:
Javascript
import { Component } from "@angular/core";import { MenuItem } from "primeng/api"; @Component({ selector: "app-root", templateUrl: "./app.component.html",}) export class AppComponent { gfg: MenuItem[]; ngOnInit() { this.gfg = [ { label: "Courses", icon: "pi pi-pencil", items: [ { label: "DSA-Self Paced", }, { label: "System Design", }, ], }, { label: "Tutorials", icon: "pi pi-youtube", items: [ { label: "Angular Js", }, { label: "React Js", }, ], }, { label: "Jobs", icon: "pi pi-id-card", items: [ { label: "GfG Jobathon", }, { label: "Post a Job", }, ], }, { label: "Practice", icon: "pi pi-code", items: [ { label: "Problem of the day", }, { label: "SDE Sheet", }, ], }, ]; }} |
- 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 { PanelMenuModule } from "primeng/panelmenu"; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, PanelMenuModule, ], declarations: [ AppComponent ], bootstrap: [ AppComponent ]}) export class AppModule { } |
Выход:
Ссылка: https://primefaces.org/primeng/panelmenu