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

Search Bar

Tabs

Toolbar

Slides

Form Elements

Input

Checkbox

Radio

Date Time

Select

Range

Toggle

Action Triggers

Buttons

Fab Buttons

Menu

Action Sheets

Gestures

Loading

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

iOS

Microsoft

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 left:

Fab 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.

Here we have a new page created from terms and conditions. We launch it as a popover:

Modal

Modals 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 modal:

With this, we have discussed all the components within Ionic. We can now go ahead and look at Ionic native features.