ionic tops and bottoms
ion-header-bar
This is fixed to the top of the screen a header title bar. If you add to it 'bar-subheader' this style, it is subtitled.
usage
<ion-header-bar align-title="left" class="bar-positive">
<div class="buttons">
<button class="button" ng-click="doSomething()">Left Button</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons">
<button class="button">Right Button</button>
</div>
</ion-header-bar>
<ion-content>
Some content!
</ion-content>
API
| Attributes | Types of | description |
|---|---|---|
| align-title (optional) | string | This is the alignment of the title. If not set, it will follow the default layout of the phone (Ios default is centered, Android default Left). Its value can be 'left', 'center', 'right'. |
| no-tap-scroll (optional) | boolean | By default, the head of the title bar when you click on the screen contents will scroll to the head, no-tap-scroll can be set to true to disable the action. . Its value is a Boolean value (true / false). |
ion-footer-bar
Know ion-header-bar, understand ion-footer-bar on easy attractive! Only ion-footer-bar is at the bottom of the screen.
usage
<ion-content>
Some content!
</ion-content>
<ion-footer-bar align-title="left" class="bar-assertive">
<div class="buttons">
<button class="button">Left Button</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons" ng-click="doSomething()">
<button class="button">Right Button</button>
</div>
</ion-footer-bar>
API
And ion-header-bar is different, ion-footer-bar only align-title this API.| Attributes | Types of | description |
|---|---|---|
| align-title (optional) | string | This is the alignment of the title. If not set, it will follow the default layout of the phone (Ios default is centered, Android default Left). Its value can be 'left', 'center', 'right'. |