Questions: Ionic, Material and Polymer. Confusion?

ionic-v1
1

Hi,
Could someone explain if Ionic, Material and Polymer that are three mobile/web app frameworks how can work ensemble?
Are they different on?
How use Material with Ionic and where Material/Ionic is better?

Thanks.

1 Like
2

So with all these new frameworks coming up, there seems to some confusion as to whats what.

Material Design: Googles design language for create a unified experience across all platforms. Material Design alone is not a framework, but a design standard/language. Each library is responsible for implementing material design specs.

Ionic: An SDK built on top of angular to create hybrid apps. While Ionic does have some parts of the material design spec implemented, but it doesn’t include everything.

Angular Material: A set a angular directives built to follow the Material Design Spec. These are just regular directives that follow Material designs guidelines for web apps.

Polymers Paper: A set a polymer components that follow the Material Design Spec. Polymer is built on top of web-components, while Angular-Material is built on angular directives.

So Ionic, Angular Material, and Polymer Paper are all different frameworks. Angular Material and Polymer Paper are two different implementations of the same visual design language.

Hopes this clears things up a bit.

5 Likes
3

so, if I undestand. Material Design are the Google guidelines for UX.
Angular Material, Polymers and Ionic implements parts of it.
A question: Is it possibile to use Angular Material with Ionic?

4

Yup, you got it :smile:

As far as using angular material with ionic, you just have to include the necessary files for angular-material

2 Likes
5

How add ionic icons in button in your example?

6

You can still use the icons like you have been for ionic

4 Likes
7

I make a mistake when I test it the last time, tanks and happy new year.

1 Like
8

Thanks! Is there any plans for ngMaterial to be integrated with Ionic in the near future?

9

Hi @mhartington 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?

10

Or you could just implement another ripple effect.

1 Like
11

@mhartington I would go for this now and wait until Material design is officially out from Ionic team.

Great work!!

12

Hi @mhartington unfortunately, it doesn’t work perfect on my phone(Android 4.4.4) or emulator. I added the directive, CSS and attribute and it should work? I get ***only a grey ellipse appearing and it doesn’t get faded out(stays there)***. There is some bug.

13

Webview do not support those animations used in material designs. So, to use it you need to use Crosswalk which is using Chromeview.

14

@ozexpert I build using crosswalk still ripple doesn’t work on a real device. Did you get it working ?

15

The ripple effect works beautifully for me. I run it on crosswalk

16

Hi @siddhartha ,

I included the Directive, CSS styling and Attribute. Not sure about what’s wrong. I’d assume I’m doing something wrong with the build as process it works fine when I test on Desktop Browser side.I’m using crosswalk build on Intel xdk.

17

CHeck console. Have you included ngMaterial as a dependency? Cross check something minor problem I guess.

18

Okay. I was trying the ripple effect on the codepen from @mhartington. There is no ngMaterial used there. I shall try using ngMaterial on Ionic to get Ripple :wink:

19

What browser are you using? I can see the ripple effect on @mhartington’s codepen

20

Hi, not sure if you have understood me correct. To clarify, I get Ripple on Desktop browsers (chrome unstable version) but not on real Android 4.4.4 device for crosswalk .apk