Skip to content

Commit 550396c

Browse files
sean-perkinssean-perkins
authored
docs(nav): nav link component playground (#2437)
1 parent b886a32 commit 550396c

18 files changed

+542
-1
lines changed

‎docs/api/nav.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,11 @@ TODO: Playground Example
4242

4343
## Using NavLink
4444

45-
TODO: Playground Example
45+
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.
46+
47+
import NavLinkExample from '@site/static/usage/nav/nav-link/index.md';
48+
49+
<NavLinkExample />
4650

4751
## Navigation within a Modal
4852

‎static/usage/nav/nav-link/angular/app_component_html.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
```html
2+
<ion-nav [root]="component"></ion-nav>
3+
```

‎static/usage/nav/nav-link/angular/app_component_ts.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
4+
import { PageOneComponent } from './page-one.component';
5+
6+
@Component({
7+
selector: 'app-root',
8+
templateUrl: 'app.component.html',
9+
})
10+
export class AppComponent {
11+
component = PageOneComponent;
12+
}
13+
```

‎static/usage/nav/nav-link/angular/app_module_ts.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
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+
10+
import { PageOneComponent } from './page-one.component';
11+
import { PageTwoComponent } from './page-two.component';
12+
import { PageThreeComponent } from './page-three.component';
13+
14+
@NgModule({
15+
imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})],
16+
declarations: [AppComponent, PageOneComponent, PageTwoComponent, PageThreeComponent],
17+
bootstrap: [AppComponent],
18+
})
19+
export class AppModule {}
20+
```

‎static/usage/nav/nav-link/angular/page_one_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+
4+
import { PageTwoComponent } from './page-two.component';
5+
6+
@Component({
7+
selector: 'app-page-one',
8+
template: `
9+
<ion-header>
10+
<ion-toolbar>
11+
<ion-title>Page One</ion-title>
12+
</ion-toolbar>
13+
</ion-header>
14+
<ion-content class="ion-padding">
15+
<h1>Page One</h1>
16+
<ion-nav-link router-direction="forward" [component]="component">
17+
<ion-button>Go to Page Two</ion-button>
18+
</ion-nav-link>
19+
</ion-content>
20+
`,
21+
})
22+
export class PageOneComponent {
23+
component = PageTwoComponent;
24+
}
25+
```

‎static/usage/nav/nav-link/angular/page_three_component_ts.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
4+
@Component({
5+
selector: 'app-page-one',
6+
template: `
7+
<ion-header>
8+
<ion-toolbar>
9+
<ion-buttons slot="start">
10+
<ion-back-button></ion-back-button>
11+
</ion-buttons>
12+
<ion-title>Page Three</ion-title>
13+
</ion-toolbar>
14+
</ion-header>
15+
<ion-content class="ion-padding">
16+
<h1>Page Three</h1>
17+
</ion-content>
18+
`,
19+
})
20+
export class PageThreeComponent {}
21+
```

‎static/usage/nav/nav-link/angular/page_two_component_ts.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
4+
import { PageThreeComponent } from './page-three.component';
5+
6+
@Component({
7+
selector: 'app-page-two',
8+
template: `
9+
<ion-header>
10+
<ion-toolbar>
11+
<ion-buttons slot="start">
12+
<ion-back-button></ion-back-button>
13+
</ion-buttons>
14+
<ion-title>Page Two</ion-title>
15+
</ion-toolbar>
16+
</ion-header>
17+
<ion-content class="ion-padding">
18+
<h1>Page Two</h1>
19+
<div>
20+
<ion-nav-link router-direction="forward" [component]="component">
21+
<ion-button>Go to Page Three</ion-button>
22+
</ion-nav-link>
23+
</div>
24+
</ion-content>
25+
`,
26+
})
27+
export class PageTwoComponent {
28+
component = PageThreeComponent;
29+
}
30+
```

‎static/usage/nav/nav-link/demo.html

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
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 | NavLink</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-nav root="page-one"></ion-nav>
18+
</ion-app>
19+
20+
<script>
21+
class PageOne extends HTMLElement {
22+
connectedCallback() {
23+
this.innerHTML = `
24+
<ion-header>
25+
<ion-toolbar>
26+
<ion-title>Page One</ion-title>
27+
</ion-toolbar>
28+
</ion-header>
29+
<ion-content class="ion-padding">
30+
<h1>Page One</h1>
31+
<ion-nav-link router-direction="forward" component="page-two">
32+
<ion-button>Go to Page Two</ion-button>
33+
</ion-nav-link>
34+
</ion-content>
35+
`;
36+
}
37+
}
38+
class PageTwo extends HTMLElement {
39+
connectedCallback() {
40+
this.innerHTML = `
41+
<ion-header>
42+
<ion-toolbar>
43+
<ion-buttons slot="start">
44+
<ion-back-button></ion-back-button>
45+
</ion-buttons>
46+
<ion-title>Page Two</ion-title>
47+
</ion-toolbar>
48+
</ion-header>
49+
<ion-content class="ion-padding">
50+
<h1>Page Two</h1>
51+
<div>
52+
<ion-nav-link router-direction="forward" component="page-three">
53+
<ion-button>Go to Page Three</ion-button>
54+
</ion-nav-link>
55+
</div>
56+
</ion-content>
57+
`;
58+
}
59+
}
60+
class PageThree extends HTMLElement {
61+
connectedCallback() {
62+
this.innerHTML = `
63+
<ion-header>
64+
<ion-toolbar>
65+
<ion-buttons slot="start">
66+
<ion-back-button></ion-back-button>
67+
</ion-buttons>
68+
<ion-title>Page Three</ion-title>
69+
</ion-toolbar>
70+
</ion-header>
71+
<ion-content class="ion-padding">
72+
<h1>Page Three</h1>
73+
</ion-content>
74+
`;
75+
}
76+
}
77+
customElements.define('page-one', PageOne);
78+
customElements.define('page-two', PageTwo);
79+
customElements.define('page-three', PageThree);
80+
</script>
81+
82+
</body>
83+
84+
</html>

‎static/usage/nav/nav-link/index.md

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
5+
import angular_app_module_ts from './angular/app_module_ts.md';
6+
import angular_app_component_html from './angular/app_component_html.md';
7+
import angular_app_component_ts from './angular/app_component_ts.md';
8+
import angular_page_one_component_ts from './angular/page_one_component_ts.md';
9+
import angular_page_two_component_ts from './angular/page_two_component_ts.md';
10+
import angular_page_three_component_ts from './angular/page_three_component_ts.md';
11+
12+
import react_main_tsx from './react/main_tsx.md';
13+
import react_page_one_tsx from './react/page_one_tsx.md';
14+
import react_page_two_tsx from './react/page_two_tsx.md';
15+
import react_page_three_tsx from './react/page_three_tsx.md';
16+
17+
import vue_example from './vue/example_vue.md';
18+
import vue_page_one from './vue/page_one_vue.md';
19+
import vue_page_two from './vue/page_two_vue.md';
20+
import vue_page_three from './vue/page_three_vue.md';
21+
22+
<Playground
23+
code={{
24+
javascript,
25+
angular: {
26+
files: {
27+
'src/app/app.component.html': angular_app_component_html,
28+
'src/app/app.component.ts': angular_app_component_ts,
29+
'src/app/page-one.component.ts': angular_page_one_component_ts,
30+
'src/app/page-two.component.ts': angular_page_two_component_ts,
31+
'src/app/page-three.component.ts': angular_page_three_component_ts,
32+
'src/app/app.module.ts': angular_app_module_ts,
33+
},
34+
},
35+
react: {
36+
files: {
37+
'src/main.tsx': react_main_tsx,
38+
'src/page-one.tsx': react_page_one_tsx,
39+
'src/page-two.tsx': react_page_two_tsx,
40+
'src/page-three.tsx': react_page_three_tsx,
41+
},
42+
},
43+
vue: {
44+
files: {
45+
'src/components/Example.vue': vue_example,
46+
'src/components/PageOne.vue': vue_page_one,
47+
'src/components/PageTwo.vue': vue_page_two,
48+
'src/components/PageThree.vue': vue_page_three,
49+
},
50+
},
51+
}}
52+
src="usage/nav/nav-link/demo.html"
53+
devicePreview
54+
/>

‎static/usage/nav/nav-link/javascript.md

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
```html
2+
<ion-app>
3+
<ion-nav root="page-one"></ion-nav>
4+
</ion-app>
5+
6+
<script>
7+
class PageOne extends HTMLElement {
8+
connectedCallback() {
9+
this.innerHTML = `
10+
<ion-header>
11+
<ion-toolbar>
12+
<ion-title>Page One</ion-title>
13+
</ion-toolbar>
14+
</ion-header>
15+
<ion-content class="ion-padding">
16+
<h1>Page One</h1>
17+
<ion-nav-link router-direction="forward" component="page-two">
18+
<ion-button>Go to Page Two</ion-button>
19+
</ion-nav-link>
20+
</ion-content>
21+
`;
22+
}
23+
}
24+
class PageTwo extends HTMLElement {
25+
connectedCallback() {
26+
this.innerHTML = `
27+
<ion-header>
28+
<ion-toolbar>
29+
<ion-buttons slot="start">
30+
<ion-back-button></ion-back-button>
31+
</ion-buttons>
32+
<ion-title>Page Two</ion-title>
33+
</ion-toolbar>
34+
</ion-header>
35+
<ion-content class="ion-padding">
36+
<h1>Page Two</h1>
37+
<div>
38+
<ion-nav-link router-direction="forward" component="page-three">
39+
<ion-button>Go to Page Three</ion-button>
40+
</ion-nav-link>
41+
</div>
42+
</ion-content>
43+
`;
44+
}
45+
}
46+
class PageThree extends HTMLElement {
47+
connectedCallback() {
48+
this.innerHTML = `
49+
<ion-header>
50+
<ion-toolbar>
51+
<ion-buttons slot="start">
52+
<ion-back-button></ion-back-button>
53+
</ion-buttons>
54+
<ion-title>Page Three</ion-title>
55+
</ion-toolbar>
56+
</ion-header>
57+
<ion-content class="ion-padding">
58+
<h1>Page Three</h1>
59+
</ion-content>
60+
`;
61+
}
62+
}
63+
customElements.define('page-one', PageOne);
64+
customElements.define('page-two', PageTwo);
65+
customElements.define('page-three', PageThree);
66+
</script>
67+
```

‎static/usage/nav/nav-link/react/main_tsx.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonNav } from '@ionic/react';
4+
5+
import PageOne from './page-one';
6+
7+
function Example() {
8+
return <IonNav root={() => <PageOne />}></IonNav>;
9+
}
10+
export default Example;
11+
```

‎static/usage/nav/nav-link/react/page_one_tsx.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonButton, IonHeader, IonContent, IonNavLink, IonToolbar, IonTitle } from '@ionic/react';
4+
5+
import PageTwo from './page-two';
6+
7+
function PageOne() {
8+
return (
9+
<>
10+
<IonHeader>
11+
<IonToolbar>
12+
<IonTitle>Page One</IonTitle>
13+
</IonToolbar>
14+
</IonHeader>
15+
<IonContent class="ion-padding">
16+
<h1>Page One</h1>
17+
<IonNavLink routerDirection="forward" component={() => <PageTwo />}>
18+
<IonButton>Go to Page Two</IonButton>
19+
</IonNavLink>
20+
</IonContent>
21+
</>
22+
);
23+
}
24+
25+
export default PageOne;
26+
```

0 commit comments

Comments
 (0)