Skip to content

docs(nav): nav link component playground #2437

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.

Sign up for GitHub

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 8 commits into from
Jul 6, 2022
Merged

docs(nav): nav link component playground #2437

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9405453
docs(nav): nav link component playground
sean-perkins Jun 22, 2022
efcdd0d
wip(): react example
sean-perkins Jun 22, 2022
b27d021
docs(): vue nav-link example
sean-perkins Jul 6, 2022
fe321b7
docs(): make angular example match other examples
sean-perkins Jul 6, 2022
374e91e
fix(): render example in device frame
sean-perkins Jul 6, 2022
4729edb
fix(): react back button
sean-perkins Jul 6, 2022
4a3e539
fix(): vue back button
sean-perkins Jul 6, 2022
cab2a2e
fix(): angular examples
sean-perkins Jul 6, 2022
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
6 changes: 5 additions & 1 deletion docs/api/nav.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,11 @@ TODO: Playground Example

## Using NavLink

TODO: Playground Example
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.

import NavLinkExample from '@site/static/usage/nav/nav-link/index.md';

<NavLinkExample />

## Navigation within a Modal

Expand Down
3 changes: 3 additions & 0 deletions static/usage/nav/nav-link/angular/app_component_html.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
```html
<ion-nav [root]="component"></ion-nav>
```
13 changes: 13 additions & 0 deletions static/usage/nav/nav-link/angular/app_component_ts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
```ts
import { Component } from '@angular/core';

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

@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
})
export class AppComponent {
component = PageOneComponent;
}
```
20 changes: 20 additions & 0 deletions static/usage/nav/nav-link/angular/app_module_ts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
```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 { 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, PageOneComponent, PageTwoComponent, PageThreeComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
```
25 changes: 25 additions & 0 deletions static/usage/nav/nav-link/angular/page_one_component_ts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
```ts
import { Component } from '@angular/core';

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

@Component({
selector: 'app-page-one',
template: `
<ion-header>
<ion-toolbar>
<ion-title>Page One</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1>Page One</h1>
<ion-nav-link router-direction="forward" [component]="component">
<ion-button>Go to Page Two</ion-button>
</ion-nav-link>
</ion-content>
`,
})
export class PageOneComponent {
component = PageTwoComponent;
}
```
21 changes: 21 additions & 0 deletions static/usage/nav/nav-link/angular/page_three_component_ts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
```ts
import { Component } from '@angular/core';

@Component({
selector: 'app-page-one',
template: `
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Page Three</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1>Page Three</h1>
</ion-content>
`,
})
export class PageThreeComponent {}
```
30 changes: 30 additions & 0 deletions static/usage/nav/nav-link/angular/page_two_component_ts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
```ts
import { Component } from '@angular/core';

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

@Component({
selector: 'app-page-two',
template: `
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Page Two</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1>Page Two</h1>
<div>
<ion-nav-link router-direction="forward" [component]="component">
<ion-button>Go to Page Three</ion-button>
</ion-nav-link>
</div>
</ion-content>
`,
})
export class PageTwoComponent {
component = PageThreeComponent;
}
```
84 changes: 84 additions & 0 deletions static/usage/nav/nav-link/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nav | NavLink</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-nav root="page-one"></ion-nav>
</ion-app>

