Header Override Best Practices For a Single Tab

ionic-v1
1

Hello all!

I have a simple app utilizing a tabbed layout with three tabs. On one of my tabs, I’d like to put a button in the header, but only on that single tab. This got me wondering, how do people usually solve this?

How can I have a custom header for a single tab?

Instead of having the header defined in index.html I could keep that code within each tab’s template, but that seems redundant and cumbersome… I found a similar topic on the forums but there wasn’t a solution. I could post a codepen for this, but I feel this question is more general and not related to any specific code (besides how tabbed apps are typically bootstrapped by ionic start) so I have left that out. Thanks in advance for anyone who can describe how they went about solving this in their app. Cheers!

2

I wish someone would answer this. I joined to post the same exact question and then found this.

I started with the ionic tabs loadout, and even managed to add an Edit button to one single header with </ion-nav-buttons> directly under my templates <ion-view>, but cant seem to fully override or add a search bar.

3

@prvlgdRich Me too, I still haven’t figured out what the best practice is for doing something like this.

4

try this:

<ion-view view-title="" hide-back-button="true">
  <ion-nav-title>
    <div class='button-bar bar-light button-center-in-nav-bar'>
      <button class='button border-positive'>header center button 1</button>
      <button class='button border-positive'>header center button 2</button>
    </div>
  </ion-nav-title>
  <ion-nav-buttons side="left">
    <button class="button button-clear button-calm bold" >
      <i class="icon ion-ios-arrow-left"></i>header left button</button>
  </ion-nav-buttons>
  <ion-nav-buttons side="right">
    <button class="button button-clear button-calm bold">header right button</button>
  </ion-nav-buttons>
</ion-view>

css:

.button-bar.button-center-in-nav-bar{ text-align:center ;-webkit-box-flex: 0 1 auto; -webkit-flex:  0 1 auto ; -moz-box-flex:  0 1 auto ;   -moz-flex:  0 1 auto ;   -ms-flex:  0 1 auto ;   flex:  0 1 auto ;   width: 95% ;  margin:7px auto ;}
.button-bar.button-center-in-nav-bar>.button { min-height: 25px;line-height: 25px;}
1 Like