What is Material Design?

[argelius]

I would like to take some time to expand on what Material Design is and the approach we have been taking when implementing it in the new version of Onsen UI.

Click here to see the original article

[lapisanlangit]

Automatic style switching it’s ok, but i want use material design for my development proses, i am using windows and chrome browser, but my onsenui app only show iphone style, how to force switch to material design with chrome browser? thanks

[munsterlander]

@lapisanlangit Please see this thread in which I discuss this: https://community.onsen.io/topic/656/prevent-theme-adaptation/3

[lapisanlangit]

@munsterlander: thanks, i prefer to use material design over iphone style, automatic style switching good but make me confuse if i want fully use material design ini my app. i hope onsen team will give us option when install onsenui, will use iphone or material design.

[munsterlander]

@lapisanlangit Luckily, the Onsen team did exactly that! All you have to do is put this in your JS script tag block:

ons.disableAutoStyling();
ons.platform.select('ios');

Your app will now only use the iOS flat style.

[lapisanlangit]

@munsterlander: how if i choose material design? i have tried this
ons.ready(function(){
ons.disableAutoStyling();
ons.platform.select(‘md’);
ons.forcePlatformStyling(‘md’);
});

but always show iphone/ios style? thank you

[munsterlander]

@lapisanlangit Use:

ons.platform.select('android');

You won’t need the ready function, just that 1 line at the top of your JS.

[Fran Diox]

@lapisanlangit Just call ons.platform.select('android'); at the beginning of the app (right after including Onsen UI in your index.html).

@munsterlander AutoStyling is what changes iOS flat design to Material Design, so if you call ons.disableAutoStyling() the app will remain with the default styles (iOS). Either you set Android platform and let the AutoStyling do its job or you disable it and manually set modifier="material" in every component :)

If you want to always have flat design, then you can either disable AutoStyling or always set iOS as the platform.

[munsterlander]

@Fran-Diox Yeah, that’s what I said! haha (:ghost: edit for the fix and the win! ) My bad on that and that makes sense. The section in the tutorial was a bit confusing about that, so I have been calling that in everything - looks like I need to go back and do some updating!! :laughing:

[lapisanlangit]

@fran-diox and @munsterlander thanks for your answer, already fix now. i love onsenui instead of ionic. I have built 2 apps with onsenui and very exiting when onsenui use angular 2 and material design. thank you very much…

[Mod Template]

How to change default color on onsen material design?
It always showing teal, for example i want to change it to blue or red

[Fran Diox]

@Mod-Template The best way is to generate your own theme. When you install Onsen UI you’ll get a folder css-components-src like this. Just follow the readme info and then use the generated CSS file in your project.