How to remove the button tabs

ionic-v1
1

Hello,
I am building my first app using Ionic, using the seed app, and I’m wondering how to remove the button tabs at the bottom.
I believe I still need the function of the tabs to go to different pages, but I would like to display links to those pages from the header instead and remove the bar at the bottom.

Speaking of that, to create a button in the header I have used this code:

$scope.right = [{
	type: 'button-clear',
	content: '<i class="icon ion-navicon"></i>',
	tap: function(e) {
		// change tab
	}
}];

How would I make it change tabs from that function?

Thanks very much for your help!

2

You don’t need that function at all in your controller, in the seed you use it because there is no a custom header so using the view controller you add a button to the header and then you get that.

But on your view you can put a button at the header (check documentation for header )with a link to the proper route like

<a class="button button-full button-positive" title="Hey" href="#/tab/pets">Hey hey</a>

check your app.js, there are the routes that use your app, the first declaration show the starting point

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

// the pet tab has its own child nav-view and history
.state('tab.pet-index', {
  url: '/pets',
  views: {
    'pets-tab': {
      templateUrl: 'templates/pet-index.html',
      controller: 'PetIndexCtrl'
    }
  }
})

As you can see the tag A HREF says : “#/tab/pets” in the previous code you can see the .state(‘tab’ with url: “/tab”, this is the starting point in the seed app , then there is .state(‘tab.pet-index’ with url: ‘/pets’.

So in order to be able to got to PETS you need to put #/tab/pets , like the first example with the A html tag.

To remove the button tabs

you can create something like:

<nav-view name="menuContent"></nav-view>

And point your routes to menuContent , like

.state('tab.pet-index', {
      url: '/pets',
      views: {
        'menuContent': {
          templateUrl: 'templates/pet-index.html',
          controller: 'PetIndexCtrl'
        }
      }
    })

Check that the pets-tab is changed by menuContent