Can the new SplitPane be used to have a side SideMenu next to the content with both under the main header?
CSS hack below, untested.
Is there a better way to do thisā¦ nested panes?
ion-menu {
position: absolute!important;
margin-top: 60px!important;
}
.content {
margin-left: 265px!important;
}
.menucontent {
left: -265px!important;
}
And in app.html:
<ion-content class="menucontent">
I would not take that approach. It is based on exact pixels which can vary from platform to platform.
A lot depends on what navigation flow you need and display rules that you need for the split pane. I took a look at āsolvingā this and here are my two solutions:
- If you inspect deep into the headers of the āstandardā split pane layout, you can override the css elements that make up the line between the two headers. If I remember correctly, this will affect the entire pane, so you may need to introduce something for the split pane content if you visually need it
- I started with a blank template and changed the home.html to this
<ion-header> <ion-navbar> <ion-title> Ionic Blank </ion-title> </ion-navbar> </ion-header>
<ion-content padding> <ion-split-pane> <ion-menu [content]="content"> <p padding>pane stuff</p> </ion-menu> <ion-nav [root]="contentPage" main #content> </ion-nav> </ion-split-pane> </ion-content>
in my home.ts, I defined the contentPage variable.
I get this in the end:
1 Like
Hi Chris and thanks.
@1. It will not only need to split the panes but also allow for clicking of the menu items without pane overlap. My suggested CSS did not handle it but a later one ( I do not have on me handily ) does. But it will still require a margin-top px setting, which you are advising against.
@2. How would you recommend using this to handle a sidemenu on a mobile device as in with the sidemenu template?
Ultimately, this is to be used both on devices and browsers. Your #2 works in a browser but does not have the benefits that the sidemenu template brings to devices.
Chris, I have tried your example in the app.html in a sidemenu template but the Page Contents are not accessible(clickable): when the SplitPane is collapsed.
For example the Toggle Menu button in this screenshot is not clickable. It is however if the SplitPane is expanded.
Here is the code:
<ion-header>
<ion-navbar>
<ion-title>
Main Header
</ion-title>
</ion-navbar>
</ion-header><ion-split-pane>
<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>
<ion-nav [root]="rootPage" main #content swipeBackEnabled="false"></ion-nav>
<ion-split-pane>
1 Like
Hi Chris, were you ever able to implement this with the SideMenu?
Or is this kind of expected to replace the SideMenu?
Thanks
@ChrisGriiffith @shepard @manucorporat
Hi Chris, in your case you have two problems,
1) if the loaded page in ion-nav containts another ion-content which is 99,99% of times then on the right you have to scrollbars which is not good
2) If you open the menu on closed sidemenu, the menu is not overlapping the header which is not by style guide
Does anyone can help?
Some days ago I opened an feature request for this behavior on github
Explore the Split Pane more and wrote another post: https://chrisgriffith.wordpress.com/2017/03/21/ionic-split-pane-part-2/
Hi Chris, thanks for looking deeper into this.
First off, it is SplitPane and not SplitPanel - correct?
Secondly, I modified your example and it looks like it will work but only if there is no background image in the Header.
If a background image is added, it is split - or doubled up:
Unlike mburger81 above, I like the menu sliding out beneath the Header. But if this is a very limited personal opinion, then I will not expect it to be something achieved with SplitPanel.
That said, a continuous background image in the header and sliding-out-beneath-menu are both doable using only CSS. Other than easier cross-browser compatibility, can you give reasons why SplitPanel should be used?
I do really like it but the continuous BG image is a biggee though.
Yeah, Ionic renamed it from Split Panel to Split pane.
I think you can set the sidemenu mode in either the app config or in the HTML. I have not tried, but am guessing that it is supported.
For an image header like you outline, I think you can leverage the width value that used to calculate the pane. Then take this value and use it to shift the image over. The internal SCSS is:
min-width: 270px;
max-width: 28%;
You might need to lock the min and max to the same value to āsolveā this
What do you mean by āsidemenu modeā?
What do you think of this one:
<ion-split-pane (ionChange)="updateTitles()">
<ion-header>
<ion-toolbar>
<button ion-button menuToggle><ion-icon name="menu"></ion-icon></button>
<ion-title>{{title}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-menu [content]="content">
<ion-content>
<ion-list>
<ion-item detail-push *ngFor="let project of projects" (click)="projectSelected(project)">
{{ project.name }}
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<!-- main navigation -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false" main></ion-nav>
A little adjustment to:
ion-menu {
margin-top: 58px!important;
}
For anyone else looking for a solution, Iām using Ionic 4 with web components and found a really simple solution. I move the ion-header component outside ion-split-pane and use CSS to reposition the content so it isnāt hidden by the header.
Why not ion-header with ion-content and put ion-split-pane in ion-content? if you use pixels to reposition ion-split-pane, on iphone it does not fit.