Skip to content

Commit 15a2bca

Browse files
sean-perkinssean-perkins
authored
docs(nav): component playground examples (#2542)
1 parent 3ade322 commit 15a2bca

37 files changed

+1204
-31
lines changed

‎docs/api/nav-link.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ A navigation link is used to navigate to a specified component. The component ca
3333

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

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

3739

3840

‎docs/api/nav.md

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
---
22
title: "ion-nav"
3-
hide_table_of_contents: true
4-
demoUrl: "/docs/demos/api/nav/index.html"
5-
demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/nav/index.html"
63
---
74
import Tabs from '@theme/Tabs';
85
import TabItem from '@theme/TabItem';
@@ -23,18 +20,17 @@ import Slots from '@site/static/auto-generated/nav/slots.md';
2320
import EncapsulationPill from '@components/page/api/EncapsulationPill';
2421
<EncapsulationPill type="shadow" />
2522

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

28-
<TOCInline
29-
toc={toc}
30-
maxHeadingLevel={2}
31-
/>
25+
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.
3226

27+
## Using NavLink
3328

29+
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.
3430

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

37-
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.
33+
<NavLinkExample />
3834

3935
## Interfaces
4036

‎static/code/stackblitz/react/package-lock.json

Lines changed: 21 additions & 21 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎static/usage/nav/modal-navigation/angular/app_module_ts.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
```ts
2+
import { NgModule } from '@angular/core';
3+
import { BrowserModule } from '@angular/platform-browser';
4+
import { RouterModule } from '@angular/router';
5+
6+
import { IonicModule } from '@ionic/angular';
7+
8+
import { AppComponent } from './app.component';
9+
import { ExampleComponent } from './example.component';
10+
11+
import { PageOneComponent } from './page-one.component';
12+
import { PageTwoComponent } from './page-two.component';
13+
import { PageThreeComponent } from './page-three.component';
14+
15+
@NgModule({
16+
imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
17+
declarations: [AppComponent, ExampleComponent, PageOneComponent, PageTwoComponent, PageThreeComponent],
18+
bootstrap: [AppComponent],
19+
})
20+
export class AppModule {}
21+
```

‎static/usage/nav/modal-navigation/angular/example_component_html.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
```html
2+
<ion-header>
3+
<ion-toolbar>
4+
<ion-title>Modal Navigation</ion-title>
5+
</ion-toolbar>
6+
</ion-header>
7+
<ion-content class="ion-padding">
8+
<ion-button id="openModal">Open Modal</ion-button>
9+
<ion-modal #modal trigger="openModal" (willPresent)="onWillPresent()">
10+
<ng-template>
11+
<ion-header>
12+
<ion-toolbar>
13+
<ion-title>Modal</ion-title>
14+
<ion-buttons slot="end">
15+
<ion-button (click)="modal.dismiss()"> Close </ion-button>
16+
</ion-buttons>
17+
</ion-toolbar>
18+
</ion-header>
19+
<ion-content>
20+
<ion-nav #nav></ion-nav>
21+
</ion-content>
22+
</ng-template>
23+
</ion-modal>
24+
</ion-content>
25+
```

‎static/usage/nav/modal-navigation/angular/example_component_ts.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
```ts
2+
import { Component, ViewChild } from '@angular/core';
3+
import { IonNav } from '@ionic/angular';
4+
5+
import { PageOneComponent } from './page-one.component';
6+
7+
@Component({
8+
selector: 'app-example',
9+
templateUrl: 'example.component.html',
10+
})
11+
export class ExampleComponent {
12+
@ViewChild('nav') private nav: IonNav;
13+
14+
onWillPresent() {
15+
this.nav.setRoot(PageOneComponent);
16+
}
17+
}
18+
```

‎static/usage/nav/modal-navigation/angular/page_one_component_ts.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import { IonNav } from '@ionic/angular';
4+
5+
import { PageTwoComponent } from './page-two.component';
6+
7+
@Component({
8+
selector: 'app-page-one',
9+
template: `
10+
<ion-content class="ion-padding">
11+
<h1>Page One</h1>
12+
<ion-button (click)="navigateToPageTwo()">Go to Page Two</ion-button>
13+
</ion-content>
14+
`,
15+
})
16+
export class PageOneComponent {
17+
constructor(private nav: IonNav) {}
18+
19+
navigateToPageTwo() {
20+
this.nav.push(PageTwoComponent);
21+
}
22+
}
23+
```

‎static/usage/nav/modal-navigation/angular/page_three_component_ts.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import { IonNav } from '@ionic/angular';
4+
5+
@Component({
6+
selector: 'app-page-one',
7+
template: `
8+
<ion-content class="ion-padding">
9+
<h1>Page Three</h1>
10+
<ion-button (click)="navigateBack()">Go Back</ion-button>
11+
<ion-button (click)="navigateToRoot()">Go to Root</ion-button>
12+
</ion-content>
13+
`,
14+
})
15+
export class PageThreeComponent {
16+
constructor(private nav: IonNav) {}
17+
18+
navigateBack() {
19+
this.nav.pop();
20+
}
21+
22+
navigateToRoot() {
23+
this.nav.popToRoot();
24+
}
25+
}
26+
```

‎static/usage/nav/modal-navigation/angular/page_two_component_ts.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import { IonNav } from '@ionic/angular';
4+
5+
import { PageThreeComponent } from './page-three.component';
6+
7+
@Component({
8+
selector: 'app-page-two',
9+
template: `
10+
<ion-content class="ion-padding">
11+
<h1>Page Two</h1>
12+
<ion-button (click)="navigateToPageThree()">Go to Page Three</ion-button>
13+
</ion-content>
14+
`,
15+
})
16+
export class PageTwoComponent {
17+
component = PageThreeComponent;
18+
19+
constructor(private nav: IonNav) {}
20+
21+
navigateToPageThree() {
22+
this.nav.push(PageThreeComponent);
23+
}
24+
}
25+
```

‎static/usage/nav/modal-navigation/demo.html

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<!DOCTYPE html>
2+
3+
<html lang="en">
4+
5+
<head>
6+
<meta charset="UTF-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>Nav | Modal Navigation</title>
9+
<link rel="stylesheet" href="../../common.css" />
10+
<script src="../../common.js"></script>
11+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
12+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
13+
</head>
14+
15+
<body>
16+
<ion-app>
17+
<ion-header>
18+
<ion-toolbar>
19+
<ion-title>Modal Navigation</ion-title>
20+
</ion-toolbar>
21+
</ion-header>
22+
<ion-content class="ion-padding">
23+
<ion-button id="openModal">Open Modal</ion-button>
24+
<ion-modal trigger="openModal">
25+
<ion-header>
26+
<ion-toolbar>
27+
<ion-title>Modal</ion-title>
28+
<ion-buttons slot="end">
29+
<ion-button onclick="dismiss()">
30+
Close
31+
</ion-button>
32+
</ion-buttons>
33+
</ion-toolbar>
34+
</ion-header>
35+
<ion-content>
36+
<ion-nav></ion-nav>
37+
</ion-content>
38+
</ion-modal>
39+
</ion-content>
40+
</ion-app>
41+
42+
<script>
43+
const modal = document.querySelector('ion-modal');
44+
const nav = document.querySelector('ion-nav');
45+
46+
modal.addEventListener('willPresent', () => {
47+
nav.setRoot('page-one');
48+
});
49+
50+
const dismiss = () => modal.dismiss();
51+
52+
const navigate = (component) => {
53+
nav.push(component);
54+
}
55+
56+
const navigateBack = () => {
57+
nav.pop();
58+
}
59+
60+
const navigateToRoot = () => {
61+
nav.popToRoot();
62+
}
63+
64+
class PageOne extends HTMLElement {
65+
connectedCallback() {
66+
this.innerHTML = `
67+
<ion-content class="ion-padding">
68+
<h1>Page One</h1>
69+
<ion-button onclick="navigate('page-two')">Go to Page Two</ion-button>
70+
</ion-content>
71+
`;
72+
}
73+
}
74+
75+
class PageTwo extends HTMLElement {
76+
connectedCallback() {
77+
this.innerHTML = `
78+
<ion-content class="ion-padding">
79+
<h1>Page Two</h1>
80+
<ion-button onclick="navigate('page-three')">Go to Page Three</ion-button>
81+
</ion-content>
82+
`;
83+
}
84+
}
85+
86+
class PageThree extends HTMLElement {
87+
connectedCallback() {
88+
this.innerHTML = `
89+
<ion-content class="ion-padding">
90+
<h1>Page Three</h1>
91+
<ion-button onclick="navigateBack()">Go Back</ion-button>
92+
<ion-button onclick="navigateToRoot()">Go to Root</ion-button>
93+
</ion-content>
94+
`;
95+
}
96+
}
97+
98+
customElements.define('page-one', PageOne);
99+
customElements.define('page-two', PageTwo);
100+
customElements.define('page-three', PageThree);
101+
102+
</script>
103+
104+
</body>
105+
106+
</html>

0 commit comments

Comments
 (0)