Свойства строки меню Angular PrimeNG

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

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

Компонент Menubar используется для создания списка меню в виде горизонтальной полосы.

Свойства панели меню Angular PrimeNG:

модель: это массив пунктов меню. Он принимает тип данных массива в качестве входных данных, а значение по умолчанию равно null.
стиль: это встроенный стиль компонента. Это строковый тип данных, и значение по умолчанию равно null.
styleClass: используется для установки класса стиля компонента. Это строковый тип данных, и значение по умолчанию равно null.
baseZIndex: используется для установки базового значения zIndex для использования в слоях. Он принимает числовой тип данных в качестве входных данных, а значение по умолчанию равно 0.
autoZIndex: используется для указания, следует ли автоматически управлять слоями. Он принимает логический тип данных в качестве входных данных, а значение по умолчанию равно true.
autoDisplay: используется для указания, показывать ли корневое подменю при наведении курсора мыши. Он принимает логический тип данных в качестве входных данных, а значение по умолчанию — false.

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

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

ng new appname

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

cd appname

Шаг 3: Установите PrimeNG в указанный вами каталог.

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

Структура проекта: Это будет выглядеть следующим образом:

Шаги для запуска приложения: Чтобы запустить указанный выше файл, выполните следующую команду:

ng serve --save

Пример 1: Это базовый пример, иллюстрирующий использование свойств панели меню Angular PrimeNG.

приложение.component.html:

HTML

<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angular PrimeNG MenuBar Properties</h5>
<p-menubar [model]="gfg"></p-menubar>

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 { MenubarModule } from "primeng/menubar";
import { InputTextModule } from "primeng/inputtext";
import { ButtonModule } from "primeng/button";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        MenubarModule,
        InputTextModule,
        ButtonModule
    ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
})
  
export class AppModule {}

Выход:

Пример 2. Это еще один пример, иллюстрирующий использование свойств панели меню Angular PrimeNG.

приложение.component.html:

HTML

<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angular PrimeNG MenuBar Properties</h5>
  
<p-menubar [model]="gfg">
    <div>
        <button type="button" pButton 
            label="Log In" icon="pi pi-sign-in">
          </button>
        <button type="button" pButton 
            label="Log Out" icon="pi pi-sign-out" 
            style="margin-left: 1rem">
          </button>
    </div>
</p-menubar>

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 { MenubarModule } from "primeng/menubar";
import { InputTextModule } from "primeng/inputtext";
import { ButtonModule } from "primeng/button";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        MenubarModule,
        InputTextModule,
        ButtonModule
    ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
})
  
export class AppModule {}

Выход:

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

Technical Scripter Picked AngularJS

Свойства строки меню Angular PrimeNG

HTML

Javascript

Javascript

HTML

Javascript

Javascript

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