Skip to content

Commit 54b8a9a

Browse files
brandyscarneybrandyscarney
authored
docs(tabs): add playground for programmatically selecting tabs (#4281)
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
1 parent 9673530 commit 54b8a9a

File tree

16 files changed

+701
-48
lines changed

16 files changed

+701
-48
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/basic/angular/example_component_html.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
```html
22
<ion-tabs>
33
<ion-tab tab="home">
4-
<div id="home-page">
4+
<div id="home-page" class="ion-page">
55
<ion-header>
66
<ion-toolbar>
77
<ion-title>Listen now</ion-title>
@@ -13,7 +13,7 @@
1313
</div>
1414
</ion-tab>
1515
<ion-tab tab="radio">
16-
<div id="radio-page">
16+
<div id="radio-page" class="ion-page">
1717
<ion-header>
1818
<ion-toolbar>
1919
<ion-title>Radio</ion-title>
@@ -25,7 +25,7 @@
2525
</div>
2626
</ion-tab>
2727
<ion-tab tab="library">
28-
<div id="library-page">
28+
<div id="library-page" class="ion-page">
2929
<ion-header>
3030
<ion-toolbar>
3131
<ion-title>Library</ion-title>
@@ -37,7 +37,7 @@
3737
</div>
3838
</ion-tab>
3939
<ion-tab tab="search">
40-
<div id="search-page">
40+
<div id="search-page" class="ion-page">
4141
<ion-header>
4242
<ion-toolbar>
4343
<ion-title>Search</ion-title>

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
<ion-app>
2323
<ion-tabs>
2424
<ion-tab tab="home">
25-
<div id="home-page">
25+
<div id="home-page" class="ion-page">
2626
<ion-header>
2727
<ion-toolbar>
2828
<ion-title>Listen now</ion-title>
@@ -34,7 +34,7 @@
3434
</div>
3535
</ion-tab>
3636
<ion-tab tab="radio">
37-
<div id="radio-page">
37+
<div id="radio-page" class="ion-page">
3838
<ion-header>
3939
<ion-toolbar>
4040
<ion-title>Radio</ion-title>
@@ -46,7 +46,7 @@
4646
</div>
4747
</ion-tab>
4848
<ion-tab tab="library">
49-
<div id="library-page">
49+
<div id="library-page" class="ion-page">
5050
<ion-header>
5151
<ion-toolbar>
5252
<ion-title>Library</ion-title>
@@ -58,7 +58,7 @@
5858
</div>
5959
</ion-tab>
6060
<ion-tab tab="search">
61-
<div id="search-page">
61+
<div id="search-page" class="ion-page">
6262
<ion-header>
6363
<ion-toolbar>
6464
<ion-title>Search</ion-title>

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
```html
22
<ion-tabs>
33
<ion-tab tab="home">
4-
<div id="home-page">
4+
<div id="home-page" class="ion-page">
55
<ion-header>
66
<ion-toolbar>
77
<ion-title>Listen now</ion-title>
@@ -13,7 +13,7 @@
1313
</div>
1414
</ion-tab>
1515
<ion-tab tab="radio">
16-
<div id="radio-page">
16+
<div id="radio-page" class="ion-page">
1717
<ion-header>
1818
<ion-toolbar>
1919
<ion-title>Radio</ion-title>
@@ -25,7 +25,7 @@
2525
</div>
2626
</ion-tab>
2727
<ion-tab tab="library">
28-
<div id="library-page">
28+
<div id="library-page" class="ion-page">
2929
<ion-header>
3030
<ion-toolbar>
3131
<ion-title>Library</ion-title>
@@ -37,7 +37,7 @@
3737
</div>
3838
</ion-tab>
3939
<ion-tab tab="search">
40-
<div id="search-page">
40+
<div id="search-page" class="ion-page">
4141
<ion-header>
4242
<ion-toolbar>
4343
<ion-title>Search</ion-title>

‎static/usage/v8/tabs/basic/react/main_tsx.md‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
```tsx
22
import React from 'react';
33
import {
4-
IonTabs,
4+
IonContent,
5+
IonIcon,
6+
IonHeader,
57
IonTab,
6-
IonToolbar,
8+
IonTabs,
79
IonTabBar,
810
IonTabButton,
9-
IonHeader,
1011
IonTitle,
11-
IonContent,
12-
IonIcon,
12+
IonToolbar,
13+
IonPage,
1314
} from '@ionic/react';
1415

1516
import { playCircle, radio, library, search } from 'ionicons/icons';
@@ -20,7 +21,7 @@ function Example() {
2021
return (
2122
<IonTabs>
2223
<IonTab tab="home">
23-
<div id="home-page">
24+
<IonPage id="home-page">
2425
<IonHeader>
2526
<IonToolbar>
2627
<IonTitle>Listen now</IonTitle>
@@ -29,10 +30,10 @@ function Example() {
2930
<IonContent>
3031
<div className="example-content">Listen now content</div>
3132
</IonContent>
32-
</div>
33+
</IonPage>
3334
</IonTab>
3435
<IonTab tab="radio">
35-
<div id="radio-page">
36+
<IonPage id="radio-page">
3637
<IonHeader>
3738
<IonToolbar>
3839
<IonTitle>Radio</IonTitle>
@@ -41,10 +42,10 @@ function Example() {
4142
<IonContent>
4243
<div className="example-content">Radio content</div>
4344
</IonContent>
44-
</div>
45+
</IonPage>
4546
</IonTab>
4647
<IonTab tab="library">
47-
<div id="library-page">
48+
<IonPage id="library-page">
4849
<IonHeader>
4950
<IonToolbar>
5051
<IonTitle>Library</IonTitle>
@@ -53,10 +54,10 @@ function Example() {
5354
<IonContent>
5455
<div className="example-content">Library content</div>
5556
</IonContent>
56-
</div>
57+
</IonPage>
5758
</IonTab>
5859
<IonTab tab="search">
59-
<div id="search-page">
60+
<IonPage id="search-page">
6061
<IonHeader>
6162
<IonToolbar>
6263
<IonTitle>Search</IonTitle>
@@ -65,7 +66,7 @@ function Example() {
6566
<IonContent>
6667
<div className="example-content">Search content</div>
6768
</IonContent>
68-
</div>
69+
</IonPage>
6970
</IonTab>
7071

7172
<IonTabBar slot="bottom">

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

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,8 @@
11
```html
2-
<style scoped>
3-
/* This style is for demonstration purposes only. */
4-
/* It's not required for the tabs to function. */
5-
.example-content {
6-
display: flex;
7-
align-items: center;
8-
justify-content: center;
9-
height: 100%;
10-
}
11-
</style>
122
<template>
133
<ion-tabs>
144
<ion-tab tab="home">
15-
<div id="home-page">
5+
<ion-page id="home-page">
166
<ion-header>
177
<ion-toolbar>
188
<ion-title>Listen now</ion-title>
@@ -21,10 +11,10 @@
2111
<ion-content>
2212
<div class="example-content">Listen now content</div>
2313
</ion-content>
24-
</div>
14+
</ion-page>
2515
</ion-tab>
2616
<ion-tab tab="radio">
27-
<div id="radio-page">
17+
<ion-page id="radio-page">
2818
<ion-header>
2919
<ion-toolbar>
3020
<ion-title>Radio</ion-title>
@@ -33,10 +23,10 @@
3323
<ion-content>
3424
<div class="example-content">Radio content</div>
3525
</ion-content>
36-
</div>
26+
</ion-page>
3727
</ion-tab>
3828
<ion-tab tab="library">
39-
<div id="library-page">
29+
<ion-page id="library-page">
4030
<ion-header>
4131
<ion-toolbar>
4232
<ion-title>Library</ion-title>
@@ -45,10 +35,10 @@
4535
<ion-content>
4636
<div class="example-content">Library content</div>
4737
</ion-content>
48-
</div>
38+
</ion-page>
4939
</ion-tab>
5040
<ion-tab tab="search">
51-
<div id="search-page">
41+
<ion-page id="search-page">
5242
<ion-header>
5343
<ion-toolbar>
5444
<ion-title>Search</ion-title>
@@ -57,7 +47,7 @@
5747
<ion-content>
5848
<div class="example-content">Search content</div>
5949
</ion-content>
60-
</div>
50+
</ion-page>
6151
</ion-tab>
6252

6353
<ion-tab-bar slot="bottom">
@@ -83,16 +73,28 @@
8373

8474
<script setup lang="ts">
8575
import {
86-
IonTabs,
76+
IonContent,
77+
IonHeader,
78+
IonIcon,
79+
IonPage,
8780
IonTab,
88-
IonToolbar,
81+
IonTabs,
8982
IonTabBar,
9083
IonTabButton,
91-
IonContent,
92-
IonHeader,
9384
IonTitle,
94-
IonIcon,
85+
IonToolbar,
9586
} from '@ionic/vue';
9687
import { playCircle, radio, library, search } from 'ionicons/icons';
9788
</script>
89+
90+
<style scoped>
91+
/* This style is for demonstration purposes only. */
92+
/* It's not required for the tabs to function. */
93+
.example-content {
94+
display: flex;
95+
align-items: center;
96+
justify-content: center;
97+
height: 100%;
98+
}
99+
</style>
98100
```

‎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+
```

0 commit comments

Comments
 (0)