极客教程Angular PrimeNG滑动菜单属性
Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可用于出色的造型，这个框架用于制作响应式网站，非常容易。在这篇文章中，我们将看到如何在Angular PrimeNG中使用SlideMenu属性。我们还将了解这些属性，以及它们在代码中的语法。
SlideMenu组件用于以滑动动画的形式显示菜单列表，这有助于以一种渐进的方式查看菜单项。
Angular PrimeNG幻灯片菜单属性：
- model。它是一个菜单项的数组。它接受数组数据类型，默认值为空。
- popup。它定义了菜单是否会以弹出的方式显示。它是布尔数据类型，默认值是false。
- style。它是一个组件的内联样式。它接受字符串数据类型，默认值为空。
- styleClass。它是组件的风格类。它接受字符串数据类型，默认值为空。
- easing:它是用于滑动的动画。它接受字符串数据类型，默认值是ease-out。
- effectDuration。它是滑动动画的持续时间，单位是毫秒。它接受任何数据类型的输入，默认值是250。
- backLabel。它是一个元素的标签，用于导航返回。它接受字符串数据类型，默认值为back。
- menuWidth: 它是子菜单的宽度。它接受数字数据类型作为输入，默认值为180。
- viewportHeight: 它是可滚动区域的高度，如果一个菜单的高度超过这个值，就会出现一个滚动条。它接受数字数据类型作为输入，默认值为175。
- appendTo。它是附加覆盖的目标元素，有效值是 “body “或另一个元素的本地ng-template变量。它接受任何数据类型的输入，默认值为空。
- baseZIndex。它是在分层中使用的基础ZIndex值。它接受数字数据类型作为输入，默认值为0。
- autoZIndex。它指定了是否要自动管理分层。它是布尔数据类型，默认值为true。
- showTransitionOptions。这些是显示动画的过渡选项。它接受字符串数据类型，默认值是0.12s cubic-bezier(0, 0, 0.2, 1)。
- hideTransitionOptions。这些是用于隐藏动画的过渡选项。它接受字符串数据类型，默认值为0.1s线性。
创建Angular应用程序和模块安装。
第1步：使用以下命令创建一个Angular应用程序。
ng new appname
第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。
cd appname
第3步在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
项目结构：完成安装后，它将看起来像下面这样
运行应用程序的步骤：要运行上述文件，请运行以下命令。
ng serve --save
例子1：这是一个基本的例子，展示了如何使用Angular PrimeNG SlideMenu属性。
- app.component.html:
<h1 style="color:green">GeeksforGeeks</h1>
<h5>PrimeNG SlideMenu Properties</h5>
<p-slideMenu [model]="gfg" ></p-slideMenu>
- app.component.ts:
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:
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 SlideMenu属性使用按钮弹出。
- app.component.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:
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:
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 { }
输出:
