代码之家  ›  专栏  ›  技术社区  ›  core114

离子3拆分窗格菜单切换未显示

  •  0
  • core114  · 技术社区  · 6 年前

    我创建了我的离子应用程序 SplitPane ,那一个工作得很好。 但我面临一些冲突 拆分窗格显示在大屏幕中,但切换菜单按钮不显示在小屏幕中。 当我交换它时,在菜单显示之后 . 任何人都知道如何在小型设备中解决这个问题 看我的代码 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>
    
    1 回复  |  直到 6 年前
        1
  •  1
  •   Gabriel Barreto    6 年前

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

    <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>
    

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

    希望这有帮助。