Skip to content

Commit eec07f2

Browse files
liamdebeasiliamdebeasi
authored
docs(router): add playground (ionic-team#2749)
1 parent b67bb5e commit eec07f2

8 files changed

Lines changed: 258 additions & 2 deletions

File tree

‎docs/api/router.md‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
3232
The router is a component for handling routing inside vanilla and Stencil JavaScript projects.
3333

3434
:::note
35-
Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](router-outlet.md) and the Angular router.
35+
Note: This component should only be used with vanilla and Stencil JavaScript projects. See the routing guides for [Angular](../angular/navigation), [React](../react/navigation), and [Vue](../vue/navigation) for framework-specific routing solutions.
3636
:::
3737

3838

@@ -45,6 +45,12 @@ That means the `ion-router` never touches the DOM, it does NOT show the componen
4545

4646
In order to configure this relationship between components (to load/select) and URLs, `ion-router` uses a declarative syntax using JSX/HTML to define a tree of routes.
4747

48+
## Basic Usage
49+
50+
import BasicExample from '@site/static/usage/v7/router/basic/index.md';
51+
52+
<BasicExample />
53+
4854
## Interfaces
4955

5056
### RouterEventDetail

‎static/usage/v6/router/basic/demo.html‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Router</title>
8+
<link rel="stylesheet" href="../../../common.css" />
9+
<script src="../../../common.js"></script>
10+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
11+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
12+
13+
</head>
14+
15+
<body>
16+
<ion-app>
17+
<ion-router>
18+
<ion-route url="/" component="page-one"></ion-route>
19+
<ion-route url="/page-two" component="page-two"></ion-route>
20+
</ion-router>
21+
22+
<ion-router-outlet></ion-router-outlet>
23+
24+
<script>
25+
class PageOne extends HTMLElement {
26+
connectedCallback() {
27+
this.innerHTML = `
28+
<ion-header>
29+
<ion-toolbar>
30+
<ion-title>Page One</ion-title>
31+
</ion-toolbar>
32+
</ion-header>
33+
<ion-content class="ion-padding">
34+
This is the content for page 1.
35+
<ion-router-link href="#/page-two">
36+
<ion-button>Go to Page 2</ion-button>
37+
</ion-router-link>
38+
</ion-content>`;
39+
}
40+
}
41+
42+
class PageTwo extends HTMLElement {
43+
connectedCallback() {
44+
this.innerHTML = `
45+
<ion-header>
46+
<ion-toolbar>
47+
<ion-buttons slot="start">
48+
<ion-back-button default-href="/"></ion-back-button>
49+
</ion-buttons>
50+
<ion-title>Page Two</ion-title>
51+
</ion-toolbar>
52+
</ion-header>
53+
<ion-content class="ion-padding">
54+
This is the content for page 2.
55+
</ion-content>`;
56+
}
57+
}
58+
59+
customElements.define('page-one', PageOne);
60+
customElements.define('page-two', PageTwo);
61+
</script>
62+
</ion-app>
63+
</body>
64+
65+
</html>

‎static/usage/v6/router/basic/index.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
5+
<Playground
6+
code={{ javascript }}
7+
src="usage/v6/router/basic/demo.html"
8+
devicePreview={true}
9+
includeIonContent={false}
10+
/>

‎static/usage/v6/router/basic/javascript.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
```html
2+
<ion-router>
3+
<ion-route url="/" component="page-one"></ion-route>
4+
<ion-route url="/page-two" component="page-two"></ion-route>
5+
</ion-router>
6+
7+
<ion-router-outlet></ion-router-outlet>
8+
9+
<script>
10+
class PageOne extends HTMLElement {
11+
connectedCallback() {
12+
this.innerHTML = `
13+
<ion-header>
14+
<ion-toolbar>
15+
<ion-title>Page One</ion-title>
16+
</ion-toolbar>
17+
</ion-header>
18+
<ion-content class="ion-padding">
19+
This is the content for page 1.
20+
<ion-router-link href="#/page-two">
21+
<ion-button>Go to Page 2</ion-button>
22+
</ion-router-link>
23+
</ion-content>`;
24+
}
25+
}
26+
27+
class PageTwo extends HTMLElement {
28+
connectedCallback() {
29+
this.innerHTML = `
30+
<ion-header>
31+
<ion-toolbar>
32+
<ion-buttons slot="start">
33+
<ion-back-button default-href="/"></ion-back-button>
34+
</ion-buttons>
35+
<ion-title>Page Two</ion-title>
36+
</ion-toolbar>
37+
</ion-header>
38+
<ion-content class="ion-padding">
39+
This is the content for page 2.
40+
</ion-content>`;
41+
}
42+
}
43+
44+
customElements.define('page-one', PageOne);
45+
customElements.define('page-two', PageTwo);
46+
</script>
47+
```

