Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: split pane #6793

Closed
brandyscarney opened this issue Jun 7, 2016 · 46 comments
Closed

Feat: split pane #6793

brandyscarney opened this issue Jun 7, 2016 · 46 comments
Assignees
Milestone

Comments

@brandyscarney
Copy link
Member

brandyscarney commented Jun 7, 2016

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
Copy link

growthclick commented Jun 13, 2016

@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

@jgw96 jgw96 modified the milestones: 2.0.0-beta.12, 2.0.0-beta.10 Jun 27, 2016
@lordgreg
Copy link

lordgreg commented Jun 29, 2016

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

julianmountford commented Jul 4, 2016

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

hackfrag commented Aug 12, 2016

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

@Gp2mv3
Copy link

Gp2mv3 commented Aug 25, 2016

I'm also interested by this feature. 👍

@jgw96 jgw96 closed this as completed Sep 2, 2016
@jgw96 jgw96 reopened this Sep 2, 2016
@mlynch
Copy link
Member

mlynch commented 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.

@pascalwhoop
Copy link

pascalwhoop commented Oct 6, 2016

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

julianmountford commented Oct 6, 2016

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
Copy link

marcelgoya commented Oct 14, 2016

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

@brandyscarney brandyscarney added this to the 2.0.0-rc.2 milestone Oct 14, 2016
@brandyscarney
Copy link
Member Author

brandyscarney commented Oct 14, 2016

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

marcelgoya commented Oct 14, 2016

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

@jgw96 jgw96 removed this from the 2.0.0-rc.5 milestone Dec 16, 2016
@swiftyone
Copy link

swiftyone commented Dec 19, 2016

+1

@fantasizer
Copy link

fantasizer commented Dec 20, 2016

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

@Bouzmine
Copy link
Contributor

Bouzmine commented Dec 20, 2016

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
Copy link

growthclick commented Dec 20, 2016

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
Copy link

okonon commented Jan 26, 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.

@CheetahDev
Copy link

CheetahDev commented Feb 16, 2017

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
Copy link

unamix commented Feb 16, 2017

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

@brandyscarney
Copy link
Member Author

brandyscarney commented Feb 17, 2017

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!

@jgw96 jgw96 added this to the 2.2.0 milestone Feb 21, 2017
@okonon
Copy link

okonon commented Feb 23, 2017

@brandyscarney @jgw96 I am facing the below issue:
screen shot 2017-02-23 at 12 42 53 pm

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>

@seiyria
Copy link
Contributor

seiyria commented Feb 23, 2017

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

@sjdrew
Copy link

sjdrew commented Feb 26, 2017

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
Copy link
Contributor

roblouie commented Feb 28, 2017

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
Copy link
Member Author

brandyscarney commented Feb 28, 2017

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

@jlcarvalho
Copy link

jlcarvalho commented Mar 2, 2017

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
Copy link
Contributor

seiyria commented Mar 2, 2017

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
Copy link
Contributor

seiyria commented Mar 3, 2017

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
Copy link

sjdrew commented Mar 3, 2017

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
Copy link
Contributor

jgw96 commented Mar 3, 2017

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!

@jgw96 jgw96 closed this as completed Mar 3, 2017
@AfolabiOlaoluwa
Copy link

AfolabiOlaoluwa commented Sep 22, 2017

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
Copy link

arkyminds-santhosh commented Jun 7, 2018

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
Copy link

arkyminds-santhosh commented Jun 7, 2018

this code notworking on chorme

@ionitron-bot
Copy link

ionitron-bot bot commented Sep 1, 2018

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Sep 1, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.