隐藏 Ionic 菜单上的默认图标菜单汉堡包按钮 |离子4

Question

我需要删除离子菜单上的汉堡包默认图标菜单。我添加了自定义菜单，我需要删除默认图标。

所以我的代码：

<ion-menu side="start">  
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-item>
        <ion-icon name="home" slot="start"></ion-icon>
        <ion-label>Home</ion-label>
      </ion-item>
      <ion-item>
        <ion-icon name="person" slot="start"></ion-icon>
        <ion-label>Profile</ion-label>
      </ion-item>
      <ion-item>
        <ion-icon name="chatbubbles" slot="start"></ion-icon>
        <ion-label>Messages</ion-label>
      </ion-item>
      <ion-item>
        <ion-icon name="settings" slot="start"></ion-icon>
        <ion-label>Settings</ion-label>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

我的布局菜单：

Html 按钮代码：

<ion-header _ngcontent-yjt-c1="" role="banner" class="ios header-ios hydrated">
    <ion-toolbar _ngcontent-yjt-c1="" class="ios hydrated">
        <ion-buttons _ngcontent-yjt-c1="" slot="start" class="buttons-first-slot sc-ion-buttons-ios-h sc-ion-buttons-ios-s ios hydrated">
            <ion-menu-button _ngcontent-yjt-c1="" class="hydrated ios button ion-activatable ion-focusable"></ion-menu-button>
        </ion-buttons>
        <ion-title _ngcontent-yjt-c1="" class="ios title-ios hydrated"></ion-title>
    </ion-toolbar>
</ion-header>

我需要删除圆圈内的默认图标。如何去除？

Answer 1

在 app.scss 文件中添加以下样式以隐藏默认菜单按钮

.bar-button-menutoggle {
  display: none !important;
}

Answer 2

能否请您尝试以下 css 规则？如果它们被添加到您正在查看的页面的 css，请检查它们是否不起作用？

ion-menu-button {
    display: none !important;
}

或

ion-buttons {
    display: none !important;
}

或

.button.ion-activatable.ion-focusable {
    display: none !important;
}

隐藏 Ionic 菜单上的默认图标菜单汉堡包按钮 |离子4

Hide default icon menu hamburger button on Ionic Menu | Ionic 4

html

menu

ionic-framework

angular