igx-slide-out-splitpane v0.0.4

Ionic directive created for the SplitPane component.

1. Install

   $_ npm install igx-slide-out-splitpane --save

2. Import module to projects app.module.ts

   import { IgxSlideOutSplitPaneModule } from "../directives/igx-slide-out-splitpane.module";

   @NgModule({ declarations: MyApp , imports: BrowserModule, IonicModule.forRoot(MyApp), NgxIonExpandableNavModule ,

3. Add a the splitpane component to your app.component.ts file with the igxSlideOutSplitPane directive in the ion-menu.

4. Remember to add icons to the menu in your app.components.ts file. This example below adds an icon properties to the pages array.

   pages: Array<{ title: string, component: any, icon: string }>;
   
   constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
     this.initializeApp();
   
     // used for an example of ngFor and navigation
     this.pages = [
       { title: 'Home', component: HomePage, icon: 'md-analytics' },
       { title: 'List', component: ListPage, icon: 'md-appstore' }
     ];
   
   }
   
   ....

5. Now in your app.html file update the menu to include the icons

   <ion-menu [content]="content" igxSlideOutSplitPane>
      <ion-header>
        <ion-toolbar>
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
   
      <ion-content>
        <ion-list>
          <button icon-right menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
            {{p.title}}
            <ion-icon [name]="p.icon" item-right></ion-icon>
          </button>
        </ion-list>
      </ion-content>

6. The stylesheet src/theme/igx.slide.out.splitpane.scss needs to be added manually and then @import from the main src/theme/variables.scss file.

   ... @import "ionic.theme.default"; @import "igx.slide.out.splitpane"; ...