Help with ion-split-pane and custom behaviour

Ionic Framework Ionic Angular
1

Hi All,

I need some help with ion-split-pane.
I’m in the process of porting an Ionic 3/Cordova app to Ionic 6/Capacitor.
The Ionic 3 app is using the split pane in the following way:

  • On large screens, the screen is split in two, with the left side narrower and always visible while the right side is wider and collapsable based on min-width.
    When an item is selected on the left side, the content opens on the right side.
  • On small screens only the left side is visible.
    When an item is selected, the content opens on top in another page. The back button closes the page.

This is how the ion-split-pane is used:

<ion-content no-padding no-bounce>
    <ion-split-pane when="(min-width: 475px)" (ionChange)=“onSplitPaneChange($event)”>
        <ion-nav #left main swipeBackEnabled=“false”/>
        <ion-nav #right swipeBackEnabled=“false” side=“right”/>
    </ion-split-pane>
</ion-content>

How can I achieve the same behaviour in Ionic 6 ?

2

In the end I achieved the above behaviour with ion-grid, one row, two columns. The right side column collapsable on size:

<ion-content>
 <ion-grid>
  <ion-row>
   <ion-col>
    <ion-nav #left></ion-nav>
   </ion-col>
   <ion-col size=“8” class=“ion-hide-md-down”>
    <ion-nav #right></ion-nav>
   </ion-col>
  </ion-row>
 </ion-grid>
</ion-content>

1 Like