Ionic 2 with iOS and Material Design Experiences

By default, Ionic 2 styles your application components based on the platform it’s running on: Users automatically get a native iOS experience on iOS and a Material Design experience on Android.

Here is a screencast that shows this feature in action in the Ionic Realty sample app I shared recently (see resources at the bottom of this article):

If you explore the ionic-framework/components directory structure under node_modules, you’ll notice that each component has an iOS and a Material Design Sass file. For example, button.ios.scss and button.md.scss.

You can also use the @App annotation to change specific elements of the user experience (tab placement, icons, and animations), or even to force a specific experience regardless of the platform the app is running on. For example, to force the Material Design experience, modify the config value as follows:

@App({
  template: `<ion-nav [root]="root"></ion-nav>`
  config: {
    mode: "md"
  }
})

See the config documentation for more details, and the beta announcement blog post for a detailed overview of the new Ionic 2 features.

Ionic Realty Resource

25 Responses to Ionic 2 with iOS and Material Design Experiences

  1. agario March 8, 2016 at 10:04 pm #

    good blog thanks admin

  2. Julian April 13, 2016 at 12:56 am #

    Very Usefull, nice blog :)

  3. Michael April 24, 2016 at 12:39 pm #

    Where do I need to put that in which FILE ???

    • Michael April 24, 2016 at 1:31 pm #

      Found it, it’s here: ./app/app.js

      For iOS it’s like this (mode: “ios”):

      @App({
      template: ”,
      config: {
      mode: “ios”
      }
      })

  4. propchill May 16, 2016 at 7:57 am #

    Discussing the extravagance lodging section, Bengaluru stands third as the biggest venture center point of High Net worth people (HNIs). The multi-social populace base of Bengaluru with its refined tastes desires for top of the line private flats and manors, especially the Residential Real estate in Bengaluru which are popular. Whitefield, Outer Ring Road (ORR), Central Business District (CBD), Secondary Business District (SBD) and North Bengaluru are dynamic markets offering extravagance lodging ventures. Manors are most overwhelming in ranges like ORR, Sarjarpur Road, Whitefield and North Bengaluru. Interest for extravagance homes tailing US and Singapore styles is on the ascent in Bengaluru. Residential real estate in bengaluru

    • Colin May 30, 2016 at 10:01 am #

      Wow, that sounds great. Bengalurururu here I com……………

  5. Sebastián Lara July 25, 2016 at 11:11 am #

    Can I mix ios and md styles in the same component? for example get a ion-segment with md style on ios device

    • Paula February 3, 2017 at 7:47 am #

      +1

    • Luca May 30, 2017 at 6:25 am #

      Sorry to bother you after months, but I’m looking for the same thing. Have you found a way to do it?

  6. Dinesh Kumar June 11, 2018 at 8:30 am #

    This article has covered so many
    topics that are helpful for mobile app development, visit Android and ios app development for more new
    ideas, we are thankful for this article.

  7. Web Development Company September 15, 2018 at 3:58 am #

    My team has tried on this, and it works.

    Thanks on behalf of Team TechnoBrains (www.technobrains.net)

  8. Oladejo Joshua Jay December 3, 2018 at 12:04 pm #

    Love the iOS part

    Hot Entertainment and News Here

    Latest Music Download Here

    Latest Video Download Here

  9. Oladejo Joshua Jay December 3, 2018 at 12:05 pm #

    I will try to test it

    Hot Entertainment and News Here

    Latest Music Download Here

    Latest Video Download Here

  10. cary louder007 February 28, 2019 at 12:06 am #

    useful click here to go

  11. gtacheat code March 12, 2020 at 10:38 am #

    Hi, I read your post and found it quite interesting. The post you shared is very unique and informative. Thanks for sharing such a useful post. And today I find another great website that provides you all updated game’s cheat and commands, so I highly recommend you please visit then given link ones or go to google and search gtacheatcode.

  12. Batuta Ali May 12, 2020 at 11:42 am #

    Hey thanks for sharing this article, have been waiting for you to write on this for a long time. You can check more about iOS by simply clicking here!

  13. yuvaraj singh September 7, 2020 at 7:10 am #

    Great work
    Leanpitch provides online training in Scrum Master during this lockdown period everyone can use it wisely.
    Advanced Scrum Master Training

  14. yuvaraj singh November 23, 2020 at 4:47 am #

    Informative content , Great work
    To crack scrum master interview : Scrum Master Interview Questions

  15. yuvaraj singh December 22, 2020 at 3:05 am #

    Thanks for sharing this informative content
    Leanpitch provides online training in Enterprise agile coaching during this lockdown period everyone can use it wisely.
    Enterprise Agile Coaching

  16. skull mp3 February 15, 2021 at 7:57 am #

    Thanks for sharing this informative content , Great work.
    rasmussen student portal

  17. Oloughlin March 15, 2021 at 3:21 am #

    Ionic Framework is a library of UI Components, which are reusable elements that Similarly, Android devices use Google’s design language called Material Design. between the platforms, users are provided with a familiar app experience.

    mygiftcardsite

  18. Daniel Schaefer March 18, 2021 at 2:06 am #

    Ionic Framework is a library of UI Components, which are reusable elements that Similarly, Android devices use Google’s design language called Material Design. between the platforms, users are provided with a familiar app experience.

Trackbacks/Pingbacks

  1. MOBILE WEB WEEKLY NO.98 – ENUE - March 12, 2016

    […] Ionic 2 with iOS and Material Design Experiences […]

css.php