Skip to content

Commit 17bba9e

Browse files
brandyscarneybrandyscarney
committed
docs(tabs): add playground for programmatically selecting tabs
1 parent 8c9a292 commit 17bba9e

File tree

11 files changed

+650
-0
lines changed

11 files changed

+650
-0
lines changed

‎docs/api/tabs.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,13 @@ Ionic has guides on best practices for routing patterns with tabs. Check out the
4848

4949
:::
5050

51+
## Programmatically Selecting Tabs
52+
53+
Tabs can be selected programmatically using the `select` method. This is useful when tab changes need to be triggered from application logic, such as in response to a button click or after completing a form. The following example demonstrates using a button to call the `select` method to navigate to a different tab.
54+
55+
import SelectMethod from '@site/static/usage/v8/tabs/select-method/index.md';
56+
57+
<SelectMethod />
5158

5259
## Interfaces
5360

‎static/usage/v8/tabs/select-method/angular/example_component_css.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
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+
flex-direction: column;
7+
align-items: center;
8+
justify-content: center;
9+
height: 100%;
10+
gap: 10px;
11+
}
12+
```

‎static/usage/v8/tabs/select-method/angular/example_component_html.md‎

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

‎static/usage/v8/tabs/select-method/angular/example_component_ts.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
```ts
2+
import { Component, ViewChild } from '@angular/core';
3+
import {
4+
IonButton,
5+
IonContent,
6+
IonHeader,
7+
IonIcon,
8+
IonTab,
9+
IonTabBar,
10+
IonTabButton,
11+
IonTabs,
12+
IonTitle,
13+
IonToolbar,
14+
} from '@ionic/angular/standalone';
15+
16+
import { addIcons } from 'ionicons';
17+
import { library, playCircle, radio, search } from 'ionicons/icons';
18+
19+
@Component({
20+
selector: 'app-example',
21+
templateUrl: 'example.component.html',
22+
styleUrls: ['example.component.css'],
23+
imports: [IonButton, IonContent, IonHeader, IonIcon, IonTab, IonTabBar, IonTabButton, IonTabs, IonTitle, IonToolbar],
24+
})
25+
export class ExampleComponent {
26+
@ViewChild('tabs') tabs!: IonTabs;
27+
28+
constructor() {
29+
/**
30+
* Any icons you want to use in your application
31+
* can be registered in app.component.ts and then
32+
* referenced by name anywhere in your application.
33+
*/
34+
addIcons({ library, playCircle, radio, search });
35+
}
36+
37+
selectRadio() {
38+
this.tabs.select('radio');
39+
}
40+
}
41+
```

‎static/usage/v8/tabs/select-method/demo.html‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
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+
flex-direction: column;
15+
align-items: center;
16+
justify-content: center;
17+
height: 100%;
18+
gap: 10px;
19+
}
20+
</style>
21+
</head>
22+
23+
<body>
24+
<ion-app>
25+
<ion-tabs>
26+
<ion-tab tab="home">
27+
<div id="home-page" class="ion-page">
28+
<ion-header>
29+
<ion-toolbar>
30+
<ion-title>Listen now</ion-title>
31+
</ion-toolbar>
32+
</ion-header>
33+
<ion-content class="ion-padding">
34+
<div class="example-content">
35+
Listen now content
36+
<ion-button onClick="selectRadio()">Go to Radio</ion-button>
37+
</div>
38+
</ion-content>
39+
</div>
40+
</ion-tab>
41+
<ion-tab tab="radio">
42+
<div id="radio-page" class="ion-page">
43+
<ion-header>
44+
<ion-toolbar>
45+
<ion-title>Radio</ion-title>
46+
</ion-toolbar>
47+
</ion-header>
48+
<ion-content>
49+
<div class="example-content">Radio content</div>
50+
</ion-content>
51+
</div>
52+
</ion-tab>
53+
<ion-tab tab="library">
54+
<div id="library-page" class="ion-page">
55+
<ion-header>
56+
<ion-toolbar>
57+
<ion-title>Library</ion-title>
58+
</ion-toolbar>
59+
</ion-header>
60+
<ion-content>
61+
<div class="example-content">Library content</div>
62+
</ion-content>
63+
</div>
64+
</ion-tab>
65+
<ion-tab tab="search">
66+
<div id="search-page" class="ion-page">
67+
<ion-header>
68+
<ion-toolbar>
69+
<ion-title>Search</ion-title>
70+
</ion-toolbar>
71+
</ion-header>
72+
<ion-content>
73+
<div class="example-content">Search content</div>
74+
</ion-content>
75+
</div>
76+
</ion-tab>
77+
78+
<ion-tab-bar slot="bottom">
79+
<ion-tab-button tab="home">
80+
<ion-icon name="play-circle"></ion-icon>
81+
Listen Now
82+
</ion-tab-button>
83+
<ion-tab-button tab="radio">
84+
<ion-icon name="radio"></ion-icon>
85+
Radio
86+
</ion-tab-button>
87+
<ion-tab-button tab="library">
88+
<ion-icon name="library"></ion-icon>
89+
Library
90+
</ion-tab-button>
91+
<ion-tab-button tab="search">
92+
<ion-icon name="search"></ion-icon>
93+
Search
94+
</ion-tab-button>
95+
</ion-tab-bar>
96+
</ion-tabs>
97+
</ion-app>
98+
99+
<script>
100+
function selectRadio() {
101+
const tabs = document.querySelector('ion-tabs');
102+
tabs.select('radio');
103+
}
104+
</script>
105+
</body>
106+
</html>

‎static/usage/v8/tabs/select-method/index.md‎

Lines changed: 42 additions & 0 deletions
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/select-method/demo.html"
40+
devicePreview
41+
includeIonContent={false}
42+
/>

‎static/usage/v8/tabs/select-method/javascript/index_html.md‎

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

0 commit comments

Comments
 (0)