javascript ionic-framework web-component

Ionic 4 nav component WITHOUT Angular

Really loving the new ionic 4 components -- especially, NO Angular.

Issue though: I use the ion-nav like so:

navElRef.push('second-page')

The animation is not right. It seems I'm not setting the right parameters or classname or something. Is there docs/advice on how to use Ionic 4 nav WITHOUT angular?

Solution

So, after mucking around in the Ionic Framework 4 docs for two days, I see that there's basically nothing there to explain how to do this.

But, ... its actually not that hard to implement.

Got to: https://beta.ionicframework.com/docs/api/nav/. Then inspect the element of the phone example. Find the iframe in the elements tab of Chrome dev tools (or whatever you use). Copy that src and open it in a new browser tab. Now, you can see a working example that uses no framework. You can just copy the HTML src and create your own index.html from that and it should work.

The list of making the ion-nav work is this:

Make sure to have class="plt-desktop ios" mode="ios" attrs in HTML tag (or whatever os you want)
Make sure to have included js and CSS: 'https://unpkg.com/@ionic/core@4.0.0-beta.11/dist/ionic.js' and 'https://unpkg.com/@ionic/core@4.0.0-beta.11/css/ionic.bundle.css' in HTML file
Make sure the ion-nav is wrapped inside of the ion-app tag.
add root="page-one" attr to your ion-nav signifying what web component you want to be initially shown. "page-one" is the name of your component as defined by window.customElements.define -- whatever you want it to be.
You can use an ion-nav-push component to push another page onto the nav component. But, more likely, you'll be using a router (React, Page, etc, etc) to handle this. In your specific router solution instigate the page navigation by calling the push method on the ion-nav element: something like:

document.querySelector('ion-nav').push('page-two')

You can read more about calling the navigation methods here: https://beta.ionicframework.com/docs/api/nav/

Here is an example:

<!DOCTYPE html>
<html dir="ltr" class="plt-desktop ios" mode="ios">

<head>
  <meta charset="UTF-8">
  <title>Nav</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <script src="https://unpkg.com/@ionic/core@4.0.0-beta.11/dist/ionic.js"></script>
  <link rel="stylesheet" type="text/css" href="https://beta.ionicframework.com/docs/overrides.css">
<link rel="stylesheet" href="https://unpkg.com/@ionic/core@4.0.0-beta.11/css/ionic.bundle.css">
  <script>
    class PageOne extends HTMLElement {
      connectedCallback() {
        this.innerHTML = `
          <ion-header translucent>
            <ion-toolbar>
              <ion-title>Page One</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content padding fullscreen>
            <h1>Page One</h1>
            <ion-nav-push component="page-two">
              <ion-button class="next">Go to Page Two</ion-button>
            </ion-nav-push>
          </ion-content>
        `;
      }
    }
    class PageTwo extends HTMLElement {
      connectedCallback() {
        this.innerHTML = `
          <ion-header translucent>
            <ion-toolbar>
              <ion-buttons slot="start">
                <ion-back-button text="Page One"></ion-back-button>
              </ion-buttons>
              <ion-title>Page Two</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content padding fullscreen>
            <h1>Page Two</h1>
            <div>
              <ion-nav-push component="page-three">
                <ion-button class="next">Go to Page Three</ion-button>
              </ion-nav-push>
            </div>
          </ion-content>
        `;
      }
    }
    class PageThree extends HTMLElement {
      connectedCallback() {
        this.innerHTML = `
          <ion-header translucent>
            <ion-toolbar>
              <ion-buttons slot="start">
                <ion-back-button text="Page Two"></ion-back-button>
              </ion-buttons>
              <ion-title>Page Three</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content padding fullscreen>
            <h1>Page Three</h1>
          </ion-content>
        `;
      }
    }
    customElements.define('page-one', PageOne);
    customElements.define('page-two', PageTwo);
    customElements.define('page-three', PageThree);
  </script>
</head>

<body>
  <ion-app>
    <ion-nav root="page-one"></ion-nav>
  </ion-app>
  <style>
    ion-toolbar {
      --background: white;
    }
  </style>
</body>

</html>