Свойства мегаменю Angular PrimeNG

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

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

Technical Scripter Picked AngularJS

Свойства мегаменю Angular PrimeNG

HTML

Javascript

Javascript

HTML

Javascript

Javascript

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