About the Tutorial

Ionic

About the Tutorial

Ionic is open source framework used for developing mobile applications. It provides tools and services for building Mobile UI with native look and feel. Ionic framework needs native wrapper to be able to run on mobile devices. This is an introductory tutorial, which covers the basics of the Ionic Open Source Framework and explains how to deal with its various components and sub-components.

Audience

This tutorial is created for JavaScript developers that are new to mobile development. It provides simple, easy to understand explanations with useful working examples. We will go through most of the Ionic Framework so you can also use this as a reference for your projects. This tutorial is intended to make you comfortable in getting started with the Ionic Open Source Framework and its various functions.

Prerequisites

Since Ionic is built on top of AngularJS and Apache Cordova, you will need to have basic knowledge about these technologies. You also need to be familiar with HTML, CSS and JavaScript, if you want to understand all the information provided.

Copyright and Disclaimer

Copyright 2018 by Tutorials Point (I) Pvt. Ltd. All the content and graphics published in this e-book are the property of Tutorials Point (I) Pvt. Ltd. The user of this e-book is prohibited to reuse, retain, copy, distribute or republish any contents or a part of contents of this e-book in any manner without written consent of the publisher. We strive to update the contents of our website and tutorials as timely and as precisely as possible, however, the contents may contain inaccuracies or errors. Tutorials Point (I) Pvt. Ltd. provides no guarantee regarding the accuracy, timeliness or completeness of our website or its contents including this tutorial. If you discover any errors on our website or in this tutorial, please notify us at contact@

i

Ionic

Table of Contents

About the Tutorial ............................................................................................................................................ i Audience........................................................................................................................................................... i Prerequisites..................................................................................................................................................... i Copyright and Disclaimer ................................................................................................................................. i Table of Contents ............................................................................................................................................ ii

IONIC - BASICS............................................................................................................................1

1. Ionic ? Overview .......................................................................................................................................2 Ionic Framework Features ............................................................................................................................... 2 Ionic Framework Advantages .......................................................................................................................... 2 Ionic Framework Limitations ........................................................................................................................... 3

2. Ionic ? Environment Setup ........................................................................................................................4 Installing Cordova and Ionic ............................................................................................................................ 4 Creating Apps .................................................................................................................................................. 4 Tabs App .......................................................................................................................................................... 5 Blank App......................................................................................................................................................... 7 Side Menu App ................................................................................................................................................ 9 Test App in Browser ...................................................................................................................................... 11 Project Folder Structure ................................................................................................................................ 12

IONIC ? CSS COMPONENTS .......................................................................................................14

3. Ionic ? Colors ..........................................................................................................................................15 Ionic Color Classes ......................................................................................................................................... 15 Ionic Color Usage........................................................................................................................................... 15 Customizing Colors with CSS ......................................................................................................................... 16 Customizing Colors using SASS ...................................................................................................................... 17

4. Ionic ? Content........................................................................................................................................19

5. Ionic ? Header.........................................................................................................................................20 Adding Header ............................................................................................................................................... 20 Header Colors ................................................................................................................................................ 21 Header Elements ........................................................................................................................................... 22 Sub Header .................................................................................................................................................... 23

6. Ionic ? Footer..........................................................................................................................................26 Adding Footer ................................................................................................................................................ 26 Footer Colors ................................................................................................................................................. 27 Footer Elements ............................................................................................................................................ 28

7. Ionic ? Buttons........................................................................................................................................30 Block Buttons................................................................................................................................................. 30 Button Size..................................................................................................................................................... 31 Button Colors................................................................................................................................................. 31 Button Outline ............................................................................................................................................... 33 Adding Icons .................................................................................................................................................. 34 Button Bar ..................................................................................................................................................... 35

ii

Ionic

8. Ionic ? Lists .............................................................................................................................................36 Creating Ionic List .......................................................................................................................................... 36 Inset List......................................................................................................................................................... 37 Item Dividers ................................................................................................................................................. 37 Adding Icons .................................................................................................................................................. 39 Adding Avatars and Thumbnails .................................................................................................................... 40

