Double Tab Navigation

1

I’ve found a couple similar issues, but none doing quite what I’m trying to do.

I’m trying to make a navigation style similar to the facebook app for android which has navigation tabs at the top for the primary navigation, then a contextual tab bar at the bottom that changes depending on what tab you’re on. I’ve made a wireframe of what I would like, but I can’t seem to get everything quite right.

I’ve been able to take care of each portion one at a time, but when combined it doesn’t seem to work.

Here is a codepen showing what I could come up with. The home tab is trying to use two ion-tabs elements, and the about tab uses a div.tabs instead of the ion-tabs element. Any help would be appreciated.

So far I’m thinking I may just have to go with what I did on the about tab, but is there any way to animate the content correctly but not the div.tabs? If you’ll notice right now the fade-in fires after the content is already showing, so it disappears then fades in.

1 Like
2

So no on has chimed in on this yet but I’ve been building my app using <ion-tabs> as the main navigation, and just a <div class="tabs"> on the subsequent pages. It’s kind of a pain since you need to add the tabs div on every page under that stack, then add class="tab-item-active" for the tab of the current page, but it’s the best I can come up with right now and it works. Here’s a codepen as an example.

http://codepen.io/mikeroberts/pen/cKobG

3

I’m wanting to do the same thing. I’m building an app that just basically has 4 apps inside it. So that leaves me with a row of tabs for navigating between the apps, and then contextual tabs that show up depending on which app you’re in. Using your example I’ve gotten the main navigation working and the contextual tabs to show, but the view is not being swapped when I click on the contextual tabs. The URL changes and using the onEnter and onExit functions in a state, I can see that it is indeed hitting that state, but for some reason the view isn’t swapping.

For example, while I’m on /storage/list it renders the app/storage/list.html file. When I click on the contextual tab Edit, the URL changes to /storage/edit, the state is entered, and app/storage/edit.html is loaded (seen via network tab in inspector), but the content is still what is in app/storage/list.html.

Relevant portion of index.html

  <body ng-app="foodForAllClient" ng-controller="ClientMainCtrl">

    <ion-nav-bar class="nav-title-slide-ios7 bar-calm"></ion-nav-bar>

    <ion-nav-view animation="slide-left-right"></ion-nav-view>

  </body>

Relevant portion of common/tabs.html

<ion-tabs class="tabs-top tabs-positive tabs-icon-only">
  <ion-tab title="Storage" icon-on="ion-briefcase" icon-off="ion-briefcase" ui-sref="storage.list">
    <ion-nav-view name="storage-list"></ion-nav-view>
  </ion-tab>
...
</ion-tabs>

storage.js

angular.module('foodForAllClient.storage', ['ionic'])

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

  // Changing the views between these pages isn't working
  // And a refresh on any of these pages (other than list) doesn't work either
  $stateProvider
    .state('storage', {
      url: "/storage",
      abstract: true,
      templateUrl: "app/common/tabs.html"
    })
    .state('storage.list', {
      url: "/list",
      views: {
        'storage-list': {
          templateUrl: "app/storage/list.html"
        }
      }
    })
    .state('storage.cameraAdd', {
      url: "/cameraAdd",
      views: {
        'storage-cameraAdd': {
          templateUrl: "app/storage/cameraAdd.html"
        }
      }
    })
    .state('storage.add', {
      url: "/add",
      views: {
        'storage-add': {
          templateUrl: "app/storage/add.html"
        }
      }
    })
    .state('storage.edit', {
      url: "/edit",
      views: {
        'storage-edit': {
          templateUrl: "app/storage/edit.html"
        }
      }
    });

  $urlRouterProvider.otherwise("/storage/list");
})

.controller('StorageMainCtrl', function($scope) {
  console.log('StorageMainCtrl');
});

app/storage/list.html (all of the files under storage look basically the same - I’m just trying to get it right)

<ion-view name="storage-list" title="Storage">
  <ion-content class="padding">
    <p>This is a test for the storage list</p>
  </ion-content>
  <div class="tabs tabs-icon-only tabs-energized">
    <a class="tab-item tab-item-active" ui-sref="storage.list"><i class="icon ion-clipboard"></i></a>
    <a class="tab-item" ui-sref="storage.cameraAdd"><i class="icon ion-android-camera"></i></a>
    <a class="tab-item" ui-sref="storage.add"><i class="icon ion-android-add"></i></a>
    <a class="tab-item" ui-sref="storage.edit"><i class="icon ion-edit"></i></a>
  </div>
</ion-view>

Would you be able to steer me in the right direction?

P.S. I have this tabs state defined in my app.js that I would really like to be able to use across all my modules without having to define it in each of my controllers’ states like I do in storage.js above. Is that possible?

.state('tabs', {
      url: "",
      abstract: true,
      templateUrl: "app/common/tabs.html"
    })