Reusable Grid Component To Host Pages

Ionic Framework ionic-v3
1

We are currently using the SplitPane component in our app, however on the tablet and in PWA we’d like to display a third column when an item is selected in a listing.

Side Menu > Item Listing > Item Details

So rather than pushing another page for the Details, instead display the Details beside the Listing. What is the best way to implement this?

I know I could use ion-grid with different responsive column directives, but we need this on several pages. Is there a way to make this into a reusable component which can host both the Listing and the Details?

2

There is a discussion of master/detail components in the Tour Of Hero’s tutorial: https://angular.io/tutorial/toh-pt3#masterdetail-components

You might consider using a grid: https://www.ag-grid.com/example-angular-master-detail/?framework=all

Or you might want to consider alternatives to the hamburger menu: https://uxplanet.org/alternatives-of-hamburger-menu-a8b0459bf994

3

Thanks for the suggestions @robinyo!

I experimented with ion-grid but ran into some difficulties getting scrolling to work properly in the two columns. But after a bit of research I had a brainwave… showing ion-menu on both the left and right sides!

This will work perfectly, since the main page and side menu each take care of scrolling, pull down refresh, infinite scroll, navbars, etc.

I’ll have some logic when the screen is Large or bigger, publish an event with Details content, which displays the right side menu. When the screen is less than Large, then push a Page as usual. And when there is no Details content, the right side menu will be hidden, so only two columns.

I’ll keep you posted on how things work out :+1:

4

I tried:

ionic start myApp sidemenu

app.html:

<ion-split-pane>

  <ion-menu [content]="content" side="left">
    <ion-header>
      <ion-toolbar>
        <ion-title>Left 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-menu [content]="content" side="right">
    <ion-header>
      <ion-toolbar>
        <ion-title>Detail</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content padding>

      <p>
        Detail content goes here.
      </p>

    </ion-content>
  </ion-menu>

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

</ion-split-pane>

home.html:

<ion-header>

  <ion-navbar>

    <button ion-button menuToggle="left" left>
      <ion-icon name="menu"></ion-icon>
    </button>

    <ion-title>
      Master
    </ion-title>

    <!--
    <button ion-button menuToggle="right" right>
      <ion-icon name="menu"></ion-icon>
    </button>
    -->

  </ion-navbar>

</ion-header>

<ion-content padding>

  <p>
    Master (main) content goes here.
  </p>

</ion-content>

iPhone 6:

01
01385×674 4.08 KB

IPad Pro:

11
111376×1033 16.1 KB

And, you can use an ‘ngIf’ to show/hide the right menu.

app.html:

  ...

        <button menuClose ion-item (click)="toggleMenu()">
          Toggle Right Menu
        </button>

  ...

  <ng-container *ngIf='showRightMenu'>
    <ion-menu [content]="content" side="right">
      <ion-header>
        <ion-toolbar>
          <ion-title>Detail</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content padding>

        <p>
          Detail content goes here.
        </p>

      </ion-content>
    </ion-menu>
  </ng-container>

  ...

app.component.ts:

  showRightMenu: boolean = true;

  ...

  toggleMenu() {
    this.showRightMenu = !this.showRightMenu;
  }

IPad Pro:

24
241373×1032 14.8 KB

5

@dalezak - how did you make out? Were you able to get your List/Detail working for large and small screens? Care to share?