Today I will show you how to create the following user registration page in ionic 4

We generate a page in ionic with the following command:

ionic g page login

Now we will start with the code

We will modify the file login.html

<ion-content>

  <div class="container">

    <div class="header">
      <div class="title">
        <img src="https://image.flaticon.com/icons/png/512/149/149071.png">
      </div>
      <h3>Welcome!</h3>
      <p>Sign up to get an account</p>
    </div>

    <div class="body">

      <ion-list>
        <ion-item>
          <ion-icon slot="start" name="person"></ion-icon>
          <ion-input placeholder="Display name"></ion-input>
        </ion-item>

        <ion-item>
          <ion-icon slot="start" name="at"></ion-icon>
          <ion-input placeholder="Email"></ion-input>
        </ion-item>

        <ion-item>
          <ion-icon slot="start" name="lock"></ion-icon>
          <ion-input placeholder="Password"></ion-input>
        </ion-item>

        <ion-item>
          <ion-icon slot="start" name="lock"></ion-icon>
          <ion-input placeholder="Retype Password"></ion-input>
        </ion-item>
      </ion-list>
      
    </div>

    <div class="footer">
      Don't have an account? &nbsp; <a routerLink="/home">Sign In</a>
    </div>

  </div>

</ion-content>

We will add the styles to the file login.scss

ion-content {
    --offset-top: 0px;
    --offset-bottom: 0px;
    --background: #242A34;
    --color: #FFF;

    .container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        padding: 20px 0;

        .header {
            flex: 1;
            justify-content: center;
            text-align: center;
            padding-top: 20px;

            .title {
                img {
                    height: 100px;
                    width: 100px;
                }
            }

            h3 {
                color: #06bebd;
            }
        }
        .body {
            flex: 1.5;

            ion-list {
                --background: none;
                background: none;
                margin-bottom: 0!important;
                
                ion-item {
                    --border-color: transparent!important;
                    --highlight-height: 0;
                    --background: none;
                    background: rgba(255,255,255,0.1);
                    border-radius: 4px;
                    margin-bottom: 10px;

                    ion-icon {
                        color: #FAFAFA;
                    }

                    ion-input {
                        --color: #FFF;
                    }
                }
            }
        }
        .footer {
            display: flex;

            a {
                color: #06bebd;
                font-weight: 600;
                text-decoration: none;
            }
        }
    }
}

 


7 Comments

slope of hope · 29 July, 2020 at 2:18 AM

Heya i’m for the first time here. I came across this board and I find It really useful
& it helped me out much. I hope to give something back and
aid others like you helped me.

interactive brokers · 29 July, 2020 at 4:04 AM

It is in point of fact a great and helpful piece of info.
I’m glad that you shared this useful info with us.
Please keep us informed like this. Thanks for sharing.

Errol · 30 July, 2020 at 9:24 AM

Great post! We are linking to this great post on our site. Keep up the good writing.

opalprobert9451 · 30 July, 2020 at 10:50 AM

This article offers clear idea designed for the new people of blogging, that truly how to do blogging and site-building.

buy the dip · 31 July, 2020 at 5:41 AM

WOW just what I was searching for. Came here by searching for buy the
dip

accounting services · 31 July, 2020 at 8:07 AM

As the admin of this site is working, no uncertainty very rapidly
it will be well-known, due to its feature contents.

Thank you so much for creating this wonderful article.

satta king · 31 July, 2020 at 3:57 PM

nice post i really enjoy to read this thank
you sir

Leave a Reply

Your email address will not be published. Required fields are marked *