The Only Ionic Material Tuts You Will Need

Basically Ionic Material provides better configurations for icons, CSS classes, new components and animations that are not natively available in the Ionic Framework.

All of these features will help you implement the Google Material Design and transform your application

In this tutorial I’ll show you how to get started with each feature of Ionic Material.

First follow the quick steps from their github:

https://github.com/zachfitz/Ionic-Material

After that … well … the documentation is still in progress and a bit buggy (you should use Safari).

http://ionicmaterial.com/demo/

If you want to take the risk of using Angular Material with Ionic Material:

https://forum.ionicframework.com/t/is-there-a-tutorial-for-using-ionic-and-angular-material/14662/16

I even heard somebody stopped programming to become a farmer because of all the stress…

Let’s Fix This **** First

If you want to use some Ionic Motions (animations), you will need to use a timeout in your controller in order to wait for everything to be loaded first

.controller('ChatsCtrl', function( $timeout, ionicMaterialMotion) {

  $timeout(function () {
    ionicMaterialMotion.fadeSlideInRight();
    ionicMaterialMotion.fadeSlideIn();
    ionicMaterialMotion.ripple();
    ionicMaterialMotion.blinds();
}, 500);

})

Components

Want to change the color of something?

<h2 class='calm'>Welcome to Ionic Material</h2>

As simple as the Ionic Framework one!

Everything has been Materialised, even the extensions of the Ionic Framework.

$ionicLoading.show({
    template:"<div class='loader'><svg class='circular'><circle class='path' cx='50' cy='50' r='20' fill='none' stroke-width='2' stroke-miterlimit='10'/></svg></div>"
            })

Inks

Inks are here to give your elements color related animations. Two very simple examples here:

<h2 class='calm ink'>Welcome to Ionic</h2>

<button class='button button-fab balanced ink-dark'>Dark</button>

Motion Elements

Let's put some Motions on our buttons.

<button class="button" id='drop-it' ng-click="toggleDrop();">Drop</button>

Then in your controller.

ionicMaterialInk.displayEffect();
function cancelDrop(){
  document.getElementById('drop-it').classList.remove('drop')
}
$scope.toggleDrop = function (){
  document.getElementById('drop-it').classList.add('drop');
  $timeout(cancelDrop, 2000)
}

Motion Lists

In our controller, we initialise the Motions.

$timeout(function () {
    ionicMaterialMotion.fadeSlideInRight();
    ionicMaterialMotion.fadeSlideIn();
    ionicMaterialMotion.ripple();
    ionicMaterialMotion.blinds();
}, 500);

And we use them after in our view.

<ion-view view-title="Chats">
  <ion-content>
    <ion-list class="animate-fade-slide-in">
      <ion-item ng-repeat="chat in chats">fade slide in </ion-item>
    </ion-list>
    <ion-list class="animate-fade-slide-in-right">
      <ion-item ng-repeat="chat in chats"> fade slide in right </ion-item>
    </ion-list>
    <ion-list class="animate-ripple">
      <ion-item ng-repeat="chat in chats"> ripple </ion-item>
    </ion-list>
    <ion-list class="animate-blinds">
      <ion-item ng-repeat="chat in chats"> blinds </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

Just adding the class "animate-X" on the ion-list will add the animation to all the elements of the list.

Conclusion

With all those covered, you are now ready to implement Ionic Material in your projects!

I advise you to have a look at the demo on Github in order to see how to mix everything and create cool applications.

https://github.com/zachfitz/Ionic-Material/tree/master/demo