See: http://www.polymer-project.org/ and http://www.google.com/design/
I like some of their core, paper elements and animations (Especially the header bar animation where it reduces in height on scroll. ).
http://www.polymer-project.org/docs/elements/
Thanks
I think this is an interesting idea as well. Can we get some guidance into how we can approach this integration (maybe contribute?)
This is indeed interesting. I was watching the Google I/O keynote, and their new Material Design principles seem very similar to what Apple has started with iOS 7, which makes me think that it’s worth for Ionic to integrate the new polymer components.
Do you guys have this on your roadmap? Any direction around this, maybe someone already working on it?
Take a look at this:
What do you think of this approach?
Well, it doesn’t look bad, but I guess the question is how does it fit into (or alongside) the Ionic components.
I also found this Venn diagram interesing, it shows how Angular and Polymer complement each other; it raises an interesting problem, how do you do the data bindings.
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
Interesting, but why define angular.module() twice?
It’s not defined twice. When you use angular.module without a second parameter, it will return an instance of an existing module.
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.
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
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
Has anything new happened with this?
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?
I have been using Angular Material along with Ionic, and it works great!
Hi prabhu_108, can you explain us how to use material design with ionic ?
Thanks.
M.
check this post
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>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.
Could be the order of CSS files
Also, make sure you inject it:
angular.module('myApp', ['ionic', 'ngMaterial'])