Really loving the new ionic 4 ponents -- 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?
Really loving the new ionic 4 ponents -- 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?
Share Improve this question asked Oct 3, 2018 at 0:38 risingtigerrisingtiger 8911 gold badge11 silver badges22 bronze badges 2- 1 github./ionic-team/ionic/tree/master/core/src/ponents/nav – Aaron Saunders Commented Oct 3, 2018 at 2:59
- I get that. I’m already including this in my project. I’m just looking for clearer advice or documentation on how to use the nav in an angular free environment. – risingtiger Commented Oct 3, 2018 at 3:11
1 Answer
Reset to default 10So, 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./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./@ionic/[email protected]/dist/ionic.js' and 'https://unpkg./@ionic/[email protected]/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 ponent you want to be initially shown. "page-one" is the name of your ponent as defined by window.customElements.define -- whatever you want it to be.
You can use an ion-nav-push ponent to push another page onto the nav ponent. 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./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./@ionic/[email protected]/dist/ionic.js"></script>
<link rel="stylesheet" type="text/css" href="https://beta.ionicframework./docs/overrides.css">
<link rel="stylesheet" href="https://unpkg./@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 ponent="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 ponent="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>