101

I want to use ionic with material design. I am stuck between using ionic directives with custom CSS and angular-material

I have read that using ionic directives we get lot of efficient features like

  • App data is remembered with UI-router, even after navigating to other view and coming back to the page

  • Ionic list items are rendered only up to display height and reused when scrolling down or up

and a lot of performance improvements.

But, if I use ionic directives they don't have the material design.

If I use angular-material I will not have these performance improvements, and extra features needed for a mobile application.

Angular-material directives are like

<md-list>
  <md-item ng-repeat="item in items">
    Hello, {{item}}!
  </md-item>
</md-list>

Ionic directives are like 

<ion-list>
  <ion-item ng-repeat="item in items">
    Hello, {{item}}!
  </ion-item>
</ion-list>

Looks like Ionic is funding angular-material project development, then why is angular-material not compatible to use with ionic?

How can I use angular-material components without losing the performance improvements and features of ionic?

OR

is there a better idea for using material design with ionic?

gorkem
  • 731
  • 1
  • 10
  • 17
Vamsi
  • 9,510
  • 6
  • 38
  • 46
  • It will propably take some time, until ngMaterial and ionic will work with each other. Ionic always has to support iOS as well. I'm not sure where Ionix is heading design-wise. When the project started they wanted the apps to look identical on all platforms. They scraped that goal some time ago and now head for more platform continuity, which is shown by the job posting as well. You might want to ask the developers directly (the Ionic forum is a good place to ask) concerning the roadmap to material design. – Markus Müller Mar 23 '15 at 12:54
  • 1
    I have posted in ionic forums, with no luck. Some of the google app's are using material design on both android and ios. But I'm currently interested in android. iOS is more costly and every year :( . It just discourages starter's like me to join ios. I think ios should use limited charge for developer account. – Vamsi Mar 23 '15 at 13:29
  • I'm sure they will announce the post v1 roadmap in the near future. – Markus Müller Mar 23 '15 at 16:32

3 Answers3

71

I found a material design CSS framework known as Materializecss. It looks promising. It's just plain CSS and javascript framework.

http://materializecss.com/

Advantages over other frameworks

  1. Pure CSS classes, will not conflict with ionic directives. No performance loss.
  2. Of all the frameworks I have seen, this is the only one closely following material design rules
  3. Almost ready it has about 50+ contributors it's current Version 0.95.3 in less than 6 months
  4. Easy to use. Well documented with feature wise navigation.
  5. It has almost all the material design features needed for an app.

This page http://materializecss.com/getting-started.html will show you how to include it in your projects.

I hope this helps for any of you searching for a good material design framework.

UPDATE: 2015-07-09

I Found another lightweight powerful beautiful CSS framework for material design

Material Design Light http://www.getmdl.io/

It is lightweight, has smooth and quick animations, looking pretty good. It was made by one of the Google developers. It is officially promoted by google https://developers.google.com/web/. It is getting quite popular, try it. Comparision with Angular Material

UPDATE: 2015-10-23

Ionic2 has InBuilt Support for Material Design in Android

It's Official, You can watch Ionic2 demo in AngularConnect, It has Material Design as default for Android. We don't need to worry about choosing a Material Design framework.

Community
  • 1
  • 1
Vamsi
  • 9,510
  • 6
  • 38
  • 46
  • 1
    The big problem with this is that it needs jQuery – darryn.ten Mar 24 '15 at 09:05
  • 1
    We just need the css. Popup's, modals and other features exists in ionic. So, jquery is mostly not needed unless we are trying to use materialize javascript features that are not in ionic. – Vamsi Mar 24 '15 at 09:44
  • Do u have any feedback using Material Design Light http://www.getmdl.io/ I cam here having the same problem and question about ionic + material design. So would be much appreciate any feedback about the library – Javier Salinas Sep 04 '15 at 10:07
  • I have not personally used `Material Design Light`, It looks promising. Here is the comparison of `Material Design Light` and `bootstrap` http://tutorialzine.com/2015/07/comparing-bootstrap-with-mdl/, If you have used bootstrap it will help. Google promoting this in its web developer page. So, It must be good enough. – Vamsi Sep 16 '15 at 11:21
25

There is a fairly new project called Ionic Material.

I've tried it out and it works pretty well, but be advised that it is still in "Pre-Release Preview" mode.

According to the github repo it should enter Alpha in April 2015.

It can be installed with bower

bower install ionic-material

That's pretty much all you need to do, but be warned, there are bugs and the documentation is basically non-existent.

Good luck!

darryn.ten
  • 6,784
  • 3
  • 47
  • 65
  • 9
    I have seen ionic-material library before, but the problem is 1. This is no where near completion. No documentation available. 2. This is not in active development, and doesn't have good support. only one guy worked on it for 7 days as seen today. So it is hard use it in production app without guarantee. 3. Angular-material, ionic both have good funding and support and very good developers are working on it, at good pace. so I can trust them. – Vamsi Mar 18 '15 at 17:27
3

Ionic Material and Ionic Material Design Lite are two budding new libraries that aim to be an extension of ionic framework. Though a little immature, works well with ionic components and supports the material theming well.

This probably could give more of an insight.

Community
  • 1
  • 1
varna
  • 929
  • 8
  • 12