Search⌘ K
AI Features
Home
Courses
Mastering Mobile Application Development with Ionic

Introduction to Ionic Templates

Explore how Ionic templates form the foundation of your app's user interface. Learn to use pre-defined components like ion-header, ion-toolbar, and ion-content to build aesthetic and functional pages that support dynamic content and smooth navigation.

We'll cover the following...

As the public-facing part of the app, templates are pretty important when it comes to rendering content in an aesthetic, usable interface that users can enjoy interacting with. Get this right, and we’re off to a good start!

Default HTML page templates

When we create pages for our app using the Ionic CLI tool (these pages, as we covered in previous chapters, are actually components), we’ll find very basic HTML templates being generated, like the following:

HTML
<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Blank</ion-title>
    </ion-toolbar>
  </ion-header>
  <div id="container">
    <strong>Ready to create an app?</strong>
    <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
  </div>
</ion-content>

Pre-defined Ionic components

We’ll see that our generated template contains the following pre- built Ionic components:

  • The <ion-header> component
  • The <ion-toolbar> component
  • The <ion-title> component
  • The <ion-content> component

The <ion-header> component is a parent wrapper that is displayed as the header bar at the top of the page. This contains the <ion-toolbar> component, which displays the page title for the app using the <ion-title> component and can optionally contain any number of buttons, a <searchbar> component, or dividers.

A back button can be displayed here whenever a new page is pushed to the navigation stack (although this back button has to be added manually since Ionic version 4 and above).

The <ion-content> component is where the main content for our page is displayed and is a scrollable area able to be controlled with these methods.