Angular PrimeNG SlideMenu组件

Angular PrimeNG是一个开源框架，它有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来做响应式网站，非常方便。在这篇文章中，我们将看到如何在Angular PrimeNG中使用SlideMenu组件。我们还将学习属性、方法、造型以及在代码中使用的语法。

SlideMenu组件：它用于以滑动动画的形式显示菜单列表，这有助于以一种渐进的方式查看菜单项。

属性:

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线性。

方法:

toggle。它用于切换弹出菜单的可见性。
display。它用于显示弹出式菜单。
hide:它用于隐藏弹出式菜单。

样式:

p-slidemenu : 它是一个容器元素。
p-slidemenu-wrapper : 它是一个内容的包装器。
p-slidemenu-content : 它是一个内容元素。
p-slidemenu-backward : 它是一个元素，用于在点击时导航到上一个菜单。
p-menu-list。它是一个列表元素。
p-menuitem。它是一个菜单项元素。
p-menuitem-text。它是一个菜单项的标签。
p-menuitem-icon : 它是一个菜单项的图标。
p-submenu-icon : 它是一个子菜单的箭头图标。

创建Angular应用程序和模块安装。

第1步：使用以下命令创建一个Angular应用程序。

ng new appname

第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

第3步在你给定的目录中安装PrimeNG。

npm install primeng --save
npm install primeicons --save

项目结构：完成安装后，它将看起来像如下。

Angular PrimeNG SlideMenu组件

示例1：这是一个基本的例子，展示了如何使用SlideMenu组件。

<h2>GeeksforGeeks</h2>
<h5>PrimeNG PanelMenu Component</h5>
<p-slideMenu [model]="gfg" ></p-slideMenu>

import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api';
  
@Component({
  selector: 'my-app',
  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'
          }
        ]
      }
    ];
  }
}

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';
  
@NgModule({
  imports: [BrowserModule, 
              BrowserAnimationsModule, 
            SlideMenuModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

输出:

Angular PrimeNG SlideMenu组件

实例2：在这个例子中，我们将使用弹出式窗口制作一个滑动菜单组件。

<h5>PrimeNG SlideMenu Component</h5>
<button #btn type="button" pButton label="Click Here"
        (click)="menu.toggle($event)">
</button>
  
<p-slideMenu #menu [model]="gfg" 
    [popup]="true" [viewportHeight]="250">
</p-slideMenu>

import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api';
  
@Component({
  selector: 'my-app',
  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'
          }
        ]
      }
    ];
  }
}

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 {}

输出:

Angular PrimeNG SlideMenu组件