Ionic 2 with iOS and Material Design Experiences

March 3, 2016 in Ionic, Material Design

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

  • good blog thanks admin

  • Pingback: MOBILE WEB WEEKLY NO.98 – ENUE()

  • Very Usefull, nice blog :)

  • Michael

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

    • Michael

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

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

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

  • 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

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

  • Sebastián Lara

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

    • Paula

      +1

    • Luca

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

  • Dinesh Kumar

    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.

  • My team has tried on this, and it works.

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

css.php