Ionic Change Platform Style for Single Component

I read the guide on platform styles for Ionic 2 here and I’m left with two questions.

How does one change the mode that gets assigned “in the configuration?”

Secondly, how would one change the styling of a single component? I like the segment styling on android much better and would like to use it on iOS, but keep all the other default iOS styling.

Thanks,
Brandon

1 Like

If you check out the config docs over here: Config - Ionic API Documentation - Ionic Framework .

It states that if you want to globally set the style, you can do it within your config like this:

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

Yeah, the global is straightforward. I"m having difficulty finding a way to override for a specific component…

did you ever figure out how to use the android segment style on ios?

Negative…still waiting :slight_smile:

Still nothing?
I want a centered logo in headbar with a full “md” style but I can’t find a thing…

One hack you could try is to change the css in the node_module, so to change the searchbar you could replace

node_modules\ionic-angular\components\searchbar\searchbar.ios.scss

with

node_modules\ionic-angular\components\searchbar\searchbar.md.scss

Of course there are a lot of drawbacks to doing this, for example

  1. This won’t register to git because of the gitignore
  2. In some cases you need to hack the js as well
1 Like

That’s a good idea! I just want the logo centered, that’s it. Thanks, I’ll try it out =)

app/app.ts

ionicBootstrap(MyApp, , {
mode: ‘ios’ // set ‘md’ for android and ‘wp’ for windows


})

Did any one find the solution for changing single component style

I would be nice if Ionic 2 components accepted some input like mode="md" or would this create too much overhead when compiling templates?

3 Likes

I had the same requirement of an android style segment in iOS. After all the futile attempts with sass variables, I just tried the mode=“md” on the segment tag…it worked !!

Guess someone heard you @mt__

22 Likes

@elvis_gn can you post your solution? I really didn’t understand your explanation.

2 Likes

I just tried this and it works too. @elvis_gn means that you can do something like this to force the Android style regardless of the platform it’s running on.

<ion-searchbar mode="md"></ion-searchbar>

5 Likes