Ionic Header and Footer | Tutorial

Tutorial -- Learn not just technology, but dreams!

Ionic Tutorial

Ionic Tutorial Ionic Installation Create an Ionic App

Ionic CSS

Ionic Header and Footer Ionic Buttons Ionic Lists Ionic Cards Ionic Forms and Inputs Ionic Toggle Ionic Checkbox Ionic Radio Button Ionic Range Ionic Select Ionic Tab (Tab Bar) Ionic Grid Ionic Colors Ionic Icon

Ionic JavaScript

Ionic Action Sheet Ionic Backdrop Ionic Pull-to-Refresh Ionic Checkboxes Ionic Radio Operations Ionic Toggle Operations Ionic Gesture Events Ionic Header and Footer Ionic List Operations Ionic Loading Actions Ionic Modal Windows Ionic Navigation Ionic Platform Ionic Popovers Ionic Dialogs Ionic Scrollbars Ionic Side Menus Ionic Slide Box Ionic Spinner Ionic Tab Bar Operations

Ionic Gesture Events

Ionic List Operations

Explore More

• Programming
• Web Design & Development
• Web Service
• Scripting
• Network Services
• Computer Science
• Scripting Languages
• Programming Languages
• Software
• Development Tools

---

Ionic Header and Footer

ion-header-bar

This is a fixed header title bar at the top of the screen. If you add the 'bar-subheader' class to it, it becomes a subheader.

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

Attribute	Type	Description
align-title (optional)	string	Aligns the title. If not set, it defaults to the device's layout (iOS centers by default, Android left-aligns by default). Values can be 'left', 'center', or 'right'.
no-tap-scroll (optional)	boolean	By default, tapping the screen scrolls the content to the header. Set no-tap-scroll to true to disable this behavior. Value is a boolean (true/false).

---

ion-footer-bar

Now that you know ion-header-bar, understanding ion-footer-bar is easy! It works the same way, except ion-footer-bar is fixed 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

Unlike ion-header-bar, ion-footer-bar only has the align-title attribute.

Attribute	Type	Description
align-title (optional)	string	Aligns the title. If not set, it defaults to the device's layout (iOS centers by default, Android left-aligns by default). Values can be 'left', 'center', or 'right'.