Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 515
1O1 Avatar asked Jan 12 '15 15:01

1O1


People also ask

How do you toggle menu in Ionic?

The MenuToggle component can be used to toggle a menu open or closed. By default, it's only visible when the selected menu is active. A menu is active when it can be opened/closed. If the menu is disabled or it's being presented as a split-pane, the menu is marked as non-active and ion-menu-toggle hides itself.

How do you close an app on back pressed in Ionic?

backButton. subscribeWithPriority(99999, () => { navigator['app']. exitApp(); });

How do you handle the browser Back button in Ionic 5?

By default in Ionic, when the back button is pressed, the current view will be popped off the navigation stack, and the previous view will be displayed. If no previous view exists in the navigation stack, nothing will happen.


2 Answers

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

like image 65
mhartington Avatar answered Oct 05 '22 19:10

mhartington


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)

like image 33
allucardster Avatar answered Oct 05 '22 20:10

allucardster