Mastering Mobile Application Development with Ionic/

...

/

The Application UI

The Application UI

Find out how to template and theme the ionic-animations application.

We'll cover the following...

Templating the home page

Now that the logic for the home page component is in place, we need to link the custom animation logic to the page template.

In the ionic-animations/src/app/pages/home/home.page.html file, we make the following amendments (highlighted):

Press + to interact
<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Travel Gallery
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
  
  <div class="background" [class.isActive]="isActive"></div>
  <ul class="gallery">
    <li *ngFor="let item of items" (click)="togglePanel(item)">
      <img src="{{ item.thumbnail }}" alt="{{ item.description }}">
      <p>{{ item.title }}</p>
    </li>
  </ul>
  <section class="panel">	
    <section class="inner">
      <span class="close-panel" (click)="togglePanel()">X Close</span>
      <h1>{{ panelTitle }}</h1>
      <img src="{{ panelImage }}">
      <p>{{ panelDesc }}</p>
    </section>
  </section>
</ion-content>

Here, we add the following elements:

  • A <div> tag on line 11 that
...