时间戳

首页 > 解决方案 > 离子标签菜单未显示或无法从右侧滑入

angular - 离子标签菜单未显示或无法从右侧滑入

问题描述

我想要两个导航栏按钮，一个用于搜索，一个用于滑动菜单使用下面的代码，

<ion-header>

  <ion-navbar>
    <ion-title>{{ 'START_TAB' | translate }}</ion-title>

    <ion-buttons right>
      <button ion-button icon-only (click)="search()">
        <ion-icon name="search"></ion-icon>
      </button>
      <button ion-button menuToggle="right">
        <ion-icon name="menu"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>

菜单按钮完全丢失。 在此处输入图像描述

当我删除menuToggle="right"参数时，我得到以下结果：

在此处输入图像描述 并且切换按预期从左侧开始。

如何使它从右侧切换并水平放置图标？

标签： angularionic-frameworkionic3

解决方案

好的，这是一种可能的方法，我会留给你玩

<ion-header>

  <ion-navbar>
   <ion-grid>
       <ion-row>
          <ion-col-8>
             <ion-title>{{ 'START_TAB' | translate }}</ion-title>
          </ion-col>
          <ion-col-2>
              <button ion-button icon-only (click)="search()">
                <ion-icon name="search"></ion-icon>
              </button>
          </ion-col>
          <ion-col-2>
            <button ion-button menuToggle>
               <ion-icon name="menu"></ion-icon>
         </button>
          </ion-col>              
       </ion-row>
   </ion-grid>
  </ion-navbar>
</ion-header>

好的，所以上面的这部分应该让你更接近你想要的标题显示。

至于从右侧打开的菜单，请转到 app.html 或调用菜单组件的位置，然后将side="right"添加到ion-menu中，如下所示：

<ion-menu [content]="content" side="right">

推荐阅读