feat(split-panel): split panel support for ion-nav and ion-menu

[manucorporat]

[intellix]

I know it's a WIP but just wondering if it'll support adding custom media queries instead of just small/medium/large? <ion-split-panel when="(min-width:600px)">

[manucorporat]

@intellix I like the idea, probably something like:

<ion-split-panel matches="(min-width:600px)">

thoughts?

[intellix]

SGTM, just cause it's in the previous one :D http://ionicframework.com/docs/api/directive/exposeAsideWhen/

[manucorporat]

@intellix it already does support custom media queries!

[numerized]

Hola,

is there any way to use this features from the doc already to hide menu on login page for example or to show another menu for logged-in people ?

<ion-menu id="authenticated" side="left" [content]="mycontent">...</ion-menu>
<ion-menu id="unauthenticated" side="left" [content]="mycontent">...</ion-menu>
<ion-nav #mycontent [root]="rootPage"></ion-nav>

enableAuthenticatedMenu() {
  this.menuCtrl.enable(true, 'authenticated');
  this.menuCtrl.enable(false, 'unauthenticated');
}

[intellix]

_rmListener :)

[highfieldjames]

Hi @manucorporat. Great work with this! I'm currently adding the split pane to multiple pages within my app.

Would you be willing to make ionChange an Output to follow the style of other components such as Checkbox?

[brandyscarney]

Found some small issues:

1. Content is not resizing in menu when the screen starts out small, see Split panel is not sizing content in menu when starting out smaller #10518
2. Animation for push/pop seems off

[manucorporat]

@highfieldjames what do you mean?

[highfieldjames]

@manucorporat What I mean is, at line 86, shouldn't ionChange: EventEmitter<SplitPanel> = new EventEmitter<SplitPanel>(); be @Output ionChange: EventEmitter<SplitPanel> = new EventEmitter<SplitPanel>(); with Output added to the imports from @angular/core? It seems to be the case for other components such as Checkbox and tabs.

[manucorporat]

@highfieldjames you are absolutely right!

[brandyscarney]

This looks great to me, I'm releasing a new nightly with it but I think it's good to merge.

[digaus]

Is it possible to define if the main pane is shown on the right or the left? So that when the screen is too small only the left pane will be shown?

Currently I have two panes

    <ion-nav [root]="rootPage" #content swipeBackEnabled="false" main></ion-nav>

    <ion-nav [root]="rootPage1" #content swipeBackEnabled="false"></ion-nav>

I want the main component to be shown on the left side rather then on the right to realise a detail page once the screen is big enought which will be shown on the right.

[seiyria]

You can change flex direction to be row reverse, that's how I solved it.

…

On Tue, Mar 14, 2017, 11:07 digaus ***@***.***> wrote: Is it possible to define if the main pane is shown on the right or the left? So that when the screen is too small only the left pane will be shown? Currently I have two panes <ion-nav [root]="rootPage" #content swipeBackEnabled="false" main></ion-nav> <ion-nav [root]="rootPage1" #content swipeBackEnabled="false"></ion-nav> I want the main component to be shown on the left side rather then on the right to realise a detail page once the screen is big enought which will be shown on the right. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#10343 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAum2XQdweR-NecL_sfnui9-gRJ_FEogks5rlrtQgaJpZM4L5-eF> .

[digaus]

Could you post your code?

[seiyria]

Sure:

  .reversed-split-pane {
    flex-direction: row-reverse;

    ion-menu {
      border-right: none !important;
      // you'll also want to add border-left: 1px solid #dedede here
    }
  }

<ion-split-pane class="reversed-split-pane">
</ion-split-pane>

[manucorporat]

@seiyria @digaus
#10775

will be available in ionic 2.3

[seiyria]

Awesome, thank you!

[digaus]

Nice :)

[digaus]

Mhh not exactly what I was looking for... Here you can see what I want to do, currently switching rootPages to make it work which is not very good.

[kodeine]

what if there are 2 menus (left/right). Using splitpane i cant close the right menu by default. looks like menuCtl functions dont work at all when using splitpane.

[digaus]

You need to manually do that. Register a click event which triggers the right menu. Does not work otherwise

[kodeine]

@digaus this is the problem when using splitpane, none of the functions for menu work on browser. i cant close or open using menuCtrl.

[digaus]

@kodeine You also need to active the menu you want to open

[Farbdose]

When using ion-slides with horizontal scrolling this change of b435ad6 causes a part of the next slide to be visible for +200ms when rotating from portrait to landscape as the ion-slides takes that long to resize itself.

I don't have an absolute value but its long enough that after rotating the device you can see the left part of the next slide and wonder why it takes so long to resize while everything else is finished subjectively immediately

@manucorporat Could you explain why this delay is needed to make ion-slides work correctly with split panes?
Could we just call resize two times, on the actual event and 200ms later?

My current workaround is basically a copy of the resize method wrapped in a directive for easy access.