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

Ionic Framework
1

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

2

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

3

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.

4

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

5

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.

6

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

7

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
8

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

9

in App.tsx, type

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

1 Like