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.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.
Related download
- miriam grossi resume en
- pancreatlas a comprehensive and interactive image atlas
- ui technologies with full stack online
- bootstrap tutorial rxjs ggplot2 python data
- html book for beginners free download
- full stack web development intellipaat
- react example codepen
- about the tutorial
- react fixed footer
- css notes for professionals
Related searches
- learning about the brain for kids
- all about the winter solstice
- facts about the equinox
- quotes about the meaning of life
- bad things about the internet
- essay about the importance of learning english
- information about the roman empire
- interesting facts about the workplace
- interesting facts about the uae
- fun facts about the uae
- sermon about the family
- essay about the importance of learning en