<script>
class PageOne extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-header>
<ion-toolbar>
<ion-title>Page One</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1>Page One</h1>
<ion-nav-link router-direction="forward" component="page-two">
<ion-button>Go to Page Two</ion-button>
</ion-nav-link>
</ion-content>
`;
}
}
class PageTwo extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Page Two</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1>Page Two</h1>
<div>
<ion-nav-link router-direction="forward" component="page-three">
<ion-button>Go to Page Three</ion-button>
</ion-nav-link>
</div>
</ion-content>
`;
}
}
class PageThree extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Page Three</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1>Page Three</h1>
</ion-content>
`;
}
}
customElements.define('page-one', PageOne);
customElements.define('page-two', PageTwo);
customElements.define('page-three', PageThree);
</script>

</body>

</html>
54 changes: 54 additions & 0 deletions static/usage/nav/nav-link/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import Playground from '@site/src/components/global/Playground';

import javascript from './javascript.md';

import angular_app_module_ts from './angular/app_module_ts.md';
import angular_app_component_html from './angular/app_component_html.md';
import angular_app_component_ts from './angular/app_component_ts.md';
import angular_page_one_component_ts from './angular/page_one_component_ts.md';
import angular_page_two_component_ts from './angular/page_two_component_ts.md';
import angular_page_three_component_ts from './angular/page_three_component_ts.md';

import react_main_tsx from './react/main_tsx.md';
import react_page_one_tsx from './react/page_one_tsx.md';
import react_page_two_tsx from './react/page_two_tsx.md';
import react_page_three_tsx from './react/page_three_tsx.md';

import vue_example from './vue/example_vue.md';
import vue_page_one from './vue/page_one_vue.md';
import vue_page_two from './vue/page_two_vue.md';
import vue_page_three from './vue/page_three_vue.md';

<Playground
code={{
javascript,
angular: {
files: {
'src/app/app.component.html': angular_app_component_html,
'src/app/app.component.ts': angular_app_component_ts,
'src/app/page-one.component.ts': angular_page_one_component_ts,
'src/app/page-two.component.ts': angular_page_two_component_ts,
'src/app/page-three.component.ts': angular_page_three_component_ts,
'src/app/app.module.ts': angular_app_module_ts,
},
},
react: {
files: {
'src/main.tsx': react_main_tsx,
'src/page-one.tsx': react_page_one_tsx,
'src/page-two.tsx': react_page_two_tsx,
'src/page-three.tsx': react_page_three_tsx,
},
},
vue: {
files: {
'src/components/Example.vue': vue_example,
'src/components/PageOne.vue': vue_page_one,
'src/components/PageTwo.vue': vue_page_two,
'src/components/PageThree.vue': vue_page_three,
},
},
}}
src="usage/nav/nav-link/demo.html"
devicePreview
/>
67 changes: 67 additions & 0 deletions static/usage/nav/nav-link/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
```html
<ion-app>
<ion-nav root="page-one"></ion-nav>
</ion-app>

<script>
class PageOne extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-header>
<ion-toolbar>
<ion-title>Page One</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1>Page One</h1>
<ion-nav-link router-direction="forward" component="page-two">
<ion-button>Go to Page Two</ion-button>
</ion-nav-link>
</ion-content>
`;
}
}
class PageTwo extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Page Two</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1>Page Two</h1>
<div>
<ion-nav-link router-direction="forward" component="page-three">
<ion-button>Go to Page Three</ion-button>
</ion-nav-link>
</div>
</ion-content>
`;
}
}
class PageThree extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Page Three</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1>Page Three</h1>
</ion-content>
`;
}
}
customElements.define('page-one', PageOne);
customElements.define('page-two', PageTwo);
customElements.define('page-three', PageThree);
</script>
```
11 changes: 11 additions & 0 deletions static/usage/nav/nav-link/react/main_tsx.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
```tsx
import React from 'react';
import { IonNav } from '@ionic/react';

import PageOne from './page-one';

function Example() {
return <IonNav root={() => <PageOne />}></IonNav>;
}
export default Example;
```
26 changes: 26 additions & 0 deletions static/usage/nav/nav-link/react/page_one_tsx.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
```tsx
import React from 'react';
import { IonButton, IonHeader, IonContent, IonNavLink, IonToolbar, IonTitle } from '@ionic/react';

import PageTwo from './page-two';

function PageOne() {
return (
<>
<IonHeader>
<IonToolbar>
<IonTitle>Page One</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent class="ion-padding">
<h1>Page One</h1>
<IonNavLink routerDirection="forward" component={() => <PageTwo />}>
<IonButton>Go to Page Two</IonButton>
</IonNavLink>
</IonContent>
</>
);
}

export default PageOne;
```
Loading