You've successfully subscribed to Smartcodehub ™ Blog
Great! Next, complete checkout for full access to Smartcodehub ™ Blog
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.
Ionic 5 Tutorials Series | Part-3 Ionic UI Components

Ionic 5 Tutorials Series | Part-3 Ionic UI Components

Today most of the app wanted to have a great ui to make the user interface more attractive and engage user to interact with it.So today we will be taking to look toward components like Buttons , card , list , form input.

Abhishek Dana
Abhishek Dana

Hello there, today in this blog we are going to see some of the most important UI component of ionic that are been used almost in every app. Today most of the app wanted to have a great ui to make the user interface more attractive and engage user to interact with it.So today we will be taking to look toward components like Buttons , card , list , form input.

So before getting started let me make you understand about the theory of UI design. (UI) Design centers around envisioning what clients may need to do and guaranteeing that the interface has components that are anything but difficult to get to, comprehend, and use to encourage those activities. UI unites ideas from connection plan, visual structure, and data design.

Some of the golden points of UI Design

1) Making UI to control User

Attractive UI makes it user to control by themselves which basically means if your UI is not good user might lost his interest in few day

s but is UI is more informative and attractive the user will continue to app even if they don't have any work with app.

2) Product Comfort Level

The level of comfort while using the application make the user to gather more interest in application if your application level is to tuff or have so many unknowing thing or thing which are not understandable then that make user irritate. Then you need to work on it.

3) Application Loading time

The much the load of application the much the loss of interest of user in application.We need to make our application faster and faster that there should be quick response to user from application that user might not lose his/her interest in application.

So now lets move foward to Ionic components.Ionic have build component that display beautifully on all mobile devices and platforms you can find almost most of the thing in there docs of Ionic Components.

1) Button

Open home.page.html file in /src/app/home and remove div with id container Now let's me show you different types of button available in ionic framework.

a) Ionic Button Shapes

<!-- Normal Button -->
<ion-button>
   Normal
</ion-button>

<!-- Rounded Button -->
<ion-button shape="round">
    Round
</ion-button>

b) Ionic Button Width

 <!-- Normal Button -->
<ion-button expand="undefined">
     Normal
</ion-button>

<!-- Block Button -->
<ion-button expand="block">
    Block (with border full width)
</ion-button>

<!-- Full Button -->
<ion-button expand="full">
    Full (without border full width)
</ion-button>

c) Ionic Button Size

<!-- Small Button -->
<ion-button size="small">
    Small
</ion-button>

<!-- Normal Button -->
<ion-button size="undefined">
    Normal
</ion-button>

<!-- Large Button -->
<ion-button size="large">
    Large
</ion-button>

d) Ionic Button Color

<!-- Primary Button -->
<ion-button color="primary">
    Primary
</ion-button>

<!-- Secondary Button -->
<ion-button color="secondary">
    Secondary
</ion-button>

<!-- Warning Button -->
<ion-button color="warning">
    Warning
</ion-button>

<!-- Danger Button -->
<ion-button color="danger">
    Danger
</ion-button>

<!-- Success Button -->
<ion-button color="success">
    Success
</ion-button>

e) Ionic Button Style

<!-- Clear Button -->
<ion-button fill="clear">
    Clear
</ion-button>

<!-- Default Button -->
<ion-button fill="default">
    Default
</ion-button>

<!-- Outline Button -->
<ion-button fill="outline">
    Outline
</ion-button>

<!-- Solid Button -->
<ion-button fill="solid">
     Solid
</ion-button>

2) Ioinc Card UI

a) Ionic Simple Card

 <ion-card>
    <ion-card-content>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto
        inventore sapiente ipsum quis velit voluptates libero quisquam
        distinctio eligendi laudantium ut, placeat sint porro accusamus 		earum,molestias quam fugit ipsa!
    </ion-card-content>
</ion-card>

b) Ionic Image Card

<ion-card>
      <ion-img
        src="https://images.unsplash.com/photo-1559019762-7c5887e263c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
      ></ion-img>
      <ion-card-content>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto
        inventore sapiente ipsum quis velit voluptates libero quisquam
        distinctio eligendi laudantium ut, placeat sint porro accusamus earum,
        molestias quam fugit ipsa!
      </ion-card-content>
    </ion-card>

c) Ionic card with action button

 <ion-card>
      <ion-img
        src="https://images.unsplash.com/photo-1575930356709-e9f21011d993?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
      ></ion-img>
      <ion-card-content>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto
        inventore sapiente ipsum quis velit voluptates libero quisquam
        distinctio eligendi laudantium ut, placeat sint porro accusamus earum,
        molestias quam fugit ipsa!
      </ion-card-content>

      <ion-row>
        <ion-col size="6">
          <ion-button expand="block" fill="outline" shape="round">
            Learn More
          </ion-button>
        </ion-col>
      </ion-row>
    </ion-card>

3) List

a) Ionic Simple List

 <ion-list>
    <ion-item>
      <ion-label>Pokémon Yellow</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>Mega Man X</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>The Legend of Zelda</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>Pac-Man</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>Super Mario World</ion-label>
    </ion-item>
  </ion-list>

b) Ionic list with avatar

 <ion-list>
    <ion-item>
      <ion-avatar slot="start">
        <img
          src="https://pbs.twimg.com/profile_images/974736784906248192/gPZwCbdS.jpg"
        />
      </ion-avatar>
      <ion-label>Pokémon Yellow</ion-label>
    </ion-item>
    <ion-item>
      <ion-avatar slot="start">
        <img
          src="https://pbs.twimg.com/profile_images/974736784906248192/gPZwCbdS.jpg"
        />
      </ion-avatar>
      <ion-label>Mega Man X</ion-label>
    </ion-item>
    <ion-item>
      <ion-avatar slot="start">
        <img
          src="https://pbs.twimg.com/profile_images/974736784906248192/gPZwCbdS.jpg"
        />
      </ion-avatar>
      <ion-label>The Legend of Zelda</ion-label>
    </ion-item>
    <ion-item>
      <ion-avatar slot="start">
        <img
          src="https://pbs.twimg.com/profile_images/974736784906248192/gPZwCbdS.jpg"
        />
      </ion-avatar>
      <ion-label>Pac-Man</ion-label>
    </ion-item>
    <ion-item>
      <ion-avatar slot="start">
        <img
          src="https://pbs.twimg.com/profile_images/974736784906248192/gPZwCbdS.jpg"
        />
      </ion-avatar>
      <ion-label>Super Mario World</ion-label>
    </ion-item>
  </ion-list>

c) Ionic list Action

 <ion-list>
    <ion-item-sliding>
      <ion-item>
        <ion-label>Item</ion-label>
      </ion-item>
      <ion-item-options side="start">
        <ion-item-option color="danger">Delete</ion-item-option>
      </ion-item-options>
      <ion-item-options side="end">
        <ion-item-option>Unread</ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
    <ion-item-sliding>
      <ion-item>
        <ion-label>Item</ion-label>
      </ion-item>
      <ion-item-options side="start">
        <ion-item-option color="danger">Delete</ion-item-option>
      </ion-item-options>
      <ion-item-options side="end">
        <ion-item-option>Unread</ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
    <ion-item-sliding>
      <ion-item>
        <ion-label>Item</ion-label>
      </ion-item>
      <ion-item-options side="start">
        <ion-item-option color="danger">Delete</ion-item-option>
      </ion-item-options>
      <ion-item-options side="end">
        <ion-item-option>Unread</ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
    <ion-item-sliding>
      <ion-item>
        <ion-label>Item</ion-label>
      </ion-item>
      <ion-item-options side="start">
        <ion-item-option color="danger">Delete</ion-item-option>
      </ion-item-options>
      <ion-item-options side="end">
        <ion-item-option>Unread</ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>

4) Ionic Form

a) Login Form Input

Basically here a login form consist of email and password so we will make a simple login form with input and button.

Login Page

To generate page in ionic you need to write ionic g page login this will generate page login and to load this login page at inital page like whenever app starts the first screen shoulb be login then we need to do some changes in app-routing.module.ts file present in src/app

After generating your login page your Initial File of app-routing.module.ts will look like this

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'login',
    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

You need to change the above part here

  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },

To this

  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },

Now when you reload save your file and reload your browser it will open login page initially we will go more in detail with routing in upcoming blog.

Now change file login.page.html in src/app/login to make login UI design

<ion-header>
  <ion-toolbar>
    <ion-title>Login</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="container">
    <ion-item lines="full">
      <ion-label position="floating">Email</ion-label>
      <ion-input type="email"></ion-input>
    </ion-item>
    <ion-item lines="full">
      <ion-label position="floating">Password</ion-label>
      <ion-input type="password"></ion-input>
    </ion-item>
    <ion-item class="ion-no-padding" lines="none">
      <ion-label color="primary" style="text-align: right;" slot="end">
        <small>Forgot Password ?</small>
      </ion-label>
    </ion-item>
    <ion-button expand="full" fill="outline" shape="round">
      Login
    </ion-button>
  </div>
</ion-content>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;

  & ion-item {
    width: 100%;
  }
}

That's it for this blog because there are many more components that we are going to learn while demonstrating an application in our next blog.

Our next blog would be on building a UI with ionic application basically design to code.

Stay tuned.