Свойства мегаменю Angular PrimeNG
Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. В этой статье мы узнаем, как использовать свойства MegaMenu в Angular PrimeNG.
Компонент MegaMenu — это компонент навигации, который используется для создания компонента с несколькими номерами меню.
Свойства мегаменю Angular PrimeNG:
- модель: это массив пунктов меню. Он принимает тип данных массива в качестве входных данных, а значение по умолчанию равно null.
- ориентация: используется для определения ориентации. Это строковый тип данных, а значение по умолчанию — горизонтальное.
- стиль: используется для установки встроенного стиля компонента. Это строковый тип данных, и значение по умолчанию равно null.
- styleClass: используется для установки класса стиля компонента. Это строковый тип данных, и значение по умолчанию равно null.
- baseZIndex: используется для установки базового значения zIndex для использования в слоях. Он принимает числовой тип данных в качестве входных данных, а значение по умолчанию равно 0.
- autoZIndex: используется для указания, следует ли автоматически управлять слоями. Это логический тип данных, и значение по умолчанию равно true.
Создание приложения Angular и установка модуля:
Шаг 1: Создайте приложение Angular, используя следующую команду.
ng new appname
Шаг 2: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.
cd appname
Шаг 3: Установите PrimeNG в указанный вами каталог.
npm install primeng --save npm install primeicons --save
Структура проекта: Это будет выглядеть следующим образом:
Чтобы запустить указанный выше файл, выполните следующую команду:
ng serve --save
Пример 1: Ниже приведен пример, который иллюстрирует использование свойств MegaMenu Angular PrimeNG с использованием горизонтальных меню.
- приложение.component.html:
HTML
< h1 style = "color: green" >GeeksforGeeks</ h1 > < h5 >Angular PrimeNG MegaMenu Properties</ h5 > < p-megaMenu [model]="gfg"></ p-megaMenu > |
- app.component.ts:
Javascript
import { Component } from "@angular/core" ; import { MegaMenuItem } from "primeng/api" ; @Component({ selector: "app-root" , templateUrl: "./app.component.html" }) export class AppComponent { gfg: MegaMenuItem[]; ngOnInit() { this .gfg = [ { label: "GeeksforGeeks" , items: [ [ { label: "AngularJS" , items: [ { label: "AngularJS 1" }, { label: "AngularJS 2" } ] }, { label: "ReactJS" , items: [ { label: "ReactJS 1" }, { label: "ReactJS 2" } ] } ], [ { label: "HTML" , items: [{ label: "HTML 1" }, { label: "HTML 2" }] }, { label: "PrimeNG" , items: [ { label: "PriemNG 1" }, { label: "PrimeNG 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 { MegaMenuModule } from "primeng/megamenu" ; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, MegaMenuModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule {} |
Выход:
Пример 2: Ниже приведен еще один пример, который иллюстрирует использование свойств MegaMenu Angular PrimeNG с использованием вертикальных меню.
- приложение.component.html:
HTML
< h1 style = "color: green" >GeeksforGeeks</ h1 > < h5 >Angular PrimeNG MegaMenu Properties</ h5 > < p-megaMenu [model]="gfg" orientation = "vertical" > </ p-megaMenu > |
- app.component.ts:
Javascript
import { Component } from "@angular/core" ; import { MegaMenuItem } from "primeng/api" ; @Component({ selector: "app-root" , templateUrl: "./app.component.html" }) export class AppComponent { gfg: MegaMenuItem[]; ngOnInit() { this .gfg = [ { label: "GeeksforGeeks" , items: [ [ { label: "AngularJS" , items: [ { label: "AngularJS 1" }, { label: "AngularJS 2" } ] }, { label: "ReactJS" , items: [ { label: "ReactJS 1" }, { label: "ReactJS 2" } ] } ], [ { label: "HTML" , items: [{ label: "HTML 1" }, { label: "HTML 2" }] }, { label: "PrimeNG" , items: [ { label: "PriemNG 1" }, { label: "PrimeNG 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 { MegaMenuModule } from "primeng/megamenu" ; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, MegaMenuModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule {} |
Выход:
Ссылка: https://primefaces.org/primeng/megamenu