CODEWITHSUNDEEP
htmlionic-framework
Sophian Achiba
Sophian Achiba

Reputation: 197

Ionic Tab hidding back button

I have an ionic tab and would like to hide the back button for one my tab. is it possible? How about the entire tab but not the rest of my page? If you look at the code I added "hide-back-button="true" when I want to disable it but obviously this doesn't work.

I would like to do something like this.

<ion-tabs menu-close class="tabs-positive tabs-icon-top margin">

<ion-tab title="Top Picks" icon="ion-m-food" href="#/app/foodlist">   
</ion-tab>
<ion-tab title="Locations" icon="ion-m-map" href="#/app/map-view">  
</ion-tab>
<ion-tab title="Vendors" icon="ion-ion-chef" href="#/app/explore"  hide-back-button="true">   
</ion-tab>    
</ion-tabs>

Upvotes: 2

Views: 516

Answers (3)

Sophian Achiba
Sophian Achiba

Reputation: 197

I had a tab with 3 page + a side menu. So you recommendation helped and the final solution looks like this.

menu.html

<ion-nav-bar class="bar-stable">
        <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-ios-person-outline" menu-toggle="left">
        </button>
    </ion-nav-buttons>
</ion-nav-bar>

For every page in the tab. I added

<ion-view hide-back-button=true>
...
<ion-nav-buttons side="left"> 
  <button menu-toggle="left" class="button button-icon icon ion-ios-person-outline">
  </button> 
</ion-nav-buttons>
...
<ion-tabs menu-close class="tabs-positive tabs-icon-top margin">
<ion-tab title="Top Picks" icon="ion-m-food" href="#/app/foodlist">   
</ion-tab>
<ion-tab title="Locations" icon="ion-m-map" href="#/app/map-view">  
</ion-tab>
<ion-tab title="Vendors" icon="ion-ion-chef" href="#/app/explore"  hide-back-button="true">   
</ion-tab>    
</ion-tabs>

Upvotes: 0

Divyanshu Maithani
Divyanshu Maithani

Reputation: 14976

You should make hide-back-button in your ion-view for that ion-tab as true.

<ion-view hide-back-button=true>

Check out this example on codepen.

Upvotes: 2

Chaoyenpo
Chaoyenpo

Reputation: 389

At your # / App / exploretemplate html

ex. explore.html

add：

    <ion-nav-bar>
        <ion-nav-buttons side="left">
        </ion-nav-buttons>
    </ion-nav-bar>

like this：

<ion-view>
    <ion-nav-bar>
        <ion-nav-buttons side="left">
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content>
    ...
    </ion-content>
</ion-view>

and keep index.html like this:

<ion-nav-view>

<!-- keep empty -->

</ion-nav-view>

Upvotes: 2

Related Questions