离子左侧菜单与汉堡包

Question

如何使用汉堡包按钮创建离子左侧菜单？

类似的东西：

Answer 1

好吧，因为它仍然与搜索引擎相关。我也在这里结束了。 这是一种解决方法：

下面的代码插入侧边菜单选项。
SRC /应用/ app.html

＆＃13;

＆＃13;

<ion-menu [content]="mySideMeu">
  <ion-header>
    <ion-toolbar>
      <ion-title>
        Menu Bar
      </ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>

    <ion-list>
        <button ion-item menuClose (click)="onOpenPage(settingsPage)"><ion-icon name="settings" item-left></ion-icon> Settings</button>
        <button ion-item menuClose (click)="onOpenPage(otherPage)"><ion-icon name="car" item-left></ion-icon> Other Page</button>
    </ion-list>

  </ion-content>
</ion-menu>

<ion-nav #mySideMeu [root]="homePage"></ion-nav>

＆＃13;

＆＃13;

＆＃13;
现在您已经创建了侧边菜单，即使您无法看到它，也可以将其从屏幕侧面滑出来。
现在是时候加入“汉堡包”了。屏幕上要显示的图标。 请记住，您可能不希望它出现在所有页面中。 因此，要通过触摸（单击）滑出该侧面菜单，请将以下代码添加到您希望其显示的每个屏幕（页面）中。

＆＃13;

＆＃13;

<ion-header>
  <ion-navbar>
    
    <ion-buttons start>
      <button ion-button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
    </ion-buttons>
    
    <ion-title>Profile</ion-title>
  </ion-navbar>
</ion-header>

＆＃13;

＆＃13;

＆＃13;

此侧边菜单的关键是指令＆＃34; menuToggle＆＃34;打开不同页面视图/屏幕上的侧边菜单和指令＆＃34; menuClose＆＃34;单击后关闭侧边菜单。

干杯。