Ionic Change Platform Style for Single Component


#1

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


How do you change the platform mode in rc0?
#2

If you check out the config docs over here: http://ionicframework.com/docs/v2/api/config/Config/ .

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’
}
})


#3

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


#4

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


#5

Negative…still waiting :slight_smile:


#6

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


#7

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

#8

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


#9

app/app.ts

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


})


#10

Did any one find the solution for changing single component style


#11

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


#12

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__


#13

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


#14

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>