Skip to content

Commit 1d63cef

Browse files
thetaPCthetaPC
committed
docs(tabs): add playground for basic usage
1 parent 28c5a02 commit 1d63cef

File tree

12 files changed

+586
-85
lines changed

12 files changed

+586
-85
lines changed

‎docs/api/tabs.md‎

Lines changed: 6 additions & 4 deletions
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‎

Lines changed: 10 additions & 0 deletions
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‎

Lines changed: 71 additions & 0 deletions
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‎

Lines changed: 22 additions & 0 deletions
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‎

Lines changed: 94 additions & 0 deletions
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‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
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+
/>

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

Lines changed: 82 additions & 0 deletions
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+
```

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
```ts
2+
import { defineCustomElements } from '@ionic/core/loader';
3+
4+
import { addIcons } from 'ionicons';
5+
import { library, playCircle, radio, search } from 'ionicons/icons';
6+
7+
/* Core CSS required for Ionic components to work properly */
8+
import '@ionic/core/css/core.css';
9+
10+
/* Basic CSS for apps built with Ionic */
11+
import '@ionic/core/css/normalize.css';
12+
import '@ionic/core/css/structure.css';
13+
import '@ionic/core/css/typography.css';
14+
15+
/* Optional CSS utils that can be commented out */
16+
import '@ionic/core/css/padding.css';
17+
import '@ionic/core/css/float-elements.css';
18+
import '@ionic/core/css/text-alignment.css';
19+
import '@ionic/core/css/text-transformation.css';
20+
import '@ionic/core/css/flex-utils.css';
21+
import '@ionic/core/css/display.css';
22+
23+
/**
24+
* Ionic Dark Palette
25+
* -----------------------------------------------------
26+
* For more information, please see:
27+
* https://ionicframework.com/docs/theming/dark-mode
28+
*/
29+
30+
// import '@ionic/core/css/palettes/dark.always.css';
31+
// import '@ionic/core/css/palettes/dark.class.css';
32+
import '@ionic/core/css/palettes/dark.system.css';
33+
34+
/* Theme variables */
35+
import './theme/variables.css';
36+
37+
/**
38+
* On Ionicons 7.2+ these icons
39+
* get mapped to a kebab-case key.
40+
* Alternatively, developers can do:
41+
* addIcons({ 'library': library, 'play-circle': playCircle, 'radio': radio, 'search': search });
42+
*/
43+
addIcons({ library, playCircle, radio, search });
44+
45+
defineCustomElements();
46+
```

0 commit comments

Comments
 (0)