‎static/usage/v7/router/basic/demo.html‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Router</title>
8+
<link rel="stylesheet" href="../../../common.css" />
9+
<script src="../../../common.js"></script>
10+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
11+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
12+
13+
</head>
14+
15+
<body>
16+
<ion-app>
17+
<ion-router>
18+
<ion-route url="/" component="page-one"></ion-route>
19+
<ion-route url="/page-two" component="page-two"></ion-route>
20+
</ion-router>
21+
22+
<ion-router-outlet></ion-router-outlet>
23+
24+
<script>
25+
class PageOne extends HTMLElement {
26+
connectedCallback() {
27+
this.innerHTML = `
28+
<ion-header>
29+
<ion-toolbar>
30+
<ion-title>Page One</ion-title>
31+
</ion-toolbar>
32+
</ion-header>
33+
<ion-content class="ion-padding">
34+
This is the content for page 1.
35+
<ion-router-link href="#/page-two">
36+
<ion-button>Go to Page 2</ion-button>
37+
</ion-router-link>
38+
</ion-content>`;
39+
}
40+
}
41+
42+
class PageTwo extends HTMLElement {
43+
connectedCallback() {
44+
this.innerHTML = `
45+
<ion-header>
46+
<ion-toolbar>
47+
<ion-buttons slot="start">
48+
<ion-back-button default-href="/"></ion-back-button>
49+
</ion-buttons>
50+
<ion-title>Page Two</ion-title>
51+
</ion-toolbar>
52+
</ion-header>
53+
<ion-content class="ion-padding">
54+
This is the content for page 2.
55+
</ion-content>`;
56+
}
57+
}
58+
59+
customElements.define('page-one', PageOne);
60+
customElements.define('page-two', PageTwo);
61+
</script>
62+
</ion-app>
63+
</body>
64+
65+
</html>

‎static/usage/v7/router/basic/index.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
5+
<Playground
6+
code={{ javascript }}
7+
src="usage/v7/router/basic/demo.html"
8+
devicePreview={true}
9+
includeIonContent={false}
10+
/>

‎static/usage/v7/router/basic/javascript.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
```html
2+
<ion-router>
3+
<ion-route url="/" component="page-one"></ion-route>
4+
<ion-route url="/page-two" component="page-two"></ion-route>
5+
</ion-router>
6+
7+
<ion-router-outlet></ion-router-outlet>
8+
9+
<script>
10+
class PageOne extends HTMLElement {
11+
connectedCallback() {
12+
this.innerHTML = `
13+
<ion-header>
14+
<ion-toolbar>
15+
<ion-title>Page One</ion-title>
16+
</ion-toolbar>
17+
</ion-header>
18+
<ion-content class="ion-padding">
19+
This is the content for page 1.
20+
<ion-router-link href="#/page-two">
21+
<ion-button>Go to Page 2</ion-button>
22+
</ion-router-link>
23+
</ion-content>`;
24+
}
25+
}
26+
27+
class PageTwo extends HTMLElement {
28+
connectedCallback() {
29+
this.innerHTML = `
30+
<ion-header>
31+
<ion-toolbar>
32+
<ion-buttons slot="start">
33+
<ion-back-button default-href="/"></ion-back-button>
34+
</ion-buttons>
35+
<ion-title>Page Two</ion-title>
36+
</ion-toolbar>
37+
</ion-header>
38+
<ion-content class="ion-padding">
39+
This is the content for page 2.
40+
</ion-content>`;
41+
}
42+
}
43+
44+
customElements.define('page-one', PageOne);
45+
customElements.define('page-two', PageTwo);
46+
</script>
47+
```

‎versioned_docs/version-v6/api/router.md‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
3232
The router is a component for handling routing inside vanilla and Stencil JavaScript projects.
3333

3434
:::note
35-
Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](router-outlet.md) and the Angular router.
35+
Note: This component should only be used with vanilla and Stencil JavaScript projects. See the routing guides for [Angular](../angular/navigation), [React](../react/navigation), and [Vue](../vue/navigation) for framework-specific routing solutions.
3636
:::
3737

3838

@@ -45,6 +45,12 @@ That means the `ion-router` never touches the DOM, it does NOT show the componen
4545

4646
In order to configure this relationship between components (to load/select) and URLs, `ion-router` uses a declarative syntax using JSX/HTML to define a tree of routes.
4747

48+
## Basic Usage
49+
50+
import BasicExample from '@site/static/usage/v6/router/basic/index.md';
51+
52+
<BasicExample />
53+
4854
## Interfaces
4955

5056
### RouterEventDetail

0 commit comments

Comments
 (0)