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.
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.
These are used to facilitate interaction with the user. Modal windows, alerts, popovers, and toasts.
LAYOUT RELATED COMPONENTS
User Interaction Components
Layout based components
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
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-
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.
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 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 are used within lists to communicate numerical values to the user
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 powers a multi-tab interface
We have seen tabs in the earlier module
We have seen slides in the previous section. Further detail on configuring sliders can be viewed from
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
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 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
Checkboxes hold a Boolean value. It is styled based on the platform - Android/ iOS/ Microsoft.
It comes with attributes checked and disabled. It comes with attributes checked and disabled.
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.
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
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
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 is similar to the checkbox and is used to turn a setting on or off
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.
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 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 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.
The gestures that Ionic supports are tap, press, pan, swipe, rotate and pinch. These can be bound to normal Ionic events.
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
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.
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.
Similar to checkboxes, you can include radio buttons in the alert.
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.
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
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.