Book Image

Ionic Cookbook

By : Hoc Phan
Book Image

Ionic Cookbook

By: Hoc Phan

Overview of this book

Table of Contents (18 chapters)
Ionic Cookbook
Credits
Foreword
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Creating an introduction screen with a custom header


Every app has a different onboarding experience. Some will show a short video, while others walk the users through a few introduction slides. Creating slides is useful because you can pitch initial key messages to set an expectation for users. Also, they can move between slides at their own pace. Most apps will have three to five slides for an introduction screen.

In this recipe, you will learn how to create a three-slide intro screen using <ion-slide-box>, which is an Ionic directive that is used to create horizontal slides. In addition to this, you will incorporate ngStorage to detect whether the user has seen the introduction or not. This is useful when you don't want users to keep seeing the introduction every time the app starts. Here is the screenshot of the app:

Getting ready

Since ngStorage can work locally in the browser, there is no need to test this app on a physical device.

How to do it...

Here are the instructions to create...