@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>

@brandyscarney The ability for a side menu to have its own NavController as well as a reference to the content NavController would be ideal.

As @growthclick states above, this would give us an implementation of the iPad Mail type experience, where the user can navigate in the side menu through accounts, folders, messages, etc... Then display the message in the content pane.

quick question when is this issue planned? We will see this in the RC? Or do we have to wait longer ?

I'm also interested by this feature. 👍

This isn't a side menu feature, it's part of the NavController where previous pages are rendered in a menu style side-by-side.

@mlynch I'm not sure I get what you're saying. Why are we showing previous pages in the side "menu style" pane? It's basically an always-open side menu isn't it?

To me a split pane is more than just an always open side menu. My understanding is that it is a pane which hosts its own NavController and with access to its sibling pane's NavController. That way it can control both its own view hierarchy and the sibling pane view hierarchy.

The side menu is relevant because when in portrait orientation, a side menu is the best place to host this NavController. When in landscape orientation, switching the side menu to be always open would be ideal.

Having this functionality would assist greatly in developing tablet sized apps with Ionic.

Guys, do you have any idea if this feature will be added before the final release?

@marcelgoya The goal is to get this in prior to the final release. I've added it to the rc.2 milestone but I am not guaranteeing it will be in this release, just want to keep track of it. :)

@brandyscarney Awesome, thanks a lot for the quick reply! :) Btw, you guys are doing an amazing job with the new version! I'm using it to build a real-time translation communication platform (LinguSocial) and the performance, especially after the last two releases has been nothing but amazing. I'm developing the platform all by myself and the amount of time I've saved so far by using the new Ionic version is nothing but awesome. Really well done guys! :)

+1

So sad to see this "feature" removed and this issue not be solved .

I think the Ionic team is doing a huge amount of work fixing bugs and making everything stable so I can and will happily wait for a subsequent Ionic release if it's not for 1.0.

Ionic team announced a code freeze a couple weeks ago in their meeting notes (https://docs.google.com/document/d/1LrPDUkfXpqPIsghaSCxHyN1GIZ0TK2bwFxOZx2GKWtI/edit) and is doing a lot to stabilize and reduce bundle sizes while targeting final release in January.

Ionic seems committed to PWA's so I'm guessing this feature is only temporarily on hold. Hopefully we'll see it in early 2017.

Now that 2.0.0 final is out (Congrats !) i was wondering if this feature will be on the road map for 2.0.1? @brandyscarney

@mlynch : are there plans to add exposeWhenAside feature to sidemenu?

mlynch commented on Oct 5, 2016
This isn't a side menu feature, it's part of the NavController where previous pages are rendered in a menu style side-by-side.

Hi @jgw96 and Ionic team!

Congrats for Ionic 2.0 release!
I'm particulary interested by this thread. I would LOVE to see more features for tablets like this one.

Could you please check out my post on the forum? I never got your thoughts: https://forum.ionicframework.com/t/single-app-for-smartphone-and-tablet/53772/6

I agree with @julianmountford remarks. In our case, the best functionning would be something like the first mockup of this page: http://blog.scottlogic.com/2015/10/02/ionic-master-detail.html and be able to use a side menu independently.

Thanks a lot!

Seems like this feature is coming to Ionic 2 soon.
https://twitter.com/maxlynch/status/829388117752868865

Hey everyone, we're currently working on this implementation. Please read the following blog post if you'd like to help us test: http://blog.ionic.io/testing-split-pane-support/

Thanks!

@brandyscarney @jgw96 I am facing the below issue:

Steps to replicate:

1. generate new fresh app by ionic start SplitViewTest sidemenu --v2
2. Update ionic-angular by running : npm install --save ionic-angular@2.0.1-201702161925
3. ionic serve
4. Observe issues

Here is the html code that was changed to wrap menu in ion-split-panel:

<ion-split-panel>
  <ion-menu [content]="content">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-list>
        <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
          {{p.title}}
        </button>
      </ion-list>
    </ion-content>

  </ion-menu>

  <!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
  <ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
</ion-split-panel>

@okonon you need to add the main attribute to <ion-nav>.

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.