CODEWITHSUNDEEP
menunavigationback-buttonionic-framework
1O1
1O1

Reputation: 304

Ionic nav-back-button and menu button showing together

I try to make the menu button not to show when the back button is showing. is there a way to let Ionic take care of that? or it's up to me?

for example if i use ui-sref to go from app.users to app.users.add or app.users.details i expect the menu button to be hidden and the back button to show, but they're both showing when i go to nested views. example:

<button class="button button-positive" ui-sref="app.users.details({id:user.id})"> User details </button>

app.js

.config(function($stateProvider, $urlRouterProvider) {
$stateProvider

  .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html'
    //controller: 'AppCtrl'
  })

  .state('app.users', {
    url: '/users',

    views: {
      'menuContent@app' : {
        controller: 'UsersCtrl',
        templateUrl: 'templates/users.html'
      }
    }
  })

  .state('app.users.add', {
    url: '/addUsers',

    views: {
      'menuContent@app' : {
        controller: 'AddUserCtrl',
        templateUrl: 'templates/add_user.html'
      }
    }
  })

  .state('app.users.details', {
    url: '/userDetails/:id',

    views: {
      'menuContent@app' : {
        controller: 'UserDetailsCtrl',
        templateUrl: 'templates/details_user.html'
      }
    }
  })
}

menu.html

<ion-side-menus>
  <ion-pane ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button class="button-clear">
        <i class="icon ion-ios7-arrow-forward"></i> back
      </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="menuContent" animation="slide-right-left"></ion-nav-view>
  </ion-pane>

  <ion-side-menu side="right">
    <header class="bar bar-header bar-stable">
      <h1 class="title">Title</h1>
    </header>
    <ion-content class="has-header">
      <ion-list>

        <ion-item nav-clear menu-close ui-sref="app.users">
          Users
        </ion-item>

        <ion-item nav-clear menu-close ui-sref="app.users.add">
          New user
        </ion-item>

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

My views structure is as such:

<ion-view title="Title">

  <ion-nav-buttons side="right">
    <button menu-toggle="right"class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>

  <ion-content class="has-header">
    ...
      View Content
    ...
  </ion-content>
</ion-view>

Upvotes: 10

Views: 21286

Answers (4)

Ari Waisberg
Ari Waisberg

Reputation: 1304

I solved in 2019 adding the property "menuToggle" to the Button. That tells Ionic/Angular that the function of that button is to be the "Hamburguer Button" so, Angular understand and hide it when the "Back Arrow Button" is shown.

<button menuToggle ion-button icon-only (click)="btnHamburger()">
   <ion-icon name="menu"></ion-icon>
</button>

Upvotes: 0

Tek Raj Pant
Tek Raj Pant

Reputation: 31

Place the navbar with menu button on the html page on which you need menu button and place navbar with back button on the page where you need back button.

Like this I need Menu On home page so place your navbar on homepage with menu button 

<ion-view title="home">
  <ion-nav-bar class="bar-stable main-header-nav home-page">
    <ion-nav-buttons side="left">
      <button class="button button-icon button-clear ion-navicon" menu- toggle="left"></button>
    </ion-nav-buttons>
  </ion-nav-bar>
  <ion-content></ion-content>
</ion-view>

And I need back button on Inbox page so use navbar with backbutton on inbox page

 <ion-view title="">
  <ion-nav-bar class="bar-stable main-header-nav home-page">
    <ion-nav-back-button class="button-clear go-back">
      </ion-nav-back-button>
  </ion-nav-bar>
  <ion-content></ion-content>
</ion-view>

Upvotes: 1

allucardster
allucardster

Reputation: 71

Is also possible to override that from a child page just adding the ion-side-menus directive inside the child template:

<ion-side-menus enable-menu-with-back-views="true"></ion-side-menus>
<ion-view view-title="My Child page">
    <ion-content>
        <h1>HEY</h1>
    </ion-content>
</ion-view>

This will add the complete navigation bar (ion-nav-bar) inside your child page that was added into menu.html template (according with the example above)

Upvotes: 4

mhartington
mhartington

Reputation: 7025

This is done by ionic by default now in beta 14. You can also toggle this by this attribute.

<ion-side-menus enable-menu-with-back-views="false">

Relative Codepen Sidemenu Starter Project Sidemenu Docs

Upvotes: 16

Related Questions