In this blog post, we will see what is ionic framework, where to use it and basics of Ionic CSS elements
Ionic framework is a library based on angularjs used to create hybrid apps. It has a predefined collection of directives (angularjs) and css elements providing you with a rich set of feature which are required by most apps.
Few examples would be
-
Most android app have a pull to refresh feature. To implement this using standard angualarjs would be very difficult, ionic provides an inbuilt library for it.
-
Infinite Scrolling: Most apps have infinite scrolling on catalog pages or pages showing data with paging. Again this is a pre-existing feature in ionic.
other important features top fixed header/footer, side menu, infinite list of items, back button, history etc.
So basically using ionic framework we get access to rich feature set which helps us make amazing hybrid apps.
Getting Started
Lets first see how to create our first ionic app.
Its a prerequisite for ionic that you know the working on phonegap and angularjs.
[code]
npm install -g cordova ionic
ionic start myApp tabs
cd myApp
[/code]
If you need to run on your phone
[code]
ionic platform add android
ionic run android
[/code]
or you can also open the “myApp/www” in your browser to run it directly on your browser.
Initially its better to run the app on your browser itself, because its fast to test and debug.
Above we used the command “ionic start myApp tabs”, this has many other options as well.
In the command “tabs” is name of starter project in ionic, basically this provides pre-existing code with a tabbed interface. There few other options for starter project like
[code]
ionic start myApp blank
ionic start myApp sidemenu
[/code]
You can also specify any git repository
[code]
ionic start myApp https://github.com/driftyco/ionic-starter-sidemenu
[/code]
The full list is here https://github.com/driftyco?utf8=%E2%9C%93&query=starter and http://codepen.io/ionic/public-list/
Also its important to see your own app package name. You can do this via
[code]
ionic start etech_app -id com.excellence.etech_app blank
[/code]
Lets now see some of the important css elements in ionic which you need to know. For full documentation on ionic css element you can check here http://ionicframework.com/docs/components/
Grid
Ionic has grid system based on flex box,y ou can easily divide elements into multiple dynamic columns using this.
Read more about it here http://ionicframework.com/docs/components/#grid
Buttons
Ionic provides with a default set of buttons with different colors which we can use. There are different types of buttons (block,inline,outline,header,footer,etc)
Read about it here http://ionicframework.com/docs/components/#buttons
Cards/Lists
Cards and Lists are important design elements in a mobile application.
There are used in many places now, can read more about it here
http://ionicframework.com/docs/components/#card-showcase
and http://ionicframework.com/docs/components/#item-thumbnails
Forms
Ionic also provide many different design variations in form.
You can go through all of them here http://ionicframework.com/docs/components/#forms
Above is a list of all important, must know css element in ionic.
