Menu
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?
432
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:
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/[email protected]/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/[email protected]/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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With