From 1d63cefb733cad72d35717511e4779407ac23f67 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 11 Sep 2024 16:36:12 -0700 Subject: [PATCH 1/9] docs(tabs): add playground for basic usage --- docs/api/tabs.md | 10 +- .../basic/angular/example_component_css.md | 10 ++ .../basic/angular/example_component_html.md | 71 +++++++++++ .../basic/angular/example_component_ts.md | 22 ++++ static/usage/v8/tabs/basic/demo.html | 94 +++++++++++++++ static/usage/v8/tabs/basic/index.md | 41 +++++++ .../v8/tabs/basic/javascript/index_html.md | 82 +++++++++++++ .../v8/tabs/basic/javascript/index_ts.md | 46 ++++++++ static/usage/v8/tabs/basic/react/main_css.md | 10 ++ static/usage/v8/tabs/basic/react/main_tsx.md | 93 +++++++++++++++ static/usage/v8/tabs/basic/vue.md | 111 ++++++++++++++++++ static/usage/v8/tabs/router/vue.md | 81 ------------- 12 files changed, 586 insertions(+), 85 deletions(-) create mode 100644 static/usage/v8/tabs/basic/angular/example_component_css.md create mode 100644 static/usage/v8/tabs/basic/angular/example_component_html.md create mode 100644 static/usage/v8/tabs/basic/angular/example_component_ts.md create mode 100644 static/usage/v8/tabs/basic/demo.html create mode 100644 static/usage/v8/tabs/basic/index.md create mode 100644 static/usage/v8/tabs/basic/javascript/index_html.md create mode 100644 static/usage/v8/tabs/basic/javascript/index_ts.md create mode 100644 static/usage/v8/tabs/basic/react/main_css.md create mode 100644 static/usage/v8/tabs/basic/react/main_tsx.md create mode 100644 static/usage/v8/tabs/basic/vue.md delete mode 100644 static/usage/v8/tabs/router/vue.md diff --git a/docs/api/tabs.md b/docs/api/tabs.md index 5393bc96aa0..da6a3fb7e99 100644 --- a/docs/api/tabs.md +++ b/docs/api/tabs.md @@ -26,15 +26,17 @@ Both `ion-tabs` and `ion-tab-bar` can be used as standalone elements. They don 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'; + + ## 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'; diff --git a/static/usage/v8/tabs/basic/angular/example_component_css.md b/static/usage/v8/tabs/basic/angular/example_component_css.md new file mode 100644 index 00000000000..b177722f8cc --- /dev/null +++ b/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%; +} +``` diff --git a/static/usage/v8/tabs/basic/angular/example_component_html.md b/static/usage/v8/tabs/basic/angular/example_component_html.md new file mode 100644 index 00000000000..9fa546d2bd3 --- /dev/null +++ b/static/usage/v8/tabs/basic/angular/example_component_html.md @@ -0,0 +1,71 @@ +```html + + +
+ + + Listen now + + + +
Listen now content
+ +
+ + +
+ + + Radio + + + +
Radio content
+ +
+ + +
+ + + Library + + + +
Library content
+ +
+ + +
+ + + Search + + + +
Search content
+ +
+ + + + + + Listen Now + + + + Radio + + + + Library + + + + Search + + + +``` diff --git a/static/usage/v8/tabs/basic/angular/example_component_ts.md b/static/usage/v8/tabs/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..7762322ce9d --- /dev/null +++ b/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 }); + } +} +``` diff --git a/static/usage/v8/tabs/basic/demo.html b/static/usage/v8/tabs/basic/demo.html new file mode 100644 index 00000000000..5a303b66cbb --- /dev/null +++ b/static/usage/v8/tabs/basic/demo.html @@ -0,0 +1,94 @@ + + + + + + Tabs + + + + + + + + + + + +
+ + + Listen now + + + +
Listen now content
+ +
+ + +
+ + + Radio + + + +
Radio content
+ +
+ + +
+ + + Library + + + +
Library content
+ +
+ + +
+ + + Search + + + +
Search content
+ +
+ + + + + + Listen Now + + + + Radio + + + + Library + + + + Search + + + + + + diff --git a/static/usage/v8/tabs/basic/index.md b/static/usage/v8/tabs/basic/index.md new file mode 100644 index 00000000000..b93d08c3d36 --- /dev/null +++ b/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'; + + diff --git a/static/usage/v8/tabs/basic/javascript/index_html.md b/static/usage/v8/tabs/basic/javascript/index_html.md new file mode 100644 index 00000000000..fa93db84956 --- /dev/null +++ b/static/usage/v8/tabs/basic/javascript/index_html.md @@ -0,0 +1,82 @@ +```html + + +
+ + + Listen now + + + +
Listen now content
+ +
+ + +
+ + + Radio + + + +
Radio content
+ +
+ + +
+ + + Library + + + +
Library content
+ +
+ + +
+ + + Search + + + +
Search content
+ +
+ + + + + + Listen Now + + + + Radio + + + + Library + + + + Search + + + + + +``` diff --git a/static/usage/v8/tabs/basic/javascript/index_ts.md b/static/usage/v8/tabs/basic/javascript/index_ts.md new file mode 100644 index 00000000000..2952676d830 --- /dev/null +++ b/static/usage/v8/tabs/basic/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { library, playCircle, radio, search } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'library': library, 'play-circle': playCircle, 'radio': radio, 'search': search }); + */ +addIcons({ library, playCircle, radio, search }); + +defineCustomElements(); +``` diff --git a/static/usage/v8/tabs/basic/react/main_css.md b/static/usage/v8/tabs/basic/react/main_css.md new file mode 100644 index 00000000000..b177722f8cc --- /dev/null +++ b/static/usage/v8/tabs/basic/react/main_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%; +} +``` diff --git a/static/usage/v8/tabs/basic/react/main_tsx.md b/static/usage/v8/tabs/basic/react/main_tsx.md new file mode 100644 index 00000000000..84e01103947 --- /dev/null +++ b/static/usage/v8/tabs/basic/react/main_tsx.md @@ -0,0 +1,93 @@ +```tsx +import React from 'react'; +import { + IonTabs, + IonTab, + IonToolbar, + IonTabBar, + IonTabButton, + IonHeader, + IonTitle, + IonContent, + IonIcon, +} from '@ionic/react'; + +import { playCircle, radio, library, search } from 'ionicons/icons'; + +import './main.css'; + +function Example() { + return ( + + +
+ + + Listen now + + + +
Listen now content
+ +
+ + +
+ + + Radio + + + +
Radio content
+ +
+ + +
+ + + Library + + + +
Library content
+ +
+ + +
+ + + Search + + + +
Search content
+ +
+ + + + + + Listen Now + + + + Radio + + + + Library + + + + Search + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/tabs/basic/vue.md b/static/usage/v8/tabs/basic/vue.md new file mode 100644 index 00000000000..9a594894a71 --- /dev/null +++ b/static/usage/v8/tabs/basic/vue.md @@ -0,0 +1,111 @@ +```html + + + + +``` diff --git a/static/usage/v8/tabs/router/vue.md b/static/usage/v8/tabs/router/vue.md deleted file mode 100644 index 091cabaa6f8..00000000000 --- a/static/usage/v8/tabs/router/vue.md +++ /dev/null @@ -1,81 +0,0 @@ -```html - - - - -``` From c2034879179b7f756fe34841f7a70a9dd4a3f49f Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 11 Sep 2024 17:01:19 -0700 Subject: [PATCH 2/9] docs(tabs): add warning for required tabbar --- docs/api/tabs.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/api/tabs.md b/docs/api/tabs.md index da6a3fb7e99..b0ea830f4e4 100644 --- a/docs/api/tabs.md +++ b/docs/api/tabs.md @@ -24,6 +24,10 @@ 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. ## Basic Usage From 4781f9dfecd66161f07d6b68b89452185ff380ab Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Thu, 12 Sep 2024 10:52:09 -0700 Subject: [PATCH 3/9] docs(tab): update note --- docs/api/tab.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api/tab.md b/docs/api/tab.md index 6910a6bb43a..e26b7c1cc5f 100644 --- a/docs/api/tab.md +++ b/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. ::: From 7d41c81363343dbb098d68118b411f103fb5ef04 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Thu, 12 Sep 2024 16:49:52 -0700 Subject: [PATCH 4/9] docs(tabs): remove warning --- docs/api/tabs.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/docs/api/tabs.md b/docs/api/tabs.md index b0ea830f4e4..da6a3fb7e99 100644 --- a/docs/api/tabs.md +++ b/docs/api/tabs.md @@ -24,10 +24,6 @@ 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. ## Basic Usage From 3fe3f9390dee9b3bff2058342c07556bc8ff1b17 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Fri, 13 Sep 2024 08:24:24 -0700 Subject: [PATCH 5/9] docs(tab): update note on when to use --- docs/api/tab.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/api/tab.md b/docs/api/tab.md index e26b7c1cc5f..3d0cb474fd3 100644 --- a/docs/api/tab.md +++ b/docs/api/tab.md @@ -22,7 +22,9 @@ 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 -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. +Angular, React, and Vue can only use this component 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. + +Javascript can use this component when the `ion-tabs` component is set for [basic usage](./tabs.md#basic-usage) or [usage with router](./tabs.md#usage-with-router). ::: From ce6783c7a88e79559eefb49c7fe173575d8c9f69 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Fri, 13 Sep 2024 09:08:41 -0700 Subject: [PATCH 6/9] docs(tabs): add dark mode to vue router --- static/usage/v8/tabs/router/vue/main_ts.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/static/usage/v8/tabs/router/vue/main_ts.md b/static/usage/v8/tabs/router/vue/main_ts.md index d3253963fa5..f03f4831313 100644 --- a/static/usage/v8/tabs/router/vue/main_ts.md +++ b/static/usage/v8/tabs/router/vue/main_ts.md @@ -21,6 +21,17 @@ import '@ionic/vue/css/text-transformation.css'; import '@ionic/vue/css/flex-utils.css'; import '@ionic/vue/css/display.css'; +/** + * Ionic Dark Theme + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/vue/css/palettes/dark.always.css'; +// import '@ionic/vue/css/palettes/dark.class.css'; +import '@ionic/vue/css/palettes/dark.system.css'; + /* Theme variables */ import './theme/variables.css'; From bd732dec6c2b19b5157ea3ae799cb3669bd70fd7 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Fri, 13 Sep 2024 09:41:39 -0700 Subject: [PATCH 7/9] docs(tabs): use correct syntax --- static/usage/v8/tabs/router/angular/app_module_ts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/usage/v8/tabs/router/angular/app_module_ts.md b/static/usage/v8/tabs/router/angular/app_module_ts.md index b2d3db7f33d..e36b8c6316e 100644 --- a/static/usage/v8/tabs/router/angular/app_module_ts.md +++ b/static/usage/v8/tabs/router/angular/app_module_ts.md @@ -11,7 +11,7 @@ import { ExampleComponent } from './example.component'; import { AppRoutingModule } from './app-routing.module'; @NgModule({ - imports: [BrowserModule, FormsModule, AppRoutingModule, IonicModule.forRoot()], + imports: [BrowserModule, FormsModule, AppRoutingModule, IonicModule.forRoot({})], declarations: [AppComponent, ExampleComponent], bootstrap: [AppComponent], }) From 109e0361465d0c117cd95b4dcbb53f0066aa57d1 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Fri, 13 Sep 2024 10:09:13 -0700 Subject: [PATCH 8/9] docs(tabs): remove ion content --- static/usage/v8/tabs/basic/index.md | 1 + static/usage/v8/tabs/router/index.md | 1 + 2 files changed, 2 insertions(+) diff --git a/static/usage/v8/tabs/basic/index.md b/static/usage/v8/tabs/basic/index.md index b93d08c3d36..588431eb980 100644 --- a/static/usage/v8/tabs/basic/index.md +++ b/static/usage/v8/tabs/basic/index.md @@ -38,4 +38,5 @@ import angular_example_component_css from './angular/example_component_css.md'; }} src="usage/v8/tabs/basic/demo.html" devicePreview + includeIonContent={false} /> diff --git a/static/usage/v8/tabs/router/index.md b/static/usage/v8/tabs/router/index.md index ec9de935d03..90700816abb 100644 --- a/static/usage/v8/tabs/router/index.md +++ b/static/usage/v8/tabs/router/index.md @@ -98,4 +98,5 @@ import react_search_page_tsx from './react/search_page_tsx.md'; }} src="usage/v8/tabs/router/demo.html" devicePreview + includeIonContent={false} /> From cfb3567b497127da9f66ad0d42e26ebcab1b7696 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Fri, 13 Sep 2024 10:10:39 -0700 Subject: [PATCH 9/9] Update docs/api/tab.md Co-authored-by: Brandy Carney --- docs/api/tab.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/api/tab.md b/docs/api/tab.md index 3d0cb474fd3..a669d9193d5 100644 --- a/docs/api/tab.md +++ b/docs/api/tab.md @@ -22,9 +22,9 @@ 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 -Angular, React, and Vue can only use this component 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. +Angular, React, and Vue can only use this component when the `ion-tabs` component is configured for [basic usage](./tabs.md#basic-usage). When setting up tabs with routing, the `ion-tab` component cannot be used. -Javascript can use this component when the `ion-tabs` component is set for [basic usage](./tabs.md#basic-usage) or [usage with router](./tabs.md#usage-with-router). +In JavaScript, this component can be used with the `ion-tabs` component configured for either [basic usage](./tabs.md#basic-usage) or [usage with router](./tabs.md#usage-with-router). :::