Umun Page

Ionic offers an effective method for mobile page navigation. However, its intuitiveness on the desktop platform is lacking. This library resolves this issue by facilitating page navigation on the desktop, while preserving the standard Ionic navigation for mobile devices.

Inspiration

umn-page is inspired by how apple handles page navigation in its app while on mobile and desktop.

• On mobile, the pages are pushed on top of each other.
• On desktop, the pages are shown side by side.

Installation

npm install @umun-tech/page

Usage

Creating a page

1. Import the PageModule into your feature module.

import { Page } from '@umun/page'

imports: [
  PageModule
]

2. Use the umn-page component in your template. Create an ionic page as you normally would, but wrap it in the umn-page component.

<umn-page>
  <ion-header>
    <ion-toolbar>
      <ion-title>Home</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    Hello World
  </ion-content>
</umn-page>

3. Use the umn-back component in your template to add a back button to your page. This is better than the default ionic-back-button since it also works on window reload.

<ion-header>
    <ion-toolbar>
      <ion-buttons>
        <umn-back></umn-back>
      </ion-buttons>
      <ion-title>{{title}}</ion-title>
    </ion-toolbar>
</ion-header>

Navigation

Navigating in Page Hierarchy

This is when you want to open up a page on right-side of the existing page on desktop. And on top of the existing page on mobile.

1. Import the RouterModule into your feature module. And create child routes for your page.

  imports: [
    PageModule,
    RouterModule.forChild([
      {
        path: "",
        component: MyPageComponent,
        children: [
          {
            path: "child",
            component: MyChildPageComponent
          }
        ]
      }
    ])
  ]

This works for both mobile and desktop. On mobile, the child page will be pushed on top of the parent page. On desktop, the child page will be shown in the router outlet.

umn-page will automatically hande routing on mobile, hence you don't need to provide sibling routes for mobile.

2. [Optional] Add EmptyComponent as a sibling route to your child page, if the children, doesn't redirect to a default path. Read more about empty component here.

children: [
  {
    path: '',
    component: EmptyComponent
  },
  {
    path: "child",
    component: MyChildPageComponent
  }
]

3. Use the path attribute on any ionic component, inside umn-page to navigate to a child page.

<umn-page>
    <ion-button path="child"></ion-button>
    <ion-item path="child"></ion-item>
</umn-page>

Using path directive will give primary color to the element, whenever the path (route) is active.

Unlke routerLink, you do not need to provicde the full path. Just the child path is enough.

Navigating outside the page

This is when you want to open up any route, but not as a child of the current page. Simply use the default routerLink directive.

<umn-page>
    <ion-button routerLink="/home" routerLinkActive="active"></ion-button>
    <ion-item routerLink="/home" routerLinkActive="active"></ion-item>
</umn-page>

Advanced Usage

• ion-menu
• ion-split-pane

Lifecycle Hooks

All the lifecycle hooks of ion-page are available in umn-page.

• ionViewWillEnter
• ionViewDidEnter
• ionViewWillLeave
• ionViewDidLeave

Whats New

[0.0.4] - 19 Jul 2023

• Fixed componentName bug, due to minification

[0.0.3] - 16 Jun 2023

• Added default empty component.
• pathActive class on active paths
• Minor bug fixes

See changelog for more details.

Contributing

Contributions are welcome. Please open up an issue or create PR if you want to contribute.

Requested Features

• [ ] Open pages in full width of a page on desktop, just how in apple notes, notes page takes full width in the end. And there is no scroll bar.

Open Issues

• [ ] I'm experiencing a problem where I navigate to a page that contains multiple instances of ion-menu in the ion-router-outlet. When I first navigate to the page and open the menu, it works as expected. However, when I subsequently navigate to another page layered on top, only the menu from the top page opens. The issue arises when I return to the original page: the menu fails to open as it should.