Mobile App Development with Ionic, Revised Edition

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.

Alerts

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.

Badges

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

Buttons

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.

Cards

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