docs(tabs): add playground for programmatically selecting tabs

docs/api/tabs.md

@@ -48,6 +48,13 @@ Ionic has guides on best practices for routing patterns with tabs. Check out the
 
 :::
 
+## Programmatically Selecting Tabs
+
+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.
+
+import SelectMethod from '@site/static/usage/v8/tabs/select-method/index.md';
+
+<SelectMethod />
 
 ## Interfaces
 

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

@@ -1,7 +1,7 @@
 ```html
 <ion-tabs>
   <ion-tab tab="home">
-    <div id="home-page">
+    <div id="home-page" class="ion-page">
       <ion-header>
         <ion-toolbar>
           <ion-title>Listen now</ion-title>
@@ -13,7 +13,7 @@
     </div>
   </ion-tab>
   <ion-tab tab="radio">
-    <div id="radio-page">
+    <div id="radio-page" class="ion-page">
       <ion-header>
         <ion-toolbar>
           <ion-title>Radio</ion-title>
@@ -25,7 +25,7 @@
     </div>
   </ion-tab>
   <ion-tab tab="library">
-    <div id="library-page">
+    <div id="library-page" class="ion-page">
       <ion-header>
         <ion-toolbar>
           <ion-title>Library</ion-title>
@@ -37,7 +37,7 @@
     </div>
   </ion-tab>
   <ion-tab tab="search">
-    <div id="search-page">
+    <div id="search-page" class="ion-page">
       <ion-header>
         <ion-toolbar>
           <ion-title>Search</ion-title>

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

@@ -22,7 +22,7 @@
     <ion-app>
       <ion-tabs>
         <ion-tab tab="home">
-          <div id="home-page">
+          <div id="home-page" class="ion-page">
             <ion-header>
               <ion-toolbar>
                 <ion-title>Listen now</ion-title>
@@ -34,7 +34,7 @@
           </div>
         </ion-tab>
         <ion-tab tab="radio">
-          <div id="radio-page">
+          <div id="radio-page" class="ion-page">
             <ion-header>
               <ion-toolbar>
                 <ion-title>Radio</ion-title>
@@ -46,7 +46,7 @@
           </div>
         </ion-tab>
         <ion-tab tab="library">
-          <div id="library-page">
+          <div id="library-page" class="ion-page">
             <ion-header>
               <ion-toolbar>
                 <ion-title>Library</ion-title>
@@ -58,7 +58,7 @@
           </div>
         </ion-tab>
         <ion-tab tab="search">
-          <div id="search-page">
+          <div id="search-page" class="ion-page">
             <ion-header>
               <ion-toolbar>
                 <ion-title>Search</ion-title>

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

@@ -1,7 +1,7 @@
 ```html
 <ion-tabs>
   <ion-tab tab="home">
-    <div id="home-page">
+    <div id="home-page" class="ion-page">
       <ion-header>
         <ion-toolbar>
           <ion-title>Listen now</ion-title>
@@ -13,7 +13,7 @@
     </div>
   </ion-tab>
   <ion-tab tab="radio">
-    <div id="radio-page">
+    <div id="radio-page" class="ion-page">
       <ion-header>
         <ion-toolbar>
           <ion-title>Radio</ion-title>
@@ -25,7 +25,7 @@
     </div>
   </ion-tab>
   <ion-tab tab="library">
-    <div id="library-page">
+    <div id="library-page" class="ion-page">
       <ion-header>
         <ion-toolbar>
           <ion-title>Library</ion-title>
@@ -37,7 +37,7 @@
     </div>
   </ion-tab>
   <ion-tab tab="search">
-    <div id="search-page">
+    <div id="search-page" class="ion-page">
       <ion-header>
         <ion-toolbar>
           <ion-title>Search</ion-title>

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

@@ -1,15 +1,16 @@
 ```tsx
 import React from 'react';
 import {
-  IonTabs,
+  IonContent,
+  IonIcon,
+  IonHeader,
   IonTab,
-  IonToolbar,
+  IonTabs,
   IonTabBar,
   IonTabButton,
-  IonHeader,
   IonTitle,
-  IonContent,
-  IonIcon,
+  IonToolbar,
+  IonPage,
 } from '@ionic/react';
 
 import { playCircle, radio, library, search } from 'ionicons/icons';
@@ -20,7 +21,7 @@ function Example() {
   return (
     <IonTabs>
       <IonTab tab="home">
-        <div id="home-page">
+        <IonPage id="home-page">
           <IonHeader>
             <IonToolbar>
               <IonTitle>Listen now</IonTitle>
@@ -29,10 +30,10 @@ function Example() {
           <IonContent>
             <div className="example-content">Listen now content</div>
           </IonContent>
-        </div>
+        </IonPage>
       </IonTab>
       <IonTab tab="radio">
-        <div id="radio-page">
+        <IonPage id="radio-page">
           <IonHeader>
             <IonToolbar>
               <IonTitle>Radio</IonTitle>
@@ -41,10 +42,10 @@ function Example() {
           <IonContent>
             <div className="example-content">Radio content</div>
           </IonContent>
-        </div>
+        </IonPage>
       </IonTab>
       <IonTab tab="library">
-        <div id="library-page">
+        <IonPage id="library-page">
           <IonHeader>
             <IonToolbar>
               <IonTitle>Library</IonTitle>
@@ -53,10 +54,10 @@ function Example() {
           <IonContent>
             <div className="example-content">Library content</div>
           </IonContent>
-        </div>
+        </IonPage>
       </IonTab>
       <IonTab tab="search">
-        <div id="search-page">
+        <IonPage id="search-page">
           <IonHeader>
             <IonToolbar>
               <IonTitle>Search</IonTitle>
@@ -65,7 +66,7 @@ function Example() {
           <IonContent>
             <div className="example-content">Search content</div>
           </IonContent>
-        </div>
+        </IonPage>
       </IonTab>
 
       <IonTabBar slot="bottom">

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

@@ -1,18 +1,8 @@
 ```html
