What is Material Design?

  • @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

  • @lapisanlangit Use:


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

  • Onsen UI

    @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…

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

  • Onsen UI

    @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.

Log in to reply