Свойства строки меню Angular PrimeNG
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