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!