Свойства слайд-меню Angular PrimeNG
Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. В этой статье мы увидим, как использовать свойства SlideMenu в Angular PrimeNG. Мы также узнаем о свойствах и их синтаксисе, которые будут использоваться в коде.
Компонент SlideMenu используется для отображения списка меню в виде скользящей анимации, которая помогает просматривать пункты меню пошагово.
Свойства слайд-меню Angular PrimeNG:
- модель: это массив пунктов меню. Он принимает тип данных массива, а значение по умолчанию равно null.
- всплывающее окно: определяет, будет ли меню отображаться как всплывающее окно. Это логический тип данных, и значение по умолчанию — false.
- стиль: это встроенный стиль компонента. Он принимает строковый тип данных, а значение по умолчанию равно null.
- styleClass: это класс стиля компонента. Он принимает строковый тип данных, а значение по умолчанию равно null.
- easing: это анимация, используемая для скольжения. Он принимает строковый тип данных, а значение по умолчанию — easy-out.
- effectDuration: это продолжительность скользящей анимации в миллисекундах. Он принимает любой тип данных в качестве входных данных, а значение по умолчанию равно 250.
- backLabel: это метка элемента для перехода назад. Он принимает строковый тип данных, и возвращается значение по умолчанию.
- menuWidth: Это ширина подменю. Он принимает числовой тип данных в качестве входных данных, а значение по умолчанию — 180.
- viewportHeight: это высота прокручиваемой области, полоса прокрутки появляется, если высота меню длиннее этого значения. Он принимает числовой тип данных в качестве входных данных, а значение по умолчанию — 175.
- appendTo: это целевой элемент для присоединения оверлея, допустимые значения — «body» или локальная переменная ng-template другого элемента. Он принимает любой тип данных в качестве входных данных, а значение по умолчанию равно null.
- baseZIndex: это базовое значение zIndex для использования в слоях. Он принимает числовой тип данных в качестве входных данных, а значение по умолчанию равно 0.
- autoZIndex: указывает, следует ли автоматически управлять слоями. Это логический тип данных, и значение по умолчанию равно true.
- showTransitionOptions: это параметры перехода для отображения анимации. Он принимает строковый тип данных, а значение по умолчанию — 0,12 с кубического безье (0, 0, 0,2, 1).
- hideTransitionOptions: это параметры перехода, чтобы скрыть анимацию. Он принимает строковый тип данных, а значение по умолчанию — .1s linear.
Создание приложения 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>PrimeNG SlideMenu Properties</h5><p-slideMenu [model]="gfg" ></p-slideMenu> |
- 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: "Courses", icon: "pi pi-pencil", items: [ { label: "DSA-Self Paced", }, { label: "System Design", }, ], }, { label: "Tutorials", icon: "pi pi-youtube", items: [ { label: "Angular Js", }, { label: "React Js", }, ], }, { label: "Jobs", icon: "pi pi-id-card", items: [ { label: "GfG Jobathon", }, { label: "Post a Job", }, ], }, { label: "Practice", icon: "pi pi-code", items: [ { label: "Problem of the day", }, { label: "SDE Sheet", }, ], }, ]; }} |
- 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 { SlideMenuModule } from "primeng/slidemenu";import { ButtonModule } from "primeng/button"; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, SlideMenuModule, ButtonModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ]}) export class AppModule { } |
Выход:
Пример 2: Это еще один базовый пример, который показывает, как использовать свойства слайд-меню Angular PrimeNG с помощью всплывающей кнопки.
- приложение.component.html:
HTML
<h1 style="color:green">GeeksforGeeks</h1><h5>PrimeNG SlideMenu Properties</h5> <button #btn type="button" pButton label="GeeksforGeeks" (click)="menu.toggle($event)"></button> <p-slideMenu #menu [model]="gfg" [popup]="true" [viewportHeight]="250"></p-slideMenu> |
- 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: "Courses", icon: "pi pi-pencil", items: [ { label: "DSA-Self Paced", }, { label: "System Design", }, ], }, { label: "Tutorials", icon: "pi pi-youtube", items: [ { label: "Angular Js", }, { label: "React Js", }, ], }, { label: "Jobs", icon: "pi pi-id-card", items: [ { label: "GfG Jobathon", }, { label: "Post a Job", }, ], }, { label: "Practice", icon: "pi pi-code", items: [ { label: "Problem of the day", }, { label: "SDE Sheet", }, ], }, ]; }} |
- 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 { SlideMenuModule } from "primeng/slidemenu";import { ButtonModule } from "primeng/button"; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, SlideMenuModule, ButtonModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ]}) export class AppModule { } |
Выход:
Ссылка: https://primefaces.org/primeng/slidemenu