Building Slide to Login Screen with Ionic 5 Gesture

Ionic Framework Javascript Themes

In this article, I will walk you through how to build a slide to login screen in ionic. This become very easy to build with the help of Ionic 5 Gesture API.

Table of Contents

  • Prerequisites
  • Creating a Blank Ionic 5 Project
  • Adding the required HTML Elements and Styles
  • Adding Slide support with Ionic5 Gesture
  • Wrap up

Prerequisites

No additional package or library are required to implement gestures in ionic 5. However, Ionic and NodeJs must be installed on your computer.

Creating a Blank Ionic 5 Project

Let’s start by running the following command to create a new ionic angular blank project.

 

Go into the directory of the new project and create a page named landing, this is where we will be doing most of the job. Modify the app/app-routing.module.ts to make the new landing page the default page.

 

Adding the required HTML Elements and Styles

Open up the pages/landing.page.html and modify the content like so:

Styling the Landing Page

Let’s start by adding background image to the page. Open the pages/landing.page.scss and add the following css:

ion-content {
–background: #060dd9 !important;
–overflow: hidden !important;
}

Run the app by running ionic serve. The app should look like this:

ionic-slide-to-login

As you can see, the app is still need a lots of css styling to make it look like the original image we saw in the beginning of this tutorial.

I wont be covering the process of styling the app because it is not in the scope of this article, however, this is included in the video version of this article.

Copy and paste the html and css below to update the look and feel of the app:

Updated HTML

Updated CSS

Adding Slide to Login Support with Ionc5 Gesture

The next task is to actually write code to add slide to login functionality. Our goal is to allow user to slide the fab button to left to gain access to the main application – slide to login.

Open pages/landing.page.ts file and copy the following code and paste it to your pages/landing.page.ts


The next thing is to setup ionic gesture. We want our app to listen for gestures on the Fab Button element named slideButton.  When a gesture movement is detected, the onMove function is called, and we will modify the CSS transform Property of the fab button, and when it gets to the end of the slide wrap then the app logs in the user and navigate to the home page of the app.

Create a function and name it createSlideGesture and paste the following code.


This is a stripped down illustration of making a signal (there are extra setup choices that can be provided). We pass the component we need to append the signal to through the el property – this ought to be a reference to the local DOM hub (for example something you would normally get with a querySelector or with @ViewChild in Angular). For our situation, we would pass in a reference to the card component that we need to connect this signal to.

At that point we have our three methods onStart, onMove, and onEnd. The onStart strategy will be set off when the client begins a motion, the onMove technique will trigger each time there is a change (for example the client is hauling around on the screen), and the onEnd strategy will trigger once the client delivers the signal. In this article, we will be focusing on onStart and onMove.

First we need to get the length of the slide wrap so that we will know when to navigate to the home page. This will be done in the onStart method. And the actual button slide implementation will be done in the onMove method. The full pages/landing.page.ts should look like so:

Wrap Up!

That’s it. We have finished our slide to login article. Your comments are welcome on what you think about this article.

Similar Posts