@brandyscarney Excited to see split-pane support in Ionic 2. Is there any plan to enable split pane on two different views similar to the iPad Mail experience (i.e. fully featured left-side view for navigation that targets the right-side "content" view, and still leaves room for a separate side menu)?

For progressive desktop-friendly web apps, it would be ideal if there were a way to enhance nav.push / navPush to target the current view / nav stack when in phone mode and to target an adjacent content view / nav stack when in tablet/desktop mode.

As background here is an example of a split pane workaround in V1 https://github.com/alamusi/ionic1splitview

@brandyscarney please add an option to add the angular-variables/expressions in expose-aside-when selectors.

<ion-side-menu expose-aside-when="myData.settings.tabletMode ? true : false">
</ion-side-menu>

Been waiting for this component Thanks. However we wish to implement in just one part of our app, ie push on a page that contains the split view and then be able to press back and return. But it seems to always act as root page. Am I missing something?

Can anyone explain how to make panel 1 trigger a navigation in panel 2? I tried using ViewChilds in my app.component to grab both child navs and store them in a service. But that seems real shady, and there doesn't seem to be a good way to wait until the page is loaded to store them.

Just to update on this issue, I've released a new nightly version with the latest split pane: ionic-angular@2.1.0-201702281739

Important: we decided to rename it from split-panel to split-pane, so if you have been using the old nightly version please make sure you update this to use the new nightly.

We're hoping to get this merged into master after some more testing. 🙂

Great work guys.

I'm using it on https://minireceitas.com.br/

My only issue is related to the position of the menu. As you can see, the resultant layout doesn't match with the one in the blog post, but, in my case, seems better as it is. I think this happens because I'm not using the split-pane component with the ion-nav.

My code is something like:

<ion-split-pane>
  <ion-header>
    <ion-navbar>...</ion-navbar>
    <ion-toolbar><ion-searchbar /></ion-toolbar>
  </ion-header>
  <ion-menu side="left" [content]="content"></ion-menu>
  <ion-content #content class="main-content" main></ion-content>
</ion-split-pane>

With the current split pane (2.1.0 nightly) is there a way to have a left and right menu? Right now it does this if there's a right menu:

(chat is the "right" menu).

I want it to be on the right side and toggleable with a button.

I figured this out after a bit of trial and error - my solution was to put the menu in the ion-content of the pane to the right. This made it unique to just that view. No need to mess with toggling a menu on and off.

I also agree with roblouie, that there needs to be a way to get a reference to each pane so you can push content into the correct pane from the other pane.

Only current method seems messy that you have to grab ViewChilds and store them in a separate service so they can be used later?

Happy to announce that @manucorporat has just merged #10343 which adds split pane support to Ionic. You can now expect the first version of split pane in the next release of Ionic. Since it is now in master I am going to be closing this issue. Thanks everyone!

Can someone help me with this? https://stackoverflow.com/questions/46359088/sidemenu-toggle-button-not-showing?noredirect=1#comment79681019_46359088. Sidemenu not showing at all. I didn't know what am doing wrong. Its not even showing on iPhone 6 view not to talk of iPad View.

this code notworking on chorme

@media(min-width: 1200px) {
ion-menu, ion-menu[type=reveal] {
z-index: 80;
display: block;
right: inherit;
}

button[menutoggle] {
display: none;
}

.fixed-content {
bottom: 56px;
}

.scroll-content {
overflow-y: auto;
margin-top: 0 !important;
}

.menu-inner {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transform: translateX(0) !important;

> ion-header {
  position: relative;
}

> ion-content {
  position: relative;
}

}

.ion-page {
left: 304px;
padding-right: 304px;
> ion-header {
position: relative;
}

> ion-content {
  position: relative;
}

}
}

this code notworking on chorme

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.