Ionic and Storybook. How to force ios/md modes for all ionic components?

I am starting to use Storybook to develop dummy components for my Ionic app.

Now I have the problem that I do not know how to toggle the components between md and ios live.

Does anyone how to do this?

Thanks

tap in the mode= "ios" | "md" property of the components…

That will force that mode for one component at the time. If you have a complex component created of several ion-components you have to toggle each one manually and/or create an mode input just for testing, which is inefficient.

You are right… if you wish to force the mode across the whole app then you need to follow this
Platform-Style guide / Overriding styles

Hi, but again that is pro component. Once the App is instantiated all components render in ios or md mode using some kind of info. I already tried putting the class (ios, md) insidebody but that is not enought.

In that case i leave this matter to the experts… :slight_smile: on offense. i will certainly follow this thread to a solution

You have to override the Global IonicModule Config with the mode option like So:

@NgModule({
  ...
  imports: [
    IonicModule.forRoot({
      mode: 'ios'
    })
  ],
  ...
})

More info can be found here:

3 Likes

That is what I have currently but I can not toggle it live.

in App.tsx, type

setupIonicReact({
mode: ‘ios’,
});

1 Like