Skip to content

docs(nav): component playground examples #2542

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Sep 9, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions docs/api/nav-link.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ A navigation link is used to navigate to a specified component. The component ca

It is the element form of calling the `push()`, `pop()`, and `setRoot()` methods on the navigation controller.

For an example of how to use `ion-nav-link`, visit the [`ion-nav` docs](./nav#using-navlink).




Expand Down
16 changes: 6 additions & 10 deletions docs/api/nav.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
---
title: "ion-nav"
hide_table_of_contents: true
demoUrl: "/docs/demos/api/nav/index.html"
demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/nav/index.html"
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
Expand All @@ -23,18 +20,17 @@ import Slots from '@site/static/auto-generated/nav/slots.md';
import EncapsulationPill from '@components/page/api/EncapsulationPill';
<EncapsulationPill type="shadow" />

<h2 className="table-of-contents__title">Contents</h2>
Nav is a standalone component for loading arbitrary components and pushing new components on to the stack.

<TOCInline
toc={toc}
maxHeadingLevel={2}
/>
Unlike Router Outlet, Nav is not tied to a particular router. This means that if we load a Nav component, and push other components to the stack, they will not affect the app's overall router. This fits use cases where you could have a modal, which needs its own sub-navigation, without making it tied to the apps URL.

## Using NavLink

NavLink is a simplified API when interacting with Nav. Developers can customize the component, pass along component properties, modify the direction of the route animation or define a custom animation when navigating.

Nav is a standalone component for loading arbitrary components and pushing new components on to the stack.
import NavLinkExample from '@site/static/usage/nav/nav-link/index.md';

Unlike Router Outlet, Nav is not tied to a particular router. This means that if we load a Nav component, and push other components to the stack, they will not affect the app's overall router. This fits use cases where you could have a modal, which needs its own sub-navigation, without making it tied to the apps URL.
<NavLinkExample />

## Interfaces

Expand Down
42 changes: 21 additions & 21 deletions static/code/stackblitz/react/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

21 changes: 21 additions & 0 deletions static/usage/nav/modal-navigation/angular/app_module_ts.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
```ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { AppComponent } from './app.component';
import { ExampleComponent } from './example.component';

import { PageOneComponent } from './page-one.component';
import { PageTwoComponent } from './page-two.component';
import { PageThreeComponent } from './page-three.component';

@NgModule({
imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
declarations: [AppComponent, ExampleComponent, PageOneComponent, PageTwoComponent, PageThreeComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
```
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
```html
<ion-header>
<ion-toolbar>
<ion-title>Modal Navigation</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<ion-button id="openModal">Open Modal</ion-button>
<ion-modal #modal trigger="openModal" (willPresent)="onWillPresent()">
<ng-template>
<ion-header>
<ion-toolbar>
<ion-title>Modal</ion-title>
<ion-buttons slot="end">
<ion-button (click)="modal.dismiss()"> Close </ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-nav #nav></ion-nav>
</ion-content>
</ng-template>
</ion-modal>
</ion-content>
```
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
```ts
import { Component, ViewChild } from '@angular/core';
import { IonNav } from '@ionic/angular';

import { PageOneComponent } from './page-one.component';

@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
})
export class ExampleComponent {
@ViewChild('nav') private nav: IonNav;

onWillPresent() {
this.nav.setRoot(PageOneComponent);
}
}
```
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
```ts
import { Component } from '@angular/core';
import { IonNav } from '@ionic/angular';

import { PageTwoComponent } from './page-two.component';

@Component({
selector: 'app-page-one',
template: `
<ion-content class="ion-padding">
<h1>Page One</h1>
<ion-button (click)="navigateToPageTwo()">Go to Page Two</ion-button>
</ion-content>
`,
})
export class PageOneComponent {
constructor(private nav: IonNav) {}

navigateToPageTwo() {
this.nav.push(PageTwoComponent);
}
}
```
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
```ts
import { Component } from '@angular/core';
import { IonNav } from '@ionic/angular';

@Component({
selector: 'app-page-one',
template: `
<ion-content class="ion-padding">
<h1>Page Three</h1>
<ion-button (click)="navigateBack()">Go Back</ion-button>
<ion-button (click)="navigateToRoot()">Go to Root</ion-button>
</ion-content>
`,
})
export class PageThreeComponent {
constructor(private nav: IonNav) {}

navigateBack() {
this.nav.pop();
}

navigateToRoot() {
this.nav.popToRoot();
}
}
```
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
```ts
import { Component } from '@angular/core';
import { IonNav } from '@ionic/angular';

import { PageThreeComponent } from './page-three.component';

@Component({
selector: 'app-page-two',
template: `
<ion-content class="ion-padding">
<h1>Page Two</h1>
<ion-button (click)="navigateToPageThree()">Go to Page Three</ion-button>
</ion-content>
`,
})
export class PageTwoComponent {
component = PageThreeComponent;

constructor(private nav: IonNav) {}

navigateToPageThree() {
this.nav.push(PageThreeComponent);
}
}
```
106 changes: 106 additions & 0 deletions static/usage/nav/modal-navigation/demo.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nav | Modal Navigation</title>
<link rel="stylesheet" href="../../common.css" />
<script src="../../common.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
</head>

<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Modal Navigation</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<ion-button id="openModal">Open Modal</ion-button>
<ion-modal trigger="openModal">
<ion-header>
<ion-toolbar>
<ion-title>Modal</ion-title>
<ion-buttons slot="end">
<ion-button onclick="dismiss()">
Close
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-nav></ion-nav>
</ion-content>
</ion-modal>
</ion-content>
</ion-app>

<script>
const modal = document.querySelector('ion-modal');
const nav = document.querySelector('ion-nav');

modal.addEventListener('willPresent', () => {
nav.setRoot('page-one');
});

const dismiss = () => modal.dismiss();

const navigate = (component) => {
nav.push(component);
}

const navigateBack = () => {
nav.pop();
}

const navigateToRoot = () => {
nav.popToRoot();
}

class PageOne extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-content class="ion-padding">
<h1>Page One</h1>
<ion-button onclick="navigate('page-two')">Go to Page Two</ion-button>
</ion-content>
`;
}
}

class PageTwo extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-content class="ion-padding">
<h1>Page Two</h1>
<ion-button onclick="navigate('page-three')">Go to Page Three</ion-button>
</ion-content>
`;
}
}

class PageThree extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-content class="ion-padding">
<h1>Page Three</h1>
<ion-button onclick="navigateBack()">Go Back</ion-button>
<ion-button onclick="navigateToRoot()">Go to Root</ion-button>
</ion-content>
`;
}
}

customElements.define('page-one', PageOne);
customElements.define('page-two', PageTwo);
customElements.define('page-three', PageThree);

</script>

</body>

</html>
Loading