docs(tabs): add playground for basic usage

docs/api/tab.md

@@ -22,7 +22,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 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.
 
 :::note
- 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.
+This component can only be used when the `ion-tabs` component is set for [basic usage](./tabs.md#basic-usage). When setting up tabs with routing, the `ion-tab` component cannot be used.
 :::
 
 

docs/api/tabs.md

@@ -24,17 +24,23 @@ The `ion-tabs` component does not have any styling and works as a router outlet
 
 Both `ion-tabs` and `ion-tab-bar` can be used as standalone elements. They don’t depend on each other to work, but they are usually used together in order to implement a tab-based navigation that behaves like a native app.
 
+:::warning
+Using `IonTabs` within React requires the `IonTabBar` component as a direct child of `IonTabs`.
+:::
+
 The `ion-tab-bar` needs a slot defined in order to be projected to the right place in an `ion-tabs` component.
 
-:::note Framework Support
+## Basic Usage
 
-Using `ion-tabs` within Angular, React or Vue requires the use of the `ion-router-outlet` or `ion-nav` components.
+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.
 
-:::
+import Basic from '@site/static/usage/v8/tabs/basic/index.md';
+
+<Basic />
 
 ## Usage with Router
 
-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.
+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.
 
 import Router from '@site/static/usage/v8/tabs/router/index.md';
 

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

@@ -0,0 +1,10 @@
+```css
+/* 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%;
+}
+```

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

@@ -0,0 +1,71 @@
+```html
+<ion-tabs>
+  <ion-tab tab="home">
+    <div id="home-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Listen now</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <div class="example-content">Listen now content</div>
+      </ion-content>
+    </div>
+  </ion-tab>
+  <ion-tab tab="radio">
+    <div id="radio-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">
+      <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">
+      <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>
+```

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

@@ -0,0 +1,22 @@
+```ts
+import { Component } from '@angular/core';
+
+import { addIcons } from 'ionicons';
+import { library, playCircle, radio, search } from 'ionicons/icons';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+  styleUrls: ['example.component.css'],
+})
+export class ExampleComponent {
+  constructor() {
+    /**
+     * Any icons you want to use in your application
+     * can be registered in app.component.ts and then
+     * referenced by name anywhere in your application.
+     */
+    addIcons({ library, playCircle, radio, search });
+  }
+}
+```

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

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tabs</title>
+    <link rel="stylesheet" href="../../common.css" />
+    <script src="../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
+    <style>
+      .example-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-tabs>
+        <ion-tab tab="home">
+          <div id="home-page">
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>Listen now</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content>
+              <div class="example-content">Listen now content</div>
+            </ion-content>
+          </div>
+        </ion-tab>
+        <ion-tab tab="radio">
+          <div id="radio-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">
+            <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">
+            <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>
+    </ion-app>
+  </body>
+</html>

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

@@ -0,0 +1,41 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript_index_html from './javascript/index_html.md';
+import javascript_index_ts from './javascript/index_ts.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="8"
+  code={{
+    javascript: {
+      files: {
+        'index.html': javascript_index_html,
+        'index.ts': javascript_index_ts,
+      },
+    },
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v8/tabs/basic/demo.html"
+  devicePreview
+/>

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

@@ -0,0 +1,82 @@
+```html
+<ion-tabs>
+  <ion-tab tab="home">
+    <div id="home-page">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Listen now</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <div class="example-content">Listen now content</div>
+      </ion-content>
+    </div>
+  </ion-tab>
+  <ion-tab tab="radio">
+    <div id="radio-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">
+      <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">
+      <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>
+
+<style>
+  /* 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>
+```