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

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

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

Technical Scripter Picked AngularJS

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

HTML

Javascript

Javascript

HTML

Javascript

Javascript

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