Ionic-framework: Feat: split pane

[brandyscarney]

Add the option to expose the menu on larger screens, example: settings app on an iphone vs ipad.

Same thing as expose-aside-when in v1: http://ionicframework.com/docs/api/directive/exposeAsideWhen/

[growthclick]

@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

[lordgreg]

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

[julianmountford]

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

[hackfrag]

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

[Gp2mv3]

I'm also interested by this feature. :+1:

[mlynch]

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.

[pascalwhoop]

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

[julianmountford]

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.

[marcelgoya]

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

[brandyscarney]

@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. :)

[marcelgoya]

@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! :)

[Wouter33]

Hey Ionic team! Thanks for all the good work! I know other stuff seems a lot more important than the split-pane. But what is your position on it? I think a lot of people run a tablet and phone combined apps. Those can't pick up Ionic 2 until this feature is addressed.

Is it something which is on the bottom of your priority list? Should we try to develop our own solutions?

[marcelgoya]

@Wouter33 It's been added to RC 4, so it will be included before the official release.

[Wouter33]

@marcelgoya It was assigned to RC1 and pushed forward since then. That's why i posted the question. If it's something which doesn't have priority i rather know so we can try to find our own solutions in order to be able to switch to Ionic 2.

[marcelgoya]

@Wouter33 I guess it depends on how long you're willing to wait. Brandy already mentioned that the split-pane feature will be added before the final release and that their focus is on fixing bugs for now, which is completely understandable given the amount of bugs that have been submitted.

[julianmountford]

@Wouter33 According to the first post in this thread, the split pane feature was originally assigned to beta 9. If you need a speedy solution I think you'd be safer developing your own. Maybe you could share it ;)

[okonon]

I am also waiting for this feature. Tried to implement my own but it is not that easy.

[mtycholaz]

@okonon @julianmountford
Poor mans side-by-side. I'm using this for now until this feature is coded in.

https://forum.ionicframework.com/t/does-ionic-2-support-side-by-side-layout-in-landscape/67913/2
http://plnkr.co/edit/9uOTTtEBgW97mFojioqi?p=preview

[ghenry22]

I keep thinking that a variation on the tabs setup could be used to achieve this. Where in tabs it's just the tab bar that is controlled by the master and then the rest of the view is a child (so to speak). This could simply have a whole left panel that is controlled by the master and a right panel that is a child.

so your list view sits on the left and your detail view shows on the right for example.

In a landscape view this would mean that you just have 2x standard phone size panels next to each other which would be quite nice and give good reuse for a lot of apps without much extra work.

An option to have the side menu always open would be an additional option on top of this setup and could be set programmatically based on available screen real estate.

[tadeussenf]

To simply display the menu in open-state on larger displays you can use this CSS as a starting point:

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

[okonon]

@tadeussenf I tried it like so little while ago but my problem was that right edge of main content area was pushed of the screen. Does your CSS handle that ? (Sorry do not have access to a computer at the moment to test it out)

[okonon]

I guess it does: padding-right. When you click on anything on the main view does the menu close and you left with white area on the left?

[tadeussenf]

@okonon I experienced both situations you described, but they should be handled with "position: relative;" and "padding-right: 304px".

Altough I am not entirely sure that the posted CSS has no unexpected side-effects in how Ionic behaves.
I would strongly prefer an upstream supported solution on this :)

EDIT: I already found one issue and updated my CSS.

[okonon]

Understood thanks I agree with you and upstream

[swiftyone]

+1

[fantasizer]

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

[Bouzmine]

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.

[growthclick]

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.

[okonon]

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.

[CheetahDev]

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!

[unamix]

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

[brandyscarney]

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!

[okonon]

@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 [email protected]
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>

[seiyria]

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

[sjdrew]

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?

[roblouie]

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.

[brandyscarney]

Just to update on this issue, I've released a new nightly version with the latest split pane: [email protected]

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. 🙂

[jlcarvalho]

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>

[seiyria]

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.

[seiyria]

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.

[sjdrew]

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?

[jgw96]

Happy to announce that @manucorporat has just merged https://github.com/driftyco/ionic/pull/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!

[AfolabiOlaoluwa]

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.

[arkyminds-santhosh]

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;
}

}
}

[arkyminds-santhosh]

this code notworking on chorme

[ionitron-bot[bot]]

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.