login design ionic | How design a responsive login page in ionic angular

login design ionic | How design a responsive login page in ionic angular

In this login design ionic tutorial we will learn how to design a responsive login and register page in ionic. Most of beginners think how to start design a login page in ionic and apply css to it. Ionic design is same as html design but some tags are different than simple html. like ion-row, ion-col, ion-grid, ion-icon etc. Here we will skip project creation as it is explained in previous blog. For installation and project creation see the blog How install ionic and develop first application So lets start-

Create a page and write the below code in .html file

I have used cdn link here for fontawesome.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/

font-awesome/4.7.0/css/font-awesome.min.css">

<ion-content class="main_content">

  

  <div class="container_home">

    <div class="form_content">

      <div class="logo_layout">

      <img class="logo" src="../../assets/imgs/logo1.png" />

      </div>

      

      <form class="form">

        <div class="input_layout">

          <ion-icon class="fa fa-user icon" color="gray"></ion-icon>

          <input class="input-field" type="text" placeholder="Email">

        </div>

    

        <div class="input_layout">

          <ion-icon class="fa fa-lock icon" color="gray"></ion-icon>

          <input class="input-field" type="text" placeholder="Password">

        </div>

    

        <ion-row class="check_layout">

          <ion-checkbox color="dark" checked="true">Keep me signed in</ion-checkbox>

          <div class="check-text">Keep me signed in</div>

        </ion-row>

    

        <ion-row class="btn_layout">

          <ion-col text-center>

            <button ion-button block class="btn_login" (click)="goDashboard()">

              Login

            </button>

          </ion-col>

          <ion-col text-center>

            <button ion-button block class="btn_register" (click)="onSignIn()">

              Register

            </button>

          </ion-col>

        </ion-row>

    

        <ion-row class="forgot_layout">

          <ion-col text-center>

            <p class="txt_line" ion-button clear color="block" >

              Change password

            </p>

          </ion-col>

          <ion-col text-center>

            <p class="txt_line" ion-button clear color="block" >

              Forgot password?

            </p>

          </ion-col>

        </ion-row>

        <ion-row class="arrow_layout">

          <p text-center class="arrow" (click)="goDashboard()">

            <i class="fa fa-arrow-right icon"></i>

          </p>

        </ion-row>

      </form>

    </div>

  </div>

  <ion-row class="bottom_layout_blue">

  </ion-row>

  <ion-row class="bottom_layout">

  </ion-row>

</ion-content>

The classes used above have specific css written in .scss file below.

.btn_layout{

 padding-left: 50px;

 padding-right: 50px;

 margin-top: 15px;

}

.main_content{

    flex: 1;

    background-image: url('../../assets/imgs/background.jpg');

}

.container_home{

    display: flex;

    flex-direction: column;

    width: 100%;

    position: fixed;

    align-items: center;

    justify-content: center;

    top: 10px;

    bottom: 40px;

    align-items: center;

    justify-content: center;

}

.form_content{

    width: 100%;

}

.form{

    margin-top: 40px;

}

.logo_layout{

    display: flex;

    justify-content: center;

}

.logo{

    width: 100px;

    align-self: center;

    position: relative;

}

.forgot_layout{

    padding-left: 50px;

    padding-right: 50px;

}

.check_layout{

    flex: 1;

    flex-direction: row;

    padding-left: 40px;

    padding-right: 40px;

    margin-top: 10px;

}

.check-text{

    margin-left: 10px;

}

.txt_line{

    font-size: 10px;

    font-weight: 500;

    color: black;

}

.input_layout{

    flex: 1;

    flex-direction: row;

    background:silver;

    margin-left: 30px;

    margin-right: 30px;

    padding-left: 10px;

    margin-top: 15px;

    border: black;

    border-width: 5px;

    border-color: black;

    border-radius: 6px;

}

.input-field{

    width: 90%;

    height: 35px;

    background: silver;

    border: none;

}

.arrow_layout{

    flex: 1;

    width: 100%;

    position: fixed;

    bottom: 30px;

    justify-content: center;

    align-content: center;

}

.arrow{

    height: 30px;

    width: 30px;

    padding: 5px;

    align-self: center;

    border-radius: 15px;

    background-color: #ED1D24;

    color: white;

}

.bottom_layout{

    width: 100%;

    height: 8px;

    position: fixed;

    bottom: 0;

    background-color: #ED1D24;

}

.bottom_layout_blue{

    width: 100%;

    height: 10px;

    position: fixed;

    bottom: 8px;

    background-color: #356AA6;

}

.btn_login{

    background-color: #ED1D24;

}

.btn_register{

    background-color: #356AA6;

}

click method have defined in .ts file like below..

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { DashboardPage } from '../dashboard/dashboard';

@Component({

  selector: 'page-home',

  templateUrl: 'home.html'

})

export class HomePage {

  constructor(public navCtrl: NavController) {

  }

// click method

  goDashboard(){

    this.navCtrl.setRoot(DashboardPage);

  }

}

The above design will look like below   

                                                    


                                         

                                                 x------- Happy coding... ---------x