Ionic Tutorial

By KnowledgeHut .

This section introduces you to every component that Ionic provides in order that you may build a mobile app.All these are HTML/ CSS components that can be used to build a mobile app page just like you would build a web page using HTML/ CSS. The Ionic framework renders it in iOS, Android and Microsoft mobile appropriately.In this tutorial, we have divided Ionic components into four categories. Do note that this is not an official grouping. This is done for the sake of understanding. The Ionic website lists these in alphabetical order.1. LayoutThese components use the latest trends in mobile design to layout content in an intuitive manner.2. Form ElementsThese components like checkboxes, input, selects etc can be used in forms3. Action triggersThese can be used to trigger actions. Buttons, Fabs, etc.4. InteractionsThese are used to facilitate interaction with the user. Modal windows, alerts, popovers, and toasts.LAYOUT RELATED COMPONENTSGridsCardsIconsListsBadgesSearchbarTabsToolbar Slides FORM ELEMENTSInputCheckboxRadioDate Time Select RangeToggleAction TriggersButtonsFab buttonsMenuAction SheetsGesturesLoadingUser Interaction ComponentsAlertsToastsPopoverModalLayout based componentsGridThe Ionic grid is built on flexbox (https://www.w3.org/TR/css-flexbox-1/) It is built based on rows and columns. The mobile screen is divided into 12 columns. Within a row, multiple columns can be laid out.The grid size is as followsNameValueDescriptionxsautoDon't set the grid width for xs screenssm540pxSet grid width to 540px when (min-width: 576px)md720pxSet grid width to 720px when (min-width: 768px)lg960pxSet grid width to 960px when (min-width: 992px)xl1140pxSet grid width to 1140px when (min-width: 1200px)If the “col-3” is not used, the columns will take equal widthIf one has col-1, the remaining will be divided equallyDetailed documentation on the grid can be found here-https://Ionicframework.com/docs/v3/api/components/grid/Grid/CardsCards are extensively used in mobile apps to group items together. Cards are currently the design pattern of choice to make the best use of space on the mobile screen.The img tag is used for the image on the top of the card. The title and content are within the <ion-card-title> and <p> tags.A list can be put into a card like this:And we have seen in the previous section that a card can have a background image.IconsAs we saw in the previous section on lists, Ionic makes it easy to use icons.All the icons available in Ionic can be accessed from https://Ionicons.com/. These icons render differently for material (Android) and iOS.ListsLists are the most widely used components in a mobile app. We have also used lists in the previous sectionsLists are usually loaded from arrays as follows:By default, lists are separated with lines. To avoid the lines, use no-linesTo include an outside margin, use the “inset”Dividers can be used as belowOr headers as below:Lists containing icons:Note that in the above example we have used an object array to display the listWith an avatarWith sliding buttonsBadgesBadges are used within lists to communicate numerical values to the userSearch BarThe search bar is used in association with a list. It returns an eventInitialize the array of coursesThis method is called whenever the text in the search bar changes. Filters by the content of the search bar and reinitialize the array.TabsTabs powers a multi-tab interfaceWe have seen tabs in the earlier moduleSlidersWe have seen slides in the previous section. Further detail on configuring sliders can be viewed fromhttps://Ionicframework.com/docs/v3/api/components/slides/Slides/We have seen the usage of slides in the previous section.With the above components, most of the mobile content can be laid out for display in an intuitive manner. In the next section, we will look at forms and the elements that can be used in a formForm ElementsForms are used to gather input from the user. Over the years they have become more and more intuitive and user-friendly. We will look at form handling in detail under reactive programming. Angular uses what are known as controls and control groups to handle formsInputInput or text box is the most common form element that is used in an HTML form. It is often used in conjunction with a label.Fixed inline labels have the label fixed to the left of the inputFloating labels allow the labels to “shrink” in size and stack on top of the input.Labels can be avoided by using placeholdersStacked labels stack the label on top of the inputCheckboxCheckboxes hold a Boolean value. It is styled based on the platform - Android/ iOS/ Microsoft.AndroidIOSMicrosoftIt comes with attributes checked and disabled. It comes with attributes checked and disabled.RadioRadio buttons also hold Boolean values. But unlike checkboxes, they are used in a group and at a given time only one radio button can hold the value true.DateTimeThe dateTime component gives the user an interface to select date and time.Refer https://Ionicframework.com/docs/v3/api/components/datetime/DateTime/ for date formatsSelectThis is used to create a dropdown similar to the <select> tag in html. This, however, gives us mobile specific popovers and action sheets.You can use a popover or an action sheet interface as wellUse the “multiple” to allow multiple selectYou can also customize the ok and cancel button textRangeA Range is a control that lets users select from a range of values by moving a slider knob along with the slider bar or track.The pin displays the value and the min and max value can be set. Otherwise, it defaults from 0 to 100.For dual knob, an object with attributes “upper” and “lower” is to be bound to the range component.You can also define the steps through which the range increments and setting “snaps to true will display markers for each incrementToggleToggle is similar to the checkbox and is used to turn a setting on or offAction TriggersButtonA button is the most common way to trigger user action. Ionic offers a wide range of attributes to enhance a buttonA simple buttonA Light button using the standard colors from the variables.scss.Outline buttonClear ButtonRound ButtonBlock ButtonFull ButtonSmall Button Large Button Fab ButtonFab buttons are material design components which are circular buttons. When pressed it performs an action or opens a submenu.Fab button on the top-right edgeFab button on the top leftFab on the bottom rightFab in left bottomFab in the centreFab in the right middleMenuMenu is a side-menu navigation that can be dragged out or toggled to show. The content of a menu will be hidden when the menu is closed.Menu adapts to the appropriate style based on the platform.This button will allow toggling the menuAction SheetAction sheets slide up from the bottom of the device screen. They are not to be used for navigation. The action sheet appears on top of the screen and can be canceled.GesturesThe gestures that Ionic supports are tap, press, pan, swipe, rotate and pinch. These can be bound to normal Ionic events.LoadingWhen a button is clicked or a component is pinched etc, sometimes, the app might be processing information or accessing a server. It is a good practice to display a loading message when that is in progress.User Interaction ComponentsAlertsAlert is the best way to let the user pick up the best between choices, give a quick input, etc. While a modal completely hides the screen on which it is loaded, the alert floats on top of the screen. A basic alertThe buttons on the prompt can be customized as below. The handler property is used to bind the event of a click of the button to a method.An alert with a prompt to take user inputThe “data” property holds the value entered in the prompt.CheckboxesThe alert can include a checkbox as follows:alert.addInput adds a checkbox. You also need to specify the type as “checkbox”. The selection is stored in the data property returned in the handler.Radio buttons Similar to checkboxes, you can include radio buttons in the alert.Toasts Toasts are “subtle” notifications displayed to the user. They mostly auto dismiss. They can be displayed on the top, bottom or middle of the screen.If the showCloseButton() attribute is set to true, then a close button is displayed.PopoverThe Popover is a view that floats above an app’s content. Popovers provide an easy way to present or gather information from the user and are commonly used in the following situations: Show more info about the current view Select a commonly used tool or configuration Present a list of actions to perform inside one of your viewsHere we have a new page created from terms and conditions. We launch it as a popoverModalModals slide in off-screen to display a temporary UI, often used for login or signup pages, message composition, and option selection.It is launched in a similar fashion as a popover.The same terms page is presented here as a modalWith this, we have discussed all the components within Ionic. We can now go ahead and look at Ionic native features.

1. Introduction

2. Introduction & Overview

3. Introduction to TypeScript

4. Introduction to Angular

5. Introduction to Ionic

6. Ionic Components

7. Ionic Native

8. HTTP, Observables & Reactive Forms

9. Building & Publishing for Android

10. Using Firebase to Persist Data

Ionic Components

This section introduces you to every component that Ionic provides in order that you may build a mobile app.

All these are HTML/ CSS components that can be used to build a mobile app page just like you would build a web page using HTML/ CSS. The Ionic framework renders it in iOS, Android and Microsoft mobile appropriately.

In this tutorial, we have divided Ionic components into four categories. Do note that this is not an official grouping. This is done for the sake of understanding. The Ionic website lists these in alphabetical order.

1. Layout

These components use the latest trends in mobile design to layout content in an intuitive manner.

2. Form Elements

These components like checkboxes, input, selects etc can be used in forms

3. Action triggers

These can be used to trigger actions. Buttons, Fabs, etc.

4. Interactions

These are used to facilitate interaction with the user. Modal windows, alerts, popovers, and toasts.

LAYOUT RELATED COMPONENTS

Grids

Cards

Icons

Lists

Badges

SearchbarTabsToolbar

Slides

FORM ELEMENTS

Input

Checkbox

Radio

Date Time

Select

Range

Toggle

Action Triggers

Buttons

Fab buttons

Action Sheets

Gestures

User Interaction Components

Alerts

Toasts

Popover

Modal

Layout based components

Grid

The Ionic grid is built on flexbox (https://www.w3.org/TR/css-flexbox-1/) It is built based on rows and columns. The mobile screen is divided into 12 columns. Within a row, multiple columns can be laid out.

The grid size is as follows

NameValueDescription

xsautoDon't set the grid width for xs screens

sm540pxSet grid width to 540px when (min-width: 576px)

md720pxSet grid width to 720px when (min-width: 768px)

lg960pxSet grid width to 960px when (min-width: 992px)

xl1140pxSet grid width to 1140px when (min-width: 1200px)

If the “col-3” is not used, the columns will take equal width

If one has col-1, the remaining will be divided equally

Detailed documentation on the grid can be found here-

https://Ionicframework.com/docs/v3/api/components/grid/Grid/

Cards

Cards are extensively used in mobile apps to group items together. Cards are currently the design pattern of choice to make the best use of space on the mobile screen.

The img tag is used for the image on the top of the card. The title and content are within the <ion-card-title> and <p> tags.

A list can be put into a card like this:

And we have seen in the previous section that a card can have a background image.

Icons

As we saw in the previous section on lists, Ionic makes it easy to use icons.

All the icons available in Ionic can be accessed from https://Ionicons.com/. These icons render differently for material (Android) and iOS.

Lists

Lists are the most widely used components in a mobile app. We have also used lists in the previous sections

Lists are usually loaded from arrays as follows:

By default, lists are separated with lines. To avoid the lines, use no-lines

To include an outside margin, use the “inset”

Dividers can be used as below

Or headers as below:

Lists containing icons:

Note that in the above example we have used an object array to display the list

With an avatar

With sliding buttons

Badges

Badges are used within lists to communicate numerical values to the user

Search Bar

The search bar is used in association with a list. It returns an event

Initialize the array of courses

This method is called whenever the text in the search bar changes. Filters by the content of the search bar and reinitialize the array.

Tabs

Tabs powers a multi-tab interface

We have seen tabs in the earlier module

Sliders

We have seen slides in the previous section. Further detail on configuring sliders can be viewed from

https://Ionicframework.com/docs/v3/api/components/slides/Slides/

We have seen the usage of slides in the previous section.

With the above components, most of the mobile content can be laid out for display in an intuitive manner. In the next section, we will look at forms and the elements that can be used in a form

Form Elements

Forms are used to gather input from the user. Over the years they have become more and more intuitive and user-friendly. We will look at form handling in detail under reactive programming. Angular uses what are known as controls and control groups to handle forms

Input

Input or text box is the most common form element that is used in an HTML form. It is often used in conjunction with a label.

Fixed inline labels have the label fixed to the left of the input

Floating labels allow the labels to “shrink” in size and stack on top of the input.

Labels can be avoided by using placeholders

Stacked labels stack the label on top of the input

Checkbox

Checkboxes hold a Boolean value. It is styled based on the platform - Android/ iOS/ Microsoft.

Android

IOSMicrosoft

It comes with attributes checked and disabled. It comes with attributes checked and disabled.

Radio

Radio buttons also hold Boolean values. But unlike checkboxes, they are used in a group and at a given time only one radio button can hold the value true.

DateTime

The dateTime component gives the user an interface to select date and time.

Refer https://Ionicframework.com/docs/v3/api/components/datetime/DateTime/ for date formats

Select

This is used to create a dropdown similar to the <select> tag in html. This, however, gives us mobile specific popovers and action sheets.

You can use a popover or an action sheet interface as well

Use the “multiple” to allow multiple select

You can also customize the ok and cancel button text

Range

A Range is a control that lets users select from a range of values by moving a slider knob along with the slider bar or track.

The pin displays the value and the min and max value can be set. Otherwise, it defaults from 0 to 100.

For dual knob, an object with attributes “upper” and “lower” is to be bound to the range component.

You can also define the steps through which the range increments and setting “snaps to true will display markers for each increment

Toggle

Toggle is similar to the checkbox and is used to turn a setting on or off

Action Triggers

Button

A button is the most common way to trigger user action. Ionic offers a wide range of attributes to enhance a button

A simple button

A Light button using the standard colors from the variables.scss.

Outline button

Clear Button

Round Button

Block Button

Full Button

Small Button

Large Button

Fab Button

Fab buttons are material design components which are circular buttons. When pressed it performs an action or opens a submenu.

Fab button on the top-right edge

Fab button on the top leftFab on the bottom right

Fab in left bottom

Fab in the centre

Fab in the right middle

Menu

Menu is a side-menu navigation that can be dragged out or toggled to show. The content of a menu will be hidden when the menu is closed.

Menu adapts to the appropriate style based on the platform.

This button will allow toggling the menu

Action Sheet

Action sheets slide up from the bottom of the device screen. They are not to be used for navigation. The action sheet appears on top of the screen and can be canceled.

Gestures

The gestures that Ionic supports are tap, press, pan, swipe, rotate and pinch. These can be bound to normal Ionic events.

Loading

When a button is clicked or a component is pinched etc, sometimes, the app might be processing information or accessing a server. It is a good practice to display a loading message when that is in progress.

User Interaction Components

Alerts

Alert is the best way to let the user pick up the best between choices, give a quick input, etc. While a modal completely hides the screen on which it is loaded, the alert floats on top of the screen.

A basic alert

The buttons on the prompt can be customized as below. The handler property is used to bind the event of a click of the button to a method.

An alert with a prompt to take user input

The “data” property holds the value entered in the prompt.

Checkboxes

The alert can include a checkbox as follows:

alert.addInput adds a checkbox. You also need to specify the type as “checkbox”. The selection is stored in the data property returned in the handler.

Radio buttons

Similar to checkboxes, you can include radio buttons in the alert.

Toasts

Toasts are “subtle” notifications displayed to the user. They mostly auto dismiss. They can be displayed on the top, bottom or middle of the screen.

If the showCloseButton() attribute is set to true, then a close button is displayed.

Popover

The Popover is a view that floats above an app’s content. Popovers provide an easy way to present or gather information from the user and are commonly used in the following situations:

Show more info about the current view

Select a commonly used tool or configuration

Present a list of actions to perform inside one of your views