The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Ionic Components Overview

Next ►
►

In this section, we will explore the basic components provided by the Ionic framework. These components are the building blocks of any Ionic application and are designed to work seamlessly across different platforms, providing a consistent look and feel.

Key Concepts

  1. Ionic Components: Pre-built UI elements that can be used to create a mobile application.
  2. Cross-Platform Compatibility: Ionic components are designed to work on both iOS and Android platforms.
  3. Customization: Components can be customized using CSS and SCSS to match the desired look and feel of your application.

Common Ionic Components

  1. Buttons

Buttons are essential for user interaction. Ionic provides various types of buttons that can be easily customized.

<ion-button>Default Button</ion-button>
<ion-button color="primary">Primary Button</ion-button>
<ion-button color="secondary">Secondary Button</ion-button>
<ion-button expand="full">Full-Width Button</ion-button>

  1. Icons

Icons are used to enhance the visual appeal and usability of your application. Ionic uses the Ionicons library.

<ion-icon name="home"></ion-icon>
<ion-icon name="star"></ion-icon>
<ion-icon name="heart"></ion-icon>

  1. Lists

Lists are used to display a series of items. They can be customized to include various elements like text, icons, and buttons.

<ion-list>
  <ion-item>
    <ion-label>Item 1</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Item 2</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Item 3</ion-label>
  </ion-item>
</ion-list>

  1. Cards

Cards are used to display content in a structured and visually appealing manner.

<ion-card>
  <ion-card-header>
    <ion-card-title>Card Title</ion-card-title>
    <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
  </ion-card-header>
  <ion-card-content>
    This is the content of the card.
  </ion-card-content>
</ion-card>

  1. Modals

Modals are used to display content in a dialog box that appears on top of the current page.

import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { ModalPage } from './modal-page';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  constructor(public modalController: ModalController) {}

  async presentModal() {
    const modal = await this.modalController.create({
      component: ModalPage
    });
    return await modal.present();
  }
}

  1. Toasts

Toasts are used to display brief messages to the user.

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  constructor(public toastController: ToastController) {}

  async presentToast() {
    const toast = await this.toastController.create({
      message: 'This is a toast message.',
      duration: 2000
    });
    toast.present();
  }
}

Practical Exercise

Task

Create a simple Ionic application that includes a button, an icon, a list, and a card. When the button is clicked, display a toast message.

Solution

  1. Create a new Ionic project:

    ionic start myApp blank
cd myApp

  2. Update home.page.html:

    <ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Components Overview
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-button (click)="presentToast()">Click Me</ion-button>
  <ion-icon name="star"></ion-icon>
  <ion-list>
    <ion-item>
      <ion-label>Item 1</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>Item 2</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>Item 3</ion-label>
    </ion-item>
  </ion-list>
  <ion-card>
    <ion-card-header>
      <ion-card-title>Card Title</ion-card-title>
      <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
    </ion-card-header>
    <ion-card-content>
      This is the content of the card.
    </ion-card-content>
  </ion-card>
</ion-content>

  3. Update home.page.ts:

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  constructor(public toastController: ToastController) {}

  async presentToast() {
    const toast = await this.toastController.create({
      message: 'Button clicked!',
      duration: 2000
    });
    toast.present();
  }
}

Summary

In this section, we covered the basic components provided by Ionic, including buttons, icons, lists, cards, modals, and toasts. These components are essential for building a functional and visually appealing Ionic application. We also provided a practical exercise to reinforce the concepts learned. In the next section, we will dive deeper into using Ionic buttons and icons.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved