Ionic Split Pane – Part 2

In this post, I am going to dig a little deeper into working with the new Ionic Split Pane component. I explored it some in this post. There are three elements I want to explore: a full header design, understanding how to navigate pages, and handling resizing.

Full Header Design

Several readers asked about how you might achieve this design:

A full header Ionic Split Pane

After playing around with different variations of the component structure and encountering some navigation troubles, I settled on using a basic CSS approach to this design.

The app.html is a standard component (sorry spacing with the brackets, blame WordPress):

	<ion-split-pane>
	<ion-menu [content]="content">
	<ion-header>
	<ion-toolbar>
	<ion-title>{{title}}</ion-title>
	</ion-toolbar>
	</ion-header>
	<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>
	</ion-split-pane>

view raw

app.html

hosted with ❤ by GitHub

This should look very close the documentation from Ionic. All we need to do is update the app.scss file with two changes:

	.split-pane-visible > .split-pane-side {
	border-right: none !important;
	}
	.menu-inner ion-content {
	border-right: 1px solid #dedede;
	}

view raw

app.scss

hosted with ❤ by GitHub

The first change removes the line that divides the two headers. This line actually runs down the entire right side of the pane. So, with the second change, we restore the line back to the default style of a solid 1-pixel line of medium gray.

We still have two headers, but by not including any visible text in the main header, we initially have the illusion of a single header.

Handling Resizing

Here is where I encountered one of my first issues. The design worked fine in desktop sizes, but when I reduced the width below its breakpoint, my pane would disappear and along with it, my title.

The component has an event listener for when a pane state change is triggered. So, I changed my < ion-split-pane > tag to include (ionChange)=”updateTitles()”.

Now, I just needed to manage what the visible state of the pane is, and the broadcast this state to my other pages, so they could replace the empty title with my pane’s title.

Here is my app.componet.ts code:

	import { Component, ViewChild } from '@angular/core';
	import { Events, MenuController, Nav, Platform } from 'ionic-angular';
	import { StatusBar, Splashscreen } from 'ionic-native';
	import { MainPage } from '../pages/main/main';
	import { MercuryPage } from '../pages/mercury/mercury';
	import { GeminiPage } from '../pages/gemini/gemini';
	import { ApolloPage } from '../pages/apollo/apollo';
	import { AstpPage } from '../pages/astp/astp';
	import { SkylabPage } from '../pages/skylab/skylab';
	import { ShuttlePage } from '../pages/shuttle/shuttle';
	import { OrionPage } from '../pages/orion/orion';
	@Component({
	templateUrl: 'app.html'
	})
	export class MyApp {
	@ViewChild(Nav) nav: Nav;
	rootPage: any;
	projects: Array<any> = [];
	title: String = 'Projects';
	menuToggleState: Boolean = false;
	constructor(public menuCtrl: MenuController, public platform: Platform, public events: Events) {
	this.rootPage = MainPage;
	this.projects = [
	{ name: 'Mercury', details: MercuryPage },
	{ name: 'Gemini', details: GeminiPage },
	{ name: 'Apollo', details: ApolloPage },
	{ name: 'Skylab', details: SkylabPage },
	{ name: 'ASTP', details: AstpPage },
	{ name: 'Space Shuttle', details: ShuttlePage },
	{ name: 'Orion', details: OrionPage }
	]
	platform.ready().then(() => {
	// Okay, so the platform is ready and our plugins are available.
	// Here you can do any higher level native things you might need.
	StatusBar.styleDefault();
	Splashscreen.hide();
	this.platform.width() < 768 ? this.menuToggleState = true : this.menuToggleState = false;
	});
	}
	projectSelected(theProject) {
	this.nav.setRoot(theProject.details);
	this.menuCtrl.close();
	}
	updateTitles() {
	this.platform.width() < 768 ? this.menuToggleState = true : this.menuToggleState = false;
	this.events.publish('title:updated', { menuState: this.menuToggleState });
	}
	}

view raw

app.component.ts

hosted with ❤ by GitHub

We define a menuToggleState boolean to hold our pane’s visible state. This variable is set once the platform is ready. We have hard code the breakpoint to match the split panes. If you change that value, you will need to update it here as well.

The key to this solution is using the Ionic Events module to broadcast this value upon a state change triggered by the IonChange event. When that event occurs, we check the new width, and determine of the pane is now showing or not. Then we publish our custom event throughout our Ionic app.

In each page that is shown with the main content, I adjusted a few items. First, I had the title component is bound the title variable.

	< ion-header >
	< ion-navbar >
	< button ion-button menuToggle >< ion-icon name="menu" >< /ion-icon >< /button >
	< ion-title >{{title}}< /ion-title >
	< /ion-navbar >
	< /ion-header >

view raw

app_header.html

hosted with ❤ by GitHub

When we do not want a title visible, we set this variable to hold a space, rather than an empty string. The reason for this is, without content in the node, Ionic did not properly display any header icons. We also include a button that will auto display our hamburger menu icon when the split pane is hidden, giving us access to that content.

In the component’s code, we need to add the event listener for our custom event we broadcast from the resize action. Here is the full code:

	import { Component } from '@angular/core';
	import { Events, NavController, NavParams } from 'ionic-angular';
	@Component({
	selector: 'page-mercury',
	templateUrl: 'mercury.html'
	})
	export class MercuryPage {
	title: String = ' ';
	constructor(public events: Events, public navCtrl: NavController, public navParams: NavParams) {
	events.subscribe('title:updated', (data) => {
	if (data.menuState) {
	this.title = "Projects";
	} else {
	this.title = ' ';
	}
	});
	}
	}

view raw

mercury.ts

hosted with ❤ by GitHub

This is for the Project Mercury page, each NASA project page has the similar event subscriber included in its constructor. For this sample, I did not rework this into a custom component to properly encapsulate the code as to not need to repeat so much of it across all these pages. The basic structure of the code listens for the event from the master component and depending on the state updates the title variable.

Now when I resize the window smaller than the breakpoint, the title is updated on the main content pages. Here is what it looks like when resized:

and the menu being displayed:

Page Navigation

Another tricky part of working with the split pane is understanding how to navigate pages. It was this issue that forced me to abandon several other attempts at a full header design. The heart of updating the main content from the pane is to use the @ViewChild.

Within the class for the app, we define our ViewChild to come from our root NavController using @ViewChild(Nav) nav: Nav;

Now, we can properly reference it in our component, and navigate correctly. Our list of manned NASA projects will call the projectSelected function when clicked and pass along which page to navigate to:

	projectSelected(theProject) {
	this.nav.setRoot(theProject.details);
	this.menuCtrl.close();
	}

view raw

app.component.ts

hosted with ❤ by GitHub

This function tells the nav that we referenced with the @ViewChild to set it’s rootpage to the project component we stored within our array and that is passed into this function. We also use the MenuController, to automatically close the pane if it is being shown like a normal sidemenu.

Navigation within the Main Content

If you want to have navigation with the main content to a new page, the normal navigation methods work just fine. In the sample, if you click on the NASA meatball logo, it will navigate to a new page showing the NASA worm logo. Clicking the worm logo will return you to the meatball page. However, you can now see the UX issue of having the hamburger menu and the back navigation control. But, the purpose of this exploration with just to get the core functionality working, and not worry about the UX issues. That is left to you and whatever your app’s design might be.

Hopefully, this brief look further into the Split Pane component is useful. The sample code can be found in my GitHub repo. If you are wondering why I picked NASA as my sample, you can visit my other blog, https://spacequest.wordpress.com/ to learn why.