O'Reilly logo

Ionic : Hybrid Mobile App Development by Hoc Phan, Sani Yusuf, Rahat Khanna

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Ionic header and footer

Ionic has many directives to help common layouts in mobile apps. Ionic headers and footers are important directives for showing proper context for any view in a mobile app. The exact directives, name and their usage are detailed as follows.

The <ion-header-bar> directive

This directive adds a fixed header bar above any content. You can also add a subheader by adding a CSS class bar-subheader on the second <ion-header-bar> directive, which will be shown below the primary header. The sample code for usage is as follows:

<ion-header-bar align-title="left" class="bar-positive"> <div class="buttons"> <button class="button" ng-click="back()">Back</button> </div> <h1 class="title">All about Books</h1> <div class="buttons"> <button ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required