Angular 4+ 幻灯片导航菜单组件

Angular 4+ 幻灯片导航菜单组件
插件名称 cuppa-ng2-slidemenu
发布时间 2020年7月18日
插件作者 CuppaLabs

移动和Web的Angular 4 幻灯片导航菜单组件。需要 Font Awesome 图标字体。

安装:

# NPM
$ npm install cuppa-ng2-slidemenu --save

用法:

将组件导入模块。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SlideMenuModule } from 'cuppa-ng2-slidemenu/cuppa-ng2-slidemenu';
import { AppComponent } from './app.component';

@NgModule({
   bootstrap: [ AppComponent ],
   declarations: [AppComponent],
   imports: [SlideMenuModule]
})
export class AppModule {
}

在您的html模板中。

<cuppa-slidemenu [menulist]="menuItemsArray" (open)="onMenuOpen()" (close)="onMenuClose()" (onItemSelect)="onItemSelect($event)"></cuppa-slidemenu>

定义自己的菜单数据如下:

private menuItemsArray: any[] = [ 
   {"title":"Menu 1","link":"#"},
   {"title":"Menu 2","link":"#"},
   {"title":"Menu 3","link":"#",
   "subItems":[
     {"title":"Menu 3.1","link":"#"},
     {"title":"Menu 3.2","link":"#"},
    ]
   },
   {"title":"Menu 4","link":"#",
    "subItems":[
       {"title":"Menu 4.1","link":"#"},
       {"title":"Menu 42","link":"#"},
      ]
   },
];

public onMenuClose(){
  console.log("menu closed");
}
public onMenuOpen(){
  console.log("menu Opened");
}
private onItemSelect(item:any){
  console.log(item);
}