May 22, 2021 ionic
This is a head title bar fixed to the top of the screen. If you add the 'bar-subheader' style to it, it's a subtitle.
<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>
| Property | Type | Describe |
|---|---|---|
|
align-title
(optional)
|
string
|
This is aligned with title. I f not, it will follow the phone's default typography (Ios is centered by default and Android is left by default). Its values can be 'left', 'center', 'right'. |
|
no-tap-scroll
(optional)
|
boolean
|
By default, the header bar scrolls to the header when you tap the screen, and you can set no-tap-scroll to true to disable the action. Its value is the boolean value (true/false). |
Knowing ion-header-bar, it's much easier to understand ion-footer-bar! It's just that ion-footer-bar is at the bottom of the screen.
<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>
Unlike ion-header-bar, ion-footer-bar has only the align-title API.
| Property | Type | Describe |
|---|---|---|
|
align-title
(optional)
|
string
|
This is aligned with title. I f not, it will follow the phone's default typography (Ios is centered by default and Android is left by default). Its values can be 'left', 'center', 'right'. |