How to set the whole app in android's style even if on ios in ionic?


#1

How to set the whole app in android’s style even if on ios in ionic2?


Set fixed iOS/Android theme for all platforms in rc0 release candidate
#2

Is there a specific reason to do so? you should know that the reason they are different is to replicate native elements in each platform so the user experience is standard across both platforms, anyway if you absolutely need to use only the Material Design styles then here’s how to do it with ionic 1, try and see if it works with ionic 2 but changing the ios word by md:


#3

Or just simply copy paste the scss, delete the ios scss and name, the copy from before, ios. Copy the exact name. It should work.


#4

I think it’s better to try and search for a config option, if you override the scss and later you realize you need the ios scss, you would be forced to search for it again from a test project or something.


#5

In ionic2 official doc. There is no any options about set the platform style.

What I want to do is that I want to use the android’s action sheet style in iOS :slight_smile:


#6

I downloaded the https://github.com/driftyco/ionic-preview-app and put it to run
So I wanted to force the template for md, reading the doc posted by KimWong, a see this config:
http://ionicframework.com/docs/v2/api/config/Config/

@App({
template: <ion-nav [root]="root"></ion-nav>
config: {
backButtonText: ‘Go Back’,
iconMode: ‘ios’, /* <---- */
modalEnter: ‘modal-slide-in’,
modalLeave: ‘modal-slide-out’,
tabbarPlacement: ‘bottom’,
pageTransition: ‘ios’,
}
})

But i try it and didn’t forced
"(…)\ionic-preview-app\app\app.ts"
@App({
templateUrl: ‘./build/app.html’,
config: {
production: false,
iconMode: ‘md’,
platforms: {
android: {
activator: ‘ripple’,
backButtonIcon: ‘md-arrow-back’
}
}
}
})

The only solution was run the url with query param
http://localhost:8100/?ionicplatform=android

Does anyone know tell me it did not work?

This url says it’s possible to force

You can change the mode that gets assigned in the configuration of your app. Therefore, if you wanted the Material Design md mode on iOS, you could do it.
http://ionicframework.com/docs/v2/theming/platform-specific-styles/


#7

You can use:

@App({
  templateUrl: 'build/app.html',
  config: {
    mode: 'md'
  }
})

I’m not sure why this isn’t documented, so I created an issue for it:

There is currently no way to set a single component to match the styles of a different platform, but you could override the iOS Sass variables to get close to that of Androids. If this is a feature you’d like - could you create an issue and we can discuss it? Thanks! http://ionicframework.com/submit-issue/


#8

Thanksssssssss you so much and sorry for the late reply because i am busy in these days.


#9

Yes, you are right and i got it.


#10

In Ionic v 2.1.0

you can configure this in app.module.ts as below

imports: [
IonicModule.forRoot(MyApp,{
mode: ‘md’
})
],


#11

Why not let the user decide which design he would prefer?
Is it possible to change the mode at startup, through user settings, or even better, at runtime?


#12

@Emmanerl_FRANCOIS How to do that? can you provide an example , thanx


#13

go to www/build/main.css

then comment out all the css classes starting with .action-sheet-md and then paste the following gist css code…

https://gist.github.com/kishorekumar080297/a16bef44fbc677d8bcce6f9776f5da27