【问题标题】:Ionic 3 split pane menu toggle not displayedIonic 3 拆分窗格菜单切换未显示
【发布时间】:2019-06-16 21:25:01
【问题描述】:

我为 SplitPane 创建了我的 Ionic 应用程序,该应用程序运行良好。 但我遇到了一些冲突 大屏显示拆分窗格,但小屏不显示切换菜单按钮。当我交换它时,菜单显示后。 任何人都知道如何在小型设备中解决该问题 看我的代码 Stackblitz here

代码部分 app.html

<ion-split-pane>

  <ion-menu [content]="someContent">
    <ion-header>
      <ion-toolbar>
        <ion-title>
          Menu
        </ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-item (click)="setCategory('nature')">
          <ion-avatar item-left>

          </ion-avatar>
          <h3>Home</h3>
        </ion-item>
        <ion-item (click)="setCategory('food')">
          <ion-avatar item-left>

          </ion-avatar>
          <h3>Categories</h3>
        </ion-item>
        <ion-item (click)="setCategory('people')">
          <ion-avatar item-left>

          </ion-avatar>
          <h3>Get One</h3>
        </ion-item>

        <ion-item (click)="setCategory('people')">
          <ion-avatar item-left>

          </ion-avatar>
          <h3>Settings</h3>
        </ion-item>


        <ion-item (click)="setCategory('people')">
          <ion-avatar item-left>

          </ion-avatar>
          <h3>My Partner</h3>
        </ion-item>


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

  <ion-nav [root]="rootPage" #someContent main></ion-nav>

</ion-split-pane>

【问题讨论】:

    标签: ionic-framework ionic3 splitpane


    【解决方案1】:

    您忘记在页面标题中添加菜单切换按钮,如下所示:

    <ion-header>
      <ion-navbar>
        <!-- Add this button in the pages you want to show the menu button -->
        <button ion-button menuToggle>
          <ion-icon name="menu"></ion-icon>
        </button>
    
        <ion-title>
          About
        </ion-title>
      </ion-navbar>
    </ion-header>
    

    这样,当显示窗格时,它不会显示菜单按钮,但是当在较小的屏幕中并且窗格被隐藏时,会显示按钮。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-08-22
      • 1970-01-01
      • 2014-09-23
      • 1970-01-01
      • 1970-01-01
      • 2020-03-18
      相关资源
      最近更新 更多