Ionic菜单

菜单组件是最常用的Ionic组件。它是一个导航抽屉, 可从当前视图的侧面向左或向右滑动。默认情况下, 它会在当前视图的左侧滑动, 但是你也可以向右滑动。菜单可以根据模式显示不同。但是, 可以将其更改为任何可用的菜单类型。你可以将任意数量的菜单附加到内容元素。

Ionic使用标准的<ion-menu>组件, 使你可以轻松创建侧面菜单以进行导航。菜单组件可以从模板控制, 也可以通过使用MenuController进行编程控制。关闭菜单后, 菜单内容将被隐藏。

菜单组件包含以下元素

菜单按钮：它是一个自动创建图标和功能以在页面上打开菜单的组件。

菜单控制器：用于控制菜单。它提供了显示菜单, 启用菜单, 切换菜单等等的方法。它将在旁边引用菜单或ID。如果没有任何一方或ID传递给它, 它将获取找到的第一个菜单。

菜单切换：用于切换菜单的打开或关闭。仅当所选菜单处于活动状态时, 该菜单才可见。打开或关闭菜单时, 该菜单处于活动状态。如果菜单被禁用或显示为拆分窗格, 则将其标记为非活动状态, 并且<ion-menu-toggle>元素会隐藏自身。

拆分窗格：当你要创建多视图布局时, 此功能很有用。它允许UI元素以增加宽度的方式显示为视口。如果设备的屏幕宽度较小, 则拆分窗格将折叠, 并且菜单将被隐藏。对于将在浏览器中提供服务并通过应用商店部署到手机和平板电脑的应用而言, 它是理想的选择。

创建菜单

让我们看看如何在Ionic中创建侧面菜单。

步骤1：首先, 创建空白的Ionic项目。默认情况下, 该项目仅包含一个页面, 即主页。现在, 在这里我们将创建另外两个页面, 这使得使用侧面菜单导航到其他页面变得容易。以下命令在你的Ionic应用程序中创建页面。

ionic generate page Contacts
ionic generate page Chat

步骤2：接下来, 转到根组件, 即app.component.ts。然后, 创建一个函数sideMenu(), 其中包含一个对象数组。对象数组包括项目中的不同页面。它还包含每个页面的图标和URL。现在, 包括以下代码片段。

import { Component } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

@Component({
  selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.scss']
})
export class AppComponent {
  navigate: any;
  constructor(
    private platform: Platform, private splashScreen: SplashScreen, private statusBar: StatusBar
  ) {
    this.sideMenu();
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }
  sideMenu() {
    this.navigate =
    [
      {
        title : 'Home', url   : '/home', icon  : 'home'
      }, {
        title : 'Chat', url   : '/chat', icon  : 'chatboxes'
      }, {
        title : 'Contacts', url   : '/contacts', icon  : 'contacts'
      }, ];
  }
}

步骤3：接下来, 我们需要在app.component.html文件中添加<ion-menu>组件以创建侧面菜单。在此HTML文件中添加以下代码段。

<ion-app>
  <ion-menu side="start" menuId="first" contentId="content">
    <ion-header>
      <ion-toolbar>
        <ion-title>Navigate</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list *ngFor="let pages of navigate">
        <ion-menu-toggle auto-hide="true">
          <ion-item [routerLink]="pages.url" routerDirection="forward">
            <ion-icon [name]="pages.icon" slot="start"></ion-icon>
              {{pages.title}} 
          </ion-item>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>
  </ion-menu>
  <ion-router-outlet Id="content"></ion-router-outlet>
</ion-app>

在上面的代码片段中, 带有side =“ start”的<ion-menu>将创建一个从左到右开始的侧面菜单。它还包含contentId属性, 它是菜单的ID。

第<ion-item [routerLink] =“ pages.url” routerDirection =“ forward”>行, 其中routerLink允许导航到指定的url, outerDirection确定页面更改时发生的动画。

<ion-menu-toggle>组件用于打开和关闭侧面菜单。因此, 当你单击菜单时, 它将自动关闭侧面菜单。

步骤4：在根组件中创建侧菜单后, 我们可以在每个页面中打开或关闭它。为此, 我们需要在每个页面的html中使用<ion-menu-button>组件, 该组件能够创建图标和功能以在每个页面上打开菜单

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start" color="primary">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Start Menu
    </ion-title>
  </ion-toolbar>
</ion-header>

步骤5：现在, 在终端中执行Ionic项目。它将给出以下输出。

如果单击屏幕左上角的三行蓝线菜单按钮, 它将提供以下输出。

下表显示了Ionic菜单组件中使用的重要方法。