9. Ionic ? Cards ...........................................................................................................................................42 Adding Cards.................................................................................................................................................. 42 Card Header and Footer ................................................................................................................................ 43 Complete Card............................................................................................................................................... 44

10. Ionic ? Forms...........................................................................................................................................46 Using Input Form ........................................................................................................................................... 46 Ionic Labels .................................................................................................................................................... 47 Stacked Label ................................................................................................................................................. 48 Floating Label ................................................................................................................................................ 49 Inset Inputs .................................................................................................................................................... 50

11. Ionic ? Toggle ..........................................................................................................................................52 Using Toggle .................................................................................................................................................. 52 Multiple Toggles ............................................................................................................................................ 53 Styling Toggle................................................................................................................................................. 55

12. Ionic ? Checkbox .....................................................................................................................................59 Adding Checkbox ........................................................................................................................................... 59 Multiple Checkboxes ..................................................................................................................................... 60 Styling Checkbox............................................................................................................................................ 61

13. Ionic ? Radio Button................................................................................................................................64 Adding Radio Buttons .................................................................................................................................... 64 Multiple Radio Button Groups....................................................................................................................... 66

14. Ionic ? Range ..........................................................................................................................................68 Using Range ................................................................................................................................................... 68 Adding Icons .................................................................................................................................................. 69 Styling Range ................................................................................................................................................. 70

15. Ionic ? Select...........................................................................................................................................72 Using Select ................................................................................................................................................... 72 Styling Select ................................................................................................................................................. 73

16. Ionic ? Tabs .............................................................................................................................................78 Simple Tabs.................................................................................................................................................... 78 Adding Icons .................................................................................................................................................. 79 Striped Tabs ................................................................................................................................................... 82

17. Ionic ? Grid..............................................................................................................................................83 Simple Grid .................................................................................................................................................... 83 Column Sizes.................................................................................................................................................. 84 Horizontal and Vertical Positioning ............................................................................................................... 86 Responsive Grid ............................................................................................................................................. 88

iii

Ionic

18. Ionic ? Icons ............................................................................................................................................91 How to use Icons? ......................................................................................................................................... 91

19. Ionic ? Padding........................................................................................................................................93

IONIC - JAVASCRIPT COMPONENTS .......................................................................................... 95

20. Ionic ? JavaScript Action Sheet................................................................................................................96 Using Action Sheet ........................................................................................................................................ 96

21. Ionic ? JavaScript Backdrop...................................................................................................................100 Using Backdrop............................................................................................................................................ 100

22. Ionic ? JavaScript Content .....................................................................................................................102

23. Ionic ? JavaScript Forms ........................................................................................................................103 Using ion-checkbox...................................................................................................................................... 103 Using ion-radio ............................................................................................................................................ 106 Using ion-toggle........................................................................................................................................... 107

24. Ionic ? JavaScript Events .......................................................................................................................110 Using Events ................................................................................................................................................ 111

25. Ionic ? JavaScript Header ......................................................................................................................112 Using JavaScript Header .............................................................................................................................. 112 Styling Header ............................................................................................................................................. 112 Adding Elements.......................................................................................................................................... 113 Adding Sub Header ...................................................................................................................................... 114

26. Ionic ? JavaScript Footer .......................................................................................................................116 Using Footer ................................................................................................................................................ 116 Adding Elements.......................................................................................................................................... 117 Adding Sub Footer ....................................................................................................................................... 117

27. Ionic ? JavaScript Keyboard...................................................................................................................119 Using Keyboard............................................................................................................................................ 119

28. Ionic ? JavaScript List ............................................................................................................................123 Using List ..................................................................................................................................................... 123 Delete Button .............................................................................................................................................. 124 Reorder Button ............................................................................................................................................ 125 Option Button.............................................................................................................................................. 127 Other Functions ........................................................................................................................................... 129

29. Ionic ? JavaScript Loading .....................................................................................................................130 Using Loading .............................................................................................................................................. 130 Loading Config ............................................................................................................................................. 132

30. Ionic ? JavaScript Modal .......................................................................................................................134 Using Modal................................................................................................................................................. 134

31. Ionic ? JavaScript Navigation.................................................................................................................140 Using Navigation.......................................................................................................................................... 140

iv

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download