Appendix C. Ionic Component Library

The Ionic applications are built atop a collection of components. These building blocks are essentially HTML and CSS, with just enough JavaScript to give them their functionality. This appendix briefly describes each component so you have a base familiarity with them:

Action Sheets

This component displays a set of options that is shown as an overlay from the bottom edge of the screen. This component is created directly via your code, not via any HTML.


Although native dialogs are available through the use of the Dialogs plug-in, you may need to display an alert that is either more complex (one that has radio buttons or checkboxes) or works without the need for the plug-in. The component will simulate the native dialog for each platform. This component is created directly via your code and not via any HTML.


This component allows you annotate the counter of some item (unread notifications, for example). They can be given any color attribute.


This will probably one of the most used components in your application. It supports a wide range of styles: Default, Outline, Clear, Round, Block, Full, Icon, and Floating. In addition, their coloring and sizing are easily controlled through the use of standard attributes.

Although they can be used independently, they also can be used within other Ionic components like Toolbars or Cards.


A popular UI component is the card component; it is a way to contain and organize information. ...

Get Mobile App Development with Ionic, Revised Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.