Will Google's Material Design/Polymer elements ever come to Ionic?

ionic-v1
#6

Polymer is Kick Ass, but only works on bleeding edge latest browsers & very limited in reach. A future adoption is always on the card, but now I think it’s too early to target for a production App

#7

Interesting, but why define angular.module() twice?

#8

It’s not defined twice. When you use angular.module without a second parameter, it will return an instance of an existing module.

#9

Databinding is very easy. I made a demo ionic integrated with ploymer (I call it polyonic). First impression (I am not done yet ) can be seen here http://www.osmanmrzljak.com/polyonic/index2.html#/tab/account . As you can see ploymer buttons with z-shadows , databinding with rootScope and showing paper-toast on button clicks.
When I finish this , I will post article about “how to to this, en pros en cons” and the source code.

2 Likes
#10

This is my first impression about ionicframwork and polymer http://osmanmrzljak.blogspot.com/2014/07/materials-design-in-mobile-apps-with.html (see at least result and conclusion).

I said once Polymer + ionic = polyonic. Not even realizing that Pascal already got same idea. He already made a start https://github.com/Polyonic

#11

According to this post https://plus.google.com/+AngularJS/posts/8LHKCLnm6Ji it looks like Ionic is working with the Angular team.

They site this http://github.com/angular/material/ and offer a demo at http://material.angularjs.org

4 Likes
#12

Has anything new happened with this?

1 Like
#13

The TOP contributor to the Angular implementation of Material design is Andrew Joslin, who is an Ionic team member.

But I haven’t seen Ionic UI update with Material Design. Keen to know how both align. Is there a new version of Ionic, with Material UI in the pipeline?

1 Like
#14

I have been using Angular Material along with Ionic, and it works great!

#15

Hi prabhu_108, can you explain us how to use material design with ionic ?

Thanks.

M.

#16

check this post

http://forum.ionicframework.com/t/questions-ionic-material-and-polymer-confusion/14908/4?u=itamarcohen

#17

Here are the scripts to include;

    <!-- material design scripts -->
  <script src="https://rawgit.com/hammerjs/hammer.js/2.0.4/hammer.min.js"></script>
  <script src="https://rawgit.com/angular/bower-material/v0.7.0-rc1-master-84842ff/angular-material.min.js"></script>
  <script src="https://rawgit.com/angular/bower-angular-aria/v1.3.0/angular-aria.min.js"></script>
  <script src="https://rawgit.com/angular/bower-angular-animate/v1.3.0/angular-animate.min.js"></script>

Here is the stylesheet to include:

<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/v0.7.0-rc1-master-84842ff/angular-material.min.css">

You also need to be on the beta 14 version of ionic, so include these:

<link href="http://code.ionicframework.com/1.0.0-beta.14/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.min.js"></script>

(of course, you can download and reference your own copies rather than referencing the online versions)

Then you should be able to use the angular material components in your views, for example:

 <md-button class="md-raised md-primary ng-click="login()"><i class="icon ion-social-facebook"></i> Login with Facebook</md-button>
#18

Hi prabhu_108, I have tried with your code but I can not see button in Material Design.

For test I have create a clean app with:

$ ionic start md
$ ionic platform add android
$ ionic browser add crosswalk (I want to try this mobile “browser”)

My Index.html is this:

<!-- material design scripts -->
    <script src="https://rawgit.com/hammerjs/hammer.js/2.0.4/hammer.min.js"></script>
    <script src="https://rawgit.com/angular/bower-material/v0.7.0-rc1-master-84842ff/angular-material.min.js"></script>
    <script src="https://rawgit.com/angular/bower-angular-aria/v1.3.0/angular-aria.min.js"></script>
    <script src="https://rawgit.com/angular/bower-angular-animate/v1.3.0/angular-animate.min.js"></script>

    <link rel="stylesheet" href="https://rawgit.com/angular/bower-material/v0.7.0-rc1-master-84842ff/angular-material.min.css">

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

And this my html with your test code:

<div class="item item-body">
        <div>
          You have <b>29</b> meetings on your calendar tomorrow.
          <br>
          <md-button class="md-raised md-primary ng-click="login()"><i class="icon ion-social-facebook"></i> Login with Facebook</md-button>
        </div>
      </div>

I see the F icon with the “Login with Facebook” written, but no material design button.
I have checked in developer console if all files are loaded and there is no loading error. JS and CSS are all loaded.

Where is my error ?

Thanks.

M.

1 Like
#19

Could be the order of CSS files

#20

Also, make sure you inject it:

angular.module('myApp', ['ionic', 'ngMaterial'])
#21

check this codepan

1 Like
#22

Hi @prabhu_108,

Thanks for the post. :wink:
Will the Ripple effect work on devices running Android < 4.4 ?
And, Is it necessary to include “hammer.js” and "angular-aria.min.js" also to make it work locally?

#23

yes it is necessary
:smile:

#24

Have you experienced any issue with ui-sref on on iOS device?

somehow I need to convert all my to for ui-sref to work

#25

Be sure to check out the following ionic forum thread with using the latest ng-material with Ionic. Theres an open issue on ng-material’s github and it’s been noted by the team and added to the 0.9.0 milestone as of yesterday.