Свойства меню Angular PrimeNG
Angular PrimeNG — это библиотека с открытым исходным кодом, состоящая из собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и эта структура используется для очень легкого создания адаптивных веб-сайтов. В этой статье мы увидим свойства меню Angular PrimeNG.
Компонент меню используется для навигации по веб-приложению и поддерживает статическое и динамическое позиционирование. Свойства компонента «Меню», предоставляемого PrimeNG, перечислены ниже.
Свойства меню Angular PrimeNG:
- модель: это массив элементов меню для отображения. Это тип массива, и значение по умолчанию равно null.
- всплывающее окно: если для этого свойства установлено значение true, меню будет отображаться как всплывающее окно. Значение по умолчанию неверно.
- стиль: это встроенный стиль компонента.
- styleClass: это класс стиля компонента.
- appendTo: это целевой элемент, к которому будет присоединено наложение. Он принимает в качестве значения «тело» или локальную переменную ng-template.
- baseZIndex: определяет базовый zIndex, который будет использоваться при распределении компонентов по слоям. Значение по умолчанию — 0.
- autoZIndex: если для этого свойства задано значение true, многослойность компонента будет автоматически управляться библиотекой. Значение по умолчанию верно.
- showTransitionOptions: определяет параметры перехода для анимации показа всплывающего меню. Он принимает строковое значение, а значение по умолчанию — «.12s кубический-безье (0, 0, 0,2, 1)».
- hideTransitionOptions: определяет параметры перехода для анимации скрытия всплывающего меню. Он принимает строковое значение, а значение по умолчанию — «.1s linear».
Синтаксис:
<p-menu [model]="..." ... showTransitionOptions="..." hideTransitionOptions="..." [popup]="..."> </p-menu>
Создание приложения Angular и установка модуля:
Шаг 1: Создайте приложение Angular, используя следующую команду.
ng new appname
Шаг 2: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.
cd appname
Шаг 3: Наконец, установите PrimeNG в указанный вами каталог.
npm install primeng --save npm install primeicons --save
Структура проекта: Структура проекта будет выглядеть следующим образом после выполнения вышеуказанных шагов:
Пример 1. В этом примере мы использовали модальные свойства, всплывающее окно и стиль меню, чтобы придать ему красную рамку с радиусом границы 10 пикселей.
приложение.component.html:
HTML
< h1 style = "color:green" > GeeksforGeeks </ h1 > < h3 > Angular PrimeNG Menu Properties </ h3 > < h4 >Simple Menu</ h4 > < p-menu [model]="nav"> </ p-menu > < h4 >Popup Menu</ h4 > < p-button icon = "pi pi-window-maximize" label = "Open Menu" (click)="myMenu.toggle($event)"> </ p-button > < p-menu #myMenu [model]="nav" [style]="{ "border": "2px solid red", "border-radius": "10px", "margin-top": "30px" }" [popup]="true"> </ p-menu > |
app.component.ts:
Javascript
import { isNgContainer } from "@angular/compiler" ; import { Component } from "@angular/core" ; import { MenuItem } from "primeng/api" @Component({ selector: "app-root" , templateUrl: "./app.component.html" , styleUrls: [ "./app.component.css" ], }) export class AppComponent { nav: MenuItem[] = []; ngOnInit() { this .nav = [ { label: "Home" , icon: "pi pi-home" }, { label: "About Us" , icon: "pi pi-info" }, { label: "Contact" , icon: "pi pi-phone" } ] } } |
app.module.ts:
Javascript
import { NgModule } from "@angular/core" ; import { BrowserModule } from "@angular/platform-browser" ; import { HttpClientModule } from "@angular/common/http" ; import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ; import { AppComponent } from "./app.component" ; import { FormsModule } from "@angular/forms" ; import { ButtonModule } from "primeng/button" ; import { MenuModule } from "primeng/menu" ; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, HttpClientModule, FormsModule, MenuModule, ButtonModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } |
Выход:
Пример 2. В этом примере мы использовали свойства showTransitionOptions и hideTransitionOptions всплывающего меню, чтобы изменить его скорость отображения и скрытия перехода.
приложение.component.html:
HTML
< h1 style = "color:green" > GeeksforGeeks </ h1 > < h3 > Angular PrimeNG Menu Properties </ h3 > < h4 >showTransitionOptions="2s linear"</ h4 > < h4 >hideTransitionOptions="1s"</ h4 > < p-button icon = "pi pi-window-maximize" label = "Open Menu" (click)="myMenu.toggle($event)"> </ p-button > < p-menu #myMenu [model]="nav" showTransitionOptions = "2s linear" hideTransitionOptions = "1s" [popup]="true"> </ p-menu > |
app.component.ts:
Javascript
import { isNgContainer } from "@angular/compiler" ; import { Component } from "@angular/core" ; import { MenuItem } from "primeng/api" @Component({ selector: "app-root" , templateUrl: "./app.component.html" , styleUrls: [ "./app.component.css" ], }) export class AppComponent { nav: MenuItem[] = []; ngOnInit() { this .nav = [ { label: "Home" , icon: "pi pi-home" }, { label: "About Us" , icon: "pi pi-info" }, { label: "Contact" , icon: "pi pi-phone" } ] } } |
app.module.ts:
Javascript
import { NgModule } from "@angular/core" ; import { BrowserModule } from "@angular/platform-browser" ; import { HttpClientModule } from "@angular/common/http" ; import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ; import { AppComponent } from "./app.component" ; import { FormsModule } from "@angular/forms" ; import { ButtonModule } from "primeng/button" ; import { MenuModule } from "primeng/menu" ; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, HttpClientModule, FormsModule, MenuModule, ButtonModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } |
Выход:
Ссылка: https://www.primefaces.org/primeng/menu