ionic head and bottom
ion-header-bar
This is a header title bar fixed at the top of the screen. If you add the 'bar-subheader' style to it, it will be a subtitle.
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
| Properties | Type | Description |
|---|---|---|
| align-title (optional) | string | This is aligned with the title. If there is no setting, it will be laid out according to the default layout of the phone (the default for Ios is centered, and the default for Android is left). Its value can be 'left', 'center', 'right'. |
| no-tap-scroll (optional) | boolean | By default, the content of the header title bar will scroll to the header when the screen is clicked. You can set no-tap-scroll to true to disable this action. . Its value is boolean (true/false). |
ion-footer-bar
It will be much easier to understand ion-footer-bar once you know ion-header-bar ! Just 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
| Attributes | Type | Description |
|---|---|---|
| align-title (optional) | string | This is to align the title. If there is no setting, it will be laid out according to the default layout of the phone (the default for Ios is centered, and the default for Android is left). Its value can be 'left', 'center', 'right'. |
