Notice: The Monaca & Onsen UI Community Forum is shutting down.
For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.
Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.
What is Material Design?
argelius last edited by Fran Diox
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
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
@lapisanlangit Please see this thread in which I discuss this: https://community.onsen.io/topic/656/prevent-theme-adaptation/3
@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.
@lapisanlangit Luckily, the Onsen team did exactly that! All you have to do is put this in your JS script tag block:
Your app will now only use the iOS flat style.
@munsterlander: how if i choose material design? i have tried this
but always show iphone/ios style? thank you
You won’t need the ready function, just that 1 line at the top of your JS.
@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.
@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:
@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 last edited by
How to change default color on onsen material design?
It always showing teal, for example i want to change it to blue or red
@Mod-Template The best way is to generate your own theme. When you install Onsen UI you’ll get a folder
css-components-srclike this. Just follow the readme info and then use the generated CSS file in your project.