Use material design css on all platforms

[MichaelCafe]

I want to set the theme to material design for all platforms (including IOS) and use Onsen UI 2.
I have tried ons.disableAutoStyling(); but it defaults to flat design. Is there a way to tell Onsen to use material design for all platforms instead?

[IliaSky]

Hi @MichaelCafe

You should be able to do ons.platform.select('android') at the start of your app.

Here’s a Demo.

Another option would be manually adding the modifier="material" to all elements which you want, but I think the first approach seems simpler :)

[MichaelCafe]

Our team threw a small test app together and packaged it with phone gap and it works great. And the material design persists across all platforms.

I saw this in a few places and was a bit hesitant to use it as a solution because in the docs it says “useful for testing.” It also sounds like I am forcing the framework to do something, which sounded like a bad idea but if it essentially is just a style selector it is just what we need.

Thanks for your help @IliaSky

[IliaSky]

@MichaelCafe Since Onsen UI provides automatic styling depending on the platform it’s just that we were expecting people to use that. And while it is true that it’s useful for testing it doesn’t mean you cannot use it in an actual app - it’s just a bit unusual. Not many people want a material design app in iOS, but you can do it if you want to.

As for the exact thing which it’s doing - after setting the platform each component will add a modifier="material" to itself or do something similar if its needed. I think the only other differences are the default animations changing, as well as the auto position for the ons-tabbar - other than that I cannot think of anything else.

Good luck with your app! Don’t forget to add it to the showcase once it’s finished so we can all take a look :)