Skip to content

Commit 041e93d

Browse files
thetaPCbrandyscarney
thetaPC
and
brandyscarney
authored
docs(tabs): add playground for basic usage (#3824)
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
1 parent 28c5a02 commit 041e93d

File tree

16 files changed

+603
-87
lines changed

16 files changed

+603
-87
lines changed

‎docs/api/tab.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,9 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
2222
The tab component is a child component of [tabs](tabs.md). Each tab can contain a top level navigation stack for an app or a single view. An app can have many tabs, all with their own independent navigation.
2323

2424
:::note
25-
Note: This component should only be used with vanilla JavaScript projects. For Angular, React, and Vue apps you do not need to use `ion-tab` to declare your tab components.
25+
Angular, React, and Vue can only use this component when the `ion-tabs` component is configured for [basic usage](./tabs.md#basic-usage). When setting up tabs with routing, the `ion-tab` component cannot be used.
26+
27+
In JavaScript, this component can be used with the `ion-tabs` component configured for either [basic usage](./tabs.md#basic-usage) or [usage with router](./tabs.md#usage-with-router).
2628
:::
2729

2830

‎docs/api/tabs.md

+6-4
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,17 @@ Both `ion-tabs` and `ion-tab-bar` can be used as standalone elements. They don
2626

2727
The `ion-tab-bar` needs a slot defined in order to be projected to the right place in an `ion-tabs` component.
2828

29-
:::note Framework Support
29+
## Basic Usage
3030

31-
Using `ion-tabs` within Angular, React or Vue requires the use of the `ion-router-outlet` or `ion-nav` components.
31+
Tabs can be used to display different content without the need to change the URL. This is useful when the tabs are not used for navigation, but rather to display different content.
3232

33-
:::
33+
import Basic from '@site/static/usage/v8/tabs/basic/index.md';
34+
35+
<Basic />
3436

3537
## Usage with Router
3638

37-
Tabs can be used with the Ionic router to implement tab-based navigation. The tab bar and active tab will automatically resolve based on the url. This is the most common pattern for tabs navigation.
39+
Tabs can be used with the Ionic router to implement tab-based navigation. The tab bar and active tab will automatically resolve based on the URL. This is the most common pattern for tabs navigation.
3840

3941
import Router from '@site/static/usage/v8/tabs/router/index.md';
4042

‎static/usage/v8/tabs/basic/angular/example_component_css.md

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
```css
2+
/* This style is for demonstration purposes only. */
3+
/* It's not required for the tabs to function. */
4+
.example-content {
5+
display: flex;
6+
align-items: center;
7+
justify-content: center;
8+
height: 100%;
9+
}
10+
```

‎static/usage/v8/tabs/basic/angular/example_component_html.md

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
```html
2+
<ion-tabs>
3+
<ion-tab tab="home">
4+
<div id="home-page">
5+
<ion-header>
6+
<ion-toolbar>
7+
<ion-title>Listen now</ion-title>
8+
</ion-toolbar>
9+
</ion-header>
10+
<ion-content>
11+
<div class="example-content">Listen now content</div>
12+
</ion-content>
13+
</div>
14+
</ion-tab>
15+
<ion-tab tab="radio">
16+
<div id="radio-page">
17+
<ion-header>
18+
<ion-toolbar>
19+
<ion-title>Radio</ion-title>
20+
</ion-toolbar>
21+
</ion-header>
22+
<ion-content>
23+
<div class="example-content">Radio content</div>
24+
</ion-content>
25+
</div>
26+
</ion-tab>
27+
<ion-tab tab="library">
28+
<div id="library-page">
29+
<ion-header>
30+
<ion-toolbar>
31+
<ion-title>Library</ion-title>
32+
</ion-toolbar>
33+
</ion-header>
34+
<ion-content>
35+
<div class="example-content">Library content</div>
36+
</ion-content>
37+
</div>
38+
</ion-tab>
39+
<ion-tab tab="search">
40+
<div id="search-page">
41+
<ion-header>
42+
<ion-toolbar>
43+
<ion-title>Search</ion-title>
44+
</ion-toolbar>
45+
</ion-header>
46+
<ion-content>
47+
<div class="example-content">Search content</div>
48+
</ion-content>
49+
</div>
50+
</ion-tab>
51+
52+
<ion-tab-bar slot="bottom">
53+
<ion-tab-button tab="home">
54+
<ion-icon name="play-circle"></ion-icon>
55+
Listen Now
56+
</ion-tab-button>
57+
<ion-tab-button tab="radio">
58+
<ion-icon name="radio"></ion-icon>
59+
Radio
60+
</ion-tab-button>
61+
<ion-tab-button tab="library">
62+
<ion-icon name="library"></ion-icon>
63+
Library
64+
</ion-tab-button>
65+
<ion-tab-button tab="search">
66+
<ion-icon name="search"></ion-icon>
67+
Search
68+
</ion-tab-button>
69+
</ion-tab-bar>
70+
</ion-tabs>
71+
```

‎static/usage/v8/tabs/basic/angular/example_component_ts.md

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
4+
import { addIcons } from 'ionicons';
5+
import { library, playCircle, radio, search } from 'ionicons/icons';
6+
7+
@Component({
8+
selector: 'app-example',
9+
templateUrl: 'example.component.html',
10+
styleUrls: ['example.component.css'],
11+
})
12+
export class ExampleComponent {
13+
constructor() {
14+
/**
15+
* Any icons you want to use in your application
16+
* can be registered in app.component.ts and then
17+
* referenced by name anywhere in your application.
18+
*/
19+
addIcons({ library, playCircle, radio, search });
20+
}
21+
}
22+
```

‎static/usage/v8/tabs/basic/demo.html

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Tabs</title>
7+
<link rel="stylesheet" href="../../common.css" />
8+
<script src="../../common.js"></script>
9+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
11+
<style>
12+
.example-content {
13+
display: flex;
14+
align-items: center;
15+
justify-content: center;
16+
height: 100%;
17+
}
18+
</style>
19+
</head>
20+
21+
<body>
22+
<ion-app>
23+
<ion-tabs>
24+
<ion-tab tab="home">
25+
<div id="home-page">
26+
<ion-header>
27+
<ion-toolbar>
28+
<ion-title>Listen now</ion-title>
29+
</ion-toolbar>
30+
</ion-header>
31+
<ion-content>
32+
<div class="example-content">Listen now content</div>
33+
</ion-content>
34+
</div>
35+
</ion-tab>
36+
<ion-tab tab="radio">
37+
<div id="radio-page">
38+
<ion-header>
39+
<ion-toolbar>
40+
<ion-title>Radio</ion-title>
41+
</ion-toolbar>
42+
</ion-header>
43+
<ion-content>
44+
<div class="example-content">Radio content</div>
45+
</ion-content>
46+
</div>
47+
</ion-tab>
48+
<ion-tab tab="library">
49+
<div id="library-page">
50+
<ion-header>
51+
<ion-toolbar>
52+
<ion-title>Library</ion-title>
53+
</ion-toolbar>
54+
</ion-header>
55+
<ion-content>
56+
<div class="example-content">Library content</div>
57+
</ion-content>
58+
</div>
59+
</ion-tab>
60+
<ion-tab tab="search">
61+
<div id="search-page">
62+
<ion-header>
63+
<ion-toolbar>
64+
<ion-title>Search</ion-title>
65+
</ion-toolbar>
66+
</ion-header>
67+
<ion-content>
68+
<div class="example-content">Search content</div>
69+
</ion-content>
70+
</div>
71+
</ion-tab>
72+
73+
<ion-tab-bar slot="bottom">
74+
<ion-tab-button tab="home">
75+
<ion-icon name="play-circle"></ion-icon>
76+
Listen Now
77+
</ion-tab-button>
78+
<ion-tab-button tab="radio">
79+
<ion-icon name="radio"></ion-icon>
80+
Radio
81+
</ion-tab-button>
82+
<ion-tab-button tab="library">
83+
<ion-icon name="library"></ion-icon>
84+
Library
85+
</ion-tab-button>
86+
<ion-tab-button tab="search">
87+
<ion-icon name="search"></ion-icon>
88+
Search
89+
</ion-tab-button>
90+
</ion-tab-bar>
91+
</ion-tabs>
92+
</ion-app>
93+
</body>
94+
</html>

‎static/usage/v8/tabs/basic/index.md

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript_index_html from './javascript/index_html.md';
4+
import javascript_index_ts from './javascript/index_ts.md';
5+
6+
import react_main_tsx from './react/main_tsx.md';
7+
import react_main_css from './react/main_css.md';
8+
9+
import vue from './vue.md';
10+
11+
import angular_example_component_html from './angular/example_component_html.md';
12+
import angular_example_component_ts from './angular/example_component_ts.md';
13+
import angular_example_component_css from './angular/example_component_css.md';
14+
15+
<Playground
16+
version="8"
17+
code={{
18+
javascript: {
19+
files: {
20+
'index.html': javascript_index_html,
21+
'index.ts': javascript_index_ts,
22+
},
23+
},
24+
react: {
25+
files: {
26+
'src/main.tsx': react_main_tsx,
27+
'src/main.css': react_main_css,
28+
},
29+
},
30+
vue,
31+
angular: {
32+
files: {
33+
'src/app/example.component.html': angular_example_component_html,
34+
'src/app/example.component.ts': angular_example_component_ts,
35+
'src/app/example.component.css': angular_example_component_css,
36+
},
37+
},
38+
}}
39+
src="usage/v8/tabs/basic/demo.html"
40+
devicePreview
41+
includeIonContent={false}
42+
/>

‎static/usage/v8/tabs/basic/javascript/index_html.md

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
```html
2+
<ion-tabs>
3+
<ion-tab tab="home">
4+
<div id="home-page">
5+
<ion-header>
6+
<ion-toolbar>
7+
<ion-title>Listen now</ion-title>
8+
</ion-toolbar>
9+
</ion-header>
10+
<ion-content>
11+
<div class="example-content">Listen now content</div>
12+
</ion-content>
13+
</div>
14+
</ion-tab>
15+
<ion-tab tab="radio">
16+
<div id="radio-page">
17+
<ion-header>
18+
<ion-toolbar>
19+
<ion-title>Radio</ion-title>
20+
</ion-toolbar>
21+
</ion-header>
22+
<ion-content>
23+
<div class="example-content">Radio content</div>
24+
</ion-content>
25+
</div>
26+
</ion-tab>
27+
<ion-tab tab="library">
28+
<div id="library-page">
29+
<ion-header>
30+
<ion-toolbar>
31+
<ion-title>Library</ion-title>
32+
</ion-toolbar>
33+
</ion-header>
34+
<ion-content>
35+
<div class="example-content">Library content</div>
36+
</ion-content>
37+
</div>
38+
</ion-tab>
39+
<ion-tab tab="search">
40+
<div id="search-page">
41+
<ion-header>
42+
<ion-toolbar>
43+
<ion-title>Search</ion-title>
44+
</ion-toolbar>
45+
</ion-header>
46+
<ion-content>
47+
<div class="example-content">Search content</div>
48+
</ion-content>
49+
</div>
50+
</ion-tab>
51+
52+
<ion-tab-bar slot="bottom">
53+
<ion-tab-button tab="home">
54+
<ion-icon name="play-circle"></ion-icon>
55+
Listen Now
56+
</ion-tab-button>
57+
<ion-tab-button tab="radio">
58+
<ion-icon name="radio"></ion-icon>
59+
Radio
60+
</ion-tab-button>
61+
<ion-tab-button tab="library">
62+
<ion-icon name="library"></ion-icon>
63+
Library
64+
</ion-tab-button>
65+
<ion-tab-button tab="search">
66+
<ion-icon name="search"></ion-icon>
67+
Search
68+
</ion-tab-button>
69+
</ion-tab-bar>
70+
</ion-tabs>
71+
72+
<style>
73+
/* This style is for demonstration purposes only. */
74+
/* It's not required for the tabs to function. */
75+
.example-content {
76+
display: flex;
77+
align-items: center;
78+
justify-content: center;
79+
height: 100%;
80+
}
81+
</style>
82+
```

0 commit comments

Comments
 (0)