One header for all tabs

@greengold wrote:

Hi there!
Simply, I would like to know how to make one standard header for all the tabs in app.
Mine application is side menu started that has implemented tbas in a standard way.

menu.html:

  <ion-nav-back-button side="left">
  </ion-nav-back-button>

  <ion-nav-buttons side="right">
    <button class="button button-icon button-clear ion-navicon" menu-toggle="right">
    </button>
  </ion-nav-buttons>


</ion-nav-bar>
<ion-nav-buttons class="bar bar-stable" side="left">
  <img class="title" src="img/aicon-icon-thumb.png">
</ion-nav-buttons>
<ion-nav-title>
  <h2 class="title">Vlado Putin</h2>
</ion-nav-title>
<ion-nav-view name="menuContent"></ion-nav-view>

Login


Search


Browse


Playlists


register

tabs.html:

<ion-nav-buttons class="bar bar-stable" side="left">
  <img class="title" src="img/aicon-icon-thumb.png">
</ion-nav-buttons>
<ion-nav-title>
  <h2 class="title">Vlado Putin</h2>
</ion-nav-title>

<div data-ng-show="true">
  <div ng-include src="'screens/main/status-bar.html'">
  </div>
</div>

<ion-tabs class="tabs-icon-top tabs-color-assertive">

  <ion-nav-buttons class="bar bar-header bar-stable" side="left">
    <img class="title" src="img/aicon-icon-thumb.png">
  </ion-nav-buttons>
  <ion-nav-title>
    <h2 class="title">Vlado Putin</h2>
  </ion-nav-title>

  <ion-tab title="{{ 'activity' | translate }}" icon="ion-clipboard"
           ui-sref="app.tabs.main">
    <ion-nav-view name="main"></ion-nav-view>
  </ion-tab>

  <ion-tab title="{{ 'break' | translate }}" icon="ion-coffee"
           ui-sref="app.tab.free">
    <ion-nav-view name="free"></ion-nav-view>
  </ion-tab>

  <ion-tab title="{{ 'requests' | translate }}" icon="ion-speakerphone"
           ui-sref="app.tab.free">
    <ion-nav-view name="free"></ion-nav-view>
  </ion-tab>

  <ion-tab title="{{ 'order' | translate }}" icon="ion-cube" badge="1" badge-style="badge-assertive"
           ui-sref="app.tabs.jobs">
    <ion-nav-view name="jobs"></ion-nav-view>
  </ion-tab>

  <ion-tab title="{{ 'info' | translate }}" icon-off="ion-information-circled" icon-on="ion-information-circled"
           ui-sref="app.tab.free">
    <ion-nav-view name="free"></ion-nav-view>
  </ion-tab>


</ion-tabs>

and main-tab.html content:

Marek High

<div class="row row-center">
  <div style="padding: 0;" class="col-offset-10 col-80">
    <div class="responsive-md">

      <div class="row">
        <div class="col">
          <ds-widget-clock theme="dark" show-digital digital-format="'HH:mm'">></ds-widget-clock>
        </div>
      </div>

      <div class="row">
        <div class="col text-center">
          <button translate data-ng-click="handleEvent()"
                  class="button button-full button-positive">
            {{inDuty ? 'break' : 'arrival'}}
          </button>
        </div>

       ...

and that displays like this:

and that's fine, but when I click some other tab, header will dissapear.
So, how to define one, common header on one place for all the tabs??

Thanks for suggestions!

Posts: 1

Participants: 1

Read full topic