A few months back I was working on a project using Angular Material, believe me, guys angular Material is really an amazing framework which does not only create responsive apps with bootstrap structural design but it also adds a pinch of elegance to an application making it more beautiful to look at. It is gaining a lot of attention of developer due to a huge increasing in it’s demand.
Motion and ripple effects make my day…
Aham … Let’s move to Ionic, a few days back I just found a library with which make my dream come true to fuse beautification of Material design in ionic apps.
IonicMaterial can easily be used with existing Ionic apps.
So let’s start to add some Motion to you Ionic app
Step 1 – We will start from the very beginning like first we will create a new Ionic.
ionic start ionicMaterial blank
Step 2 – Then add Material JS and CSS files in our ionic app.
Install Using Bower:
Install Libraries
bower install ionic-material
Install Fonts( from Google ):
bower install robotodraft
Install Manually:
Step 3 – Add JS and CSS libs in out Ionic index.html page.
UPDATE: In ionic 3 we can add js & Css file in “assets” folder to link in “index.html”
Our HTML in header section will look something like this:
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="lib/ionic-material/dist/ionic.material.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic-material/dist/ionic.material.min.js"></script>
Step 4 – Inject Ionic Material into your Ionic App.
var app = angular.module('YOUR_APP_NAME', ['ionic', 'ionic-material']);
That’s all you need to do for adding Material to your Ionic app.
In my next post, I will explain “How to Add Animation in Ionic Material App”
See you…
Leave a Reply to vaibhav Cancel reply