-<style scoped>
-  /* This style is for demonstration purposes only. */
-  /* It's not required for the tabs to function. */
-  .example-content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-  }
-</style>
 <template>
   <ion-tabs>
     <ion-tab tab="home">
-      <div id="home-page">
+      <ion-page id="home-page">
         <ion-header>
           <ion-toolbar>
             <ion-title>Listen now</ion-title>
@@ -21,10 +11,10 @@
         <ion-content>
           <div class="example-content">Listen now content</div>
         </ion-content>
-      </div>
+      </ion-page>
     </ion-tab>
     <ion-tab tab="radio">
-      <div id="radio-page">
+      <ion-page id="radio-page">
         <ion-header>
           <ion-toolbar>
             <ion-title>Radio</ion-title>
@@ -33,10 +23,11 @@
         <ion-content>
           <div class="example-content">Radio content</div>
         </ion-content>
-      </div>
+      </ion-page>
     </ion-tab>
     <ion-tab tab="library">
-      <div id="library-page">
+      <ion-page id="library-page"
+        >>
         <ion-header>
           <ion-toolbar>
             <ion-title>Library</ion-title>
@@ -45,10 +36,11 @@
         <ion-content>
           <div class="example-content">Library content</div>
         </ion-content>
-      </div>
+      </ion-page>
     </ion-tab>
     <ion-tab tab="search">
-      <div id="search-page">
+      <ion-page id="search-page"
+        >>
         <ion-header>
           <ion-toolbar>
             <ion-title>Search</ion-title>
@@ -57,7 +49,7 @@
         <ion-content>
           <div class="example-content">Search content</div>
         </ion-content>
-      </div>
+      </ion-page>
     </ion-tab>
 
     <ion-tab-bar slot="bottom">
@@ -83,16 +75,28 @@
 
 <script setup lang="ts">
   import {
-    IonTabs,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonPage,
     IonTab,
-    IonToolbar,
+    IonTabs,
     IonTabBar,
     IonTabButton,
-    IonContent,
-    IonHeader,
     IonTitle,
-    IonIcon,
+    IonToolbar,
   } from '@ionic/vue';
   import { playCircle, radio, library, search } from 'ionicons/icons';
 </script>
+
+<style scoped>
+  /* This style is for demonstration purposes only. */
+  /* It's not required for the tabs to function. */
+  .example-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+</style>
 ```

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

@@ -0,0 +1,12 @@
+```css
+/* This style is for demonstration purposes only. */
+/* It's not required for the tabs to function. */
+.example-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  gap: 10px;
+}
+```

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

@@ -0,0 +1,74 @@
+```html
+<ion-tabs #tabs>
+  <ion-tab tab="home">
+    <div id="home-page" class="ion-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Listen now</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <div class="example-content">
+          Listen now content
+          <ion-button (click)="selectRadio()">Go to Radio</ion-button>
+        </div>
+      </ion-content>
+    </div>
+  </ion-tab>
+  <ion-tab tab="radio">
+    <div id="radio-page" class="ion-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Radio</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <div class="example-content">Radio content</div>
+      </ion-content>
+    </div>
+  </ion-tab>
+  <ion-tab tab="library">
+    <div id="library-page" class="ion-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Library</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <div class="example-content">Library content</div>
+      </ion-content>
+    </div>
+  </ion-tab>
+  <ion-tab tab="search">
+    <div id="search-page" class="ion-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Search</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <div class="example-content">Search content</div>
+      </ion-content>
+    </div>
+  </ion-tab>
+
+  <ion-tab-bar slot="bottom">
+    <ion-tab-button tab="home">
+      <ion-icon name="play-circle"></ion-icon>
+      Listen Now
+    </ion-tab-button>
+    <ion-tab-button tab="radio">
+      <ion-icon name="radio"></ion-icon>
+      Radio
+    </ion-tab-button>
+    <ion-tab-button tab="library">
+      <ion-icon name="library"></ion-icon>
+      Library
+    </ion-tab-button>
+    <ion-tab-button tab="search">
+      <ion-icon name="search"></ion-icon>
+      Search
+    </ion-tab-button>
+  </ion-tab-bar>
+</ion-tabs>
+```