From 4342d926a8256a95130a3b24393ea96cdb1a8284 Mon Sep 17 00:00:00 2001 From: joesphchang Date: Tue, 1 Jul 2025 13:00:33 -0500 Subject: [PATCH 1/7] docs(config): added the new files to usage-v8 --- docs/developing/config.md | 2 ++ static/usage/v8/config/mode/angular/example_component_html.md | 0 static/usage/v8/config/mode/angular/example_component_ts.md | 0 static/usage/v8/config/mode/demo.html | 0 static/usage/v8/config/mode/index.md | 0 static/usage/v8/config/mode/javascript.md | 0 static/usage/v8/config/mode/react.md | 0 static/usage/v8/config/mode/vue.md | 0 8 files changed, 2 insertions(+) create mode 100644 static/usage/v8/config/mode/angular/example_component_html.md create mode 100644 static/usage/v8/config/mode/angular/example_component_ts.md create mode 100644 static/usage/v8/config/mode/demo.html create mode 100644 static/usage/v8/config/mode/index.md create mode 100644 static/usage/v8/config/mode/javascript.md create mode 100644 static/usage/v8/config/mode/react.md create mode 100644 static/usage/v8/config/mode/vue.md diff --git a/docs/developing/config.md b/docs/developing/config.md index 0f70b8da46d..7073a1f6110 100644 --- a/docs/developing/config.md +++ b/docs/developing/config.md @@ -51,6 +51,8 @@ import PerPlatformOverridesExample from '@site/docs/developing/config/per-platfo + + ## Reading the Config (Angular) Ionic Angular provides a `Config` provider for accessing the Ionic Config. diff --git a/static/usage/v8/config/mode/angular/example_component_html.md b/static/usage/v8/config/mode/angular/example_component_html.md new file mode 100644 index 00000000000..e69de29bb2d diff --git a/static/usage/v8/config/mode/angular/example_component_ts.md b/static/usage/v8/config/mode/angular/example_component_ts.md new file mode 100644 index 00000000000..e69de29bb2d diff --git a/static/usage/v8/config/mode/demo.html b/static/usage/v8/config/mode/demo.html new file mode 100644 index 00000000000..e69de29bb2d diff --git a/static/usage/v8/config/mode/index.md b/static/usage/v8/config/mode/index.md new file mode 100644 index 00000000000..e69de29bb2d diff --git a/static/usage/v8/config/mode/javascript.md b/static/usage/v8/config/mode/javascript.md new file mode 100644 index 00000000000..e69de29bb2d diff --git a/static/usage/v8/config/mode/react.md b/static/usage/v8/config/mode/react.md new file mode 100644 index 00000000000..e69de29bb2d diff --git a/static/usage/v8/config/mode/vue.md b/static/usage/v8/config/mode/vue.md new file mode 100644 index 00000000000..e69de29bb2d From f3e8fb9fb7214cdeeb861bc8f34bcd2c8532573d Mon Sep 17 00:00:00 2001 From: joesphchang Date: Tue, 1 Jul 2025 21:02:25 -0500 Subject: [PATCH 2/7] docs(config): v8 is up to date and working --- docs/developing/config.md | 6 ++ .../mode/angular/example_component_html.md | 30 +++++++++ .../mode/angular/example_component_ts.md | 22 +++++++ static/usage/v8/config/mode/demo.html | 65 +++++++++++++++++++ static/usage/v8/config/mode/index.md | 24 +++++++ static/usage/v8/config/mode/javascript.md | 45 +++++++++++++ static/usage/v8/config/mode/react.md | 32 +++++++++ static/usage/v8/config/mode/vue.md | 46 +++++++++++++ 8 files changed, 270 insertions(+) diff --git a/docs/developing/config.md b/docs/developing/config.md index 7073a1f6110..6cce3de4a1d 100644 --- a/docs/developing/config.md +++ b/docs/developing/config.md @@ -51,7 +51,13 @@ import PerPlatformOverridesExample from '@site/docs/developing/config/per-platfo +## Accessing the Mode +In some cases, you may need to access the current Ionic mode programmatically within your application logic. This can be useful for applying conditional behavior, fetching specific assets, or performing other actions based on the active styling mode. + +import IonicMode from '@site/static/usage/v8/config/mode/index.md'; + + ## Reading the Config (Angular) diff --git a/static/usage/v8/config/mode/angular/example_component_html.md b/static/usage/v8/config/mode/angular/example_component_html.md index e69de29bb2d..3c9e0eb1eb4 100644 --- a/static/usage/v8/config/mode/angular/example_component_html.md +++ b/static/usage/v8/config/mode/angular/example_component_html.md @@ -0,0 +1,30 @@ +```html + + +
+ + {{ modeValue }} + +
+ Current mode: {{ modeValue }} +
+
+
+
+ +``` \ No newline at end of file diff --git a/static/usage/v8/config/mode/angular/example_component_ts.md b/static/usage/v8/config/mode/angular/example_component_ts.md index e69de29bb2d..daac2651690 100644 --- a/static/usage/v8/config/mode/angular/example_component_ts.md +++ b/static/usage/v8/config/mode/angular/example_component_ts.md @@ -0,0 +1,22 @@ +```ts +import { Component } from '@angular/core'; +import { Config, IonicModule } from '@ionic/angular'; +import { NgIf } from '@angular/common'; + +@Component({ + selector: 'app-example', + templateUrl: './example.component.html', + imports: [IonicModule, NgIf], + standalone: true +}) +export class ExampleComponent { + modeValue = ''; + + constructor(public config: Config) { + this.modeValue = this.config.get('mode'); + } + showMode() { + this.modeValue = this.config.get('mode'); + } +} +``` \ No newline at end of file diff --git a/static/usage/v8/config/mode/demo.html b/static/usage/v8/config/mode/demo.html index e69de29bb2d..752587281f8 100644 --- a/static/usage/v8/config/mode/demo.html +++ b/static/usage/v8/config/mode/demo.html @@ -0,0 +1,65 @@ + + + + + + + Ionic Config Mode + + + + + + + + + + +
+ Show Current Mode +
+
+
+
+ + + + \ No newline at end of file diff --git a/static/usage/v8/config/mode/index.md b/static/usage/v8/config/mode/index.md index e69de29bb2d..f644f1be806 100644 --- a/static/usage/v8/config/mode/index.md +++ b/static/usage/v8/config/mode/index.md @@ -0,0 +1,24 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.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'; + + \ No newline at end of file diff --git a/static/usage/v8/config/mode/javascript.md b/static/usage/v8/config/mode/javascript.md index e69de29bb2d..74c92fedfd9 100644 --- a/static/usage/v8/config/mode/javascript.md +++ b/static/usage/v8/config/mode/javascript.md @@ -0,0 +1,45 @@ +```html +
+ Show Current Mode +
+
+ + +``` \ No newline at end of file diff --git a/static/usage/v8/config/mode/react.md b/static/usage/v8/config/mode/react.md index e69de29bb2d..4b54b72f004 100644 --- a/static/usage/v8/config/mode/react.md +++ b/static/usage/v8/config/mode/react.md @@ -0,0 +1,32 @@ +```tsx +import React, { useState, useEffect } from 'react'; +import { IonButton } from '@ionic/react'; +import { getMode } from '@ionic/core'; + +function Example() { + const [modeValue, setModeValue] = useState(''); + + useEffect(() => { + setModeValue(getMode()); + }, []); + + const showMode = () => { + setModeValue(getMode()); + }; + + const color = modeValue === 'ios' ? 'secondary' : 'tertiary'; + const fill = modeValue === 'ios' ? 'outline' : 'solid'; + + return ( +
+ + {modeValue} + +
+ {modeValue && `Current mode: ${modeValue}`} +
+
+ ); +} +export default Example; +``` \ No newline at end of file diff --git a/static/usage/v8/config/mode/vue.md b/static/usage/v8/config/mode/vue.md index e69de29bb2d..b5ef5888182 100644 --- a/static/usage/v8/config/mode/vue.md +++ b/static/usage/v8/config/mode/vue.md @@ -0,0 +1,46 @@ +```html + + + + + +``` \ No newline at end of file From 7f225544f39fab5ab9a6fb3643987e353dac013d Mon Sep 17 00:00:00 2001 From: joesphchang Date: Tue, 1 Jul 2025 21:08:57 -0500 Subject: [PATCH 3/7] docs(config): added the ionic mode to config docs v7 --- .../mode/angular/example_component_html.md | 30 +++++++++ .../mode/angular/example_component_ts.md | 22 +++++++ static/usage/v7/config/mode/demo.html | 65 +++++++++++++++++++ static/usage/v7/config/mode/index.md | 24 +++++++ static/usage/v7/config/mode/javascript.md | 45 +++++++++++++ static/usage/v7/config/mode/react.md | 32 +++++++++ static/usage/v7/config/mode/vue.md | 46 +++++++++++++ static/usage/v8/config/mode/index.md | 2 +- .../version-v7/developing/config.md | 8 +++ 9 files changed, 273 insertions(+), 1 deletion(-) create mode 100644 static/usage/v7/config/mode/angular/example_component_html.md create mode 100644 static/usage/v7/config/mode/angular/example_component_ts.md create mode 100644 static/usage/v7/config/mode/demo.html create mode 100644 static/usage/v7/config/mode/index.md create mode 100644 static/usage/v7/config/mode/javascript.md create mode 100644 static/usage/v7/config/mode/react.md create mode 100644 static/usage/v7/config/mode/vue.md diff --git a/static/usage/v7/config/mode/angular/example_component_html.md b/static/usage/v7/config/mode/angular/example_component_html.md new file mode 100644 index 00000000000..3c9e0eb1eb4 --- /dev/null +++ b/static/usage/v7/config/mode/angular/example_component_html.md @@ -0,0 +1,30 @@ +```html + + +
+ + {{ modeValue }} + +
+ Current mode: {{ modeValue }} +
+
+
+
+ +``` \ No newline at end of file diff --git a/static/usage/v7/config/mode/angular/example_component_ts.md b/static/usage/v7/config/mode/angular/example_component_ts.md new file mode 100644 index 00000000000..daac2651690 --- /dev/null +++ b/static/usage/v7/config/mode/angular/example_component_ts.md @@ -0,0 +1,22 @@ +```ts +import { Component } from '@angular/core'; +import { Config, IonicModule } from '@ionic/angular'; +import { NgIf } from '@angular/common'; + +@Component({ + selector: 'app-example', + templateUrl: './example.component.html', + imports: [IonicModule, NgIf], + standalone: true +}) +export class ExampleComponent { + modeValue = ''; + + constructor(public config: Config) { + this.modeValue = this.config.get('mode'); + } + showMode() { + this.modeValue = this.config.get('mode'); + } +} +``` \ No newline at end of file diff --git a/static/usage/v7/config/mode/demo.html b/static/usage/v7/config/mode/demo.html new file mode 100644 index 00000000000..752587281f8 --- /dev/null +++ b/static/usage/v7/config/mode/demo.html @@ -0,0 +1,65 @@ + + + + + + + Ionic Config Mode + + + + + + + + + + +
+ Show Current Mode +
+
+
+
+ + + + \ No newline at end of file diff --git a/static/usage/v7/config/mode/index.md b/static/usage/v7/config/mode/index.md new file mode 100644 index 00000000000..f644f1be806 --- /dev/null +++ b/static/usage/v7/config/mode/index.md @@ -0,0 +1,24 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.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'; + + \ No newline at end of file diff --git a/static/usage/v7/config/mode/javascript.md b/static/usage/v7/config/mode/javascript.md new file mode 100644 index 00000000000..74c92fedfd9 --- /dev/null +++ b/static/usage/v7/config/mode/javascript.md @@ -0,0 +1,45 @@ +```html +
+ Show Current Mode +
+
+ + +``` \ No newline at end of file diff --git a/static/usage/v7/config/mode/react.md b/static/usage/v7/config/mode/react.md new file mode 100644 index 00000000000..4b54b72f004 --- /dev/null +++ b/static/usage/v7/config/mode/react.md @@ -0,0 +1,32 @@ +```tsx +import React, { useState, useEffect } from 'react'; +import { IonButton } from '@ionic/react'; +import { getMode } from '@ionic/core'; + +function Example() { + const [modeValue, setModeValue] = useState(''); + + useEffect(() => { + setModeValue(getMode()); + }, []); + + const showMode = () => { + setModeValue(getMode()); + }; + + const color = modeValue === 'ios' ? 'secondary' : 'tertiary'; + const fill = modeValue === 'ios' ? 'outline' : 'solid'; + + return ( +
+ + {modeValue} + +
+ {modeValue && `Current mode: ${modeValue}`} +
+
+ ); +} +export default Example; +``` \ No newline at end of file diff --git a/static/usage/v7/config/mode/vue.md b/static/usage/v7/config/mode/vue.md new file mode 100644 index 00000000000..b5ef5888182 --- /dev/null +++ b/static/usage/v7/config/mode/vue.md @@ -0,0 +1,46 @@ +```html + + + + + +``` \ No newline at end of file diff --git a/static/usage/v8/config/mode/index.md b/static/usage/v8/config/mode/index.md index f644f1be806..6c9d2cf8f1a 100644 --- a/static/usage/v8/config/mode/index.md +++ b/static/usage/v8/config/mode/index.md @@ -8,7 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md' import angular_example_component_ts from './angular/example_component_ts.md'; +## Accessing the Mode + +In some cases, you may need to access the current Ionic mode programmatically within your application logic. This can be useful for applying conditional behavior, fetching specific assets, or performing other actions based on the active styling mode. + +import IonicMode from '@site/static/usage/v7/config/mode/index.md'; + + + ## Reading the Config (Angular) Ionic Angular provides a `Config` provider for accessing the Ionic Config. From 3e936811761046df2e43625ab30db62399c969c5 Mon Sep 17 00:00:00 2001 From: joesphchang Date: Thu, 3 Jul 2025 12:41:34 -0500 Subject: [PATCH 4/7] docs(config): fixed no newline at endfile --- .../mode/angular/example_component_html.md | 6 +- .../mode/angular/example_component_ts.md | 6 +- static/usage/v7/config/mode/demo.html | 88 +++++++++---------- static/usage/v7/config/mode/index.md | 2 +- static/usage/v7/config/mode/javascript.md | 2 +- static/usage/v7/config/mode/react.md | 2 +- static/usage/v7/config/mode/vue.md | 54 +++++------- .../mode/angular/example_component_html.md | 6 +- .../mode/angular/example_component_ts.md | 6 +- static/usage/v8/config/mode/demo.html | 88 +++++++++---------- static/usage/v8/config/mode/index.md | 2 +- static/usage/v8/config/mode/javascript.md | 2 +- static/usage/v8/config/mode/react.md | 2 +- static/usage/v8/config/mode/vue.md | 54 +++++------- 14 files changed, 148 insertions(+), 172 deletions(-) diff --git a/static/usage/v7/config/mode/angular/example_component_html.md b/static/usage/v7/config/mode/angular/example_component_html.md index 3c9e0eb1eb4..f3c1c3b8d96 100644 --- a/static/usage/v7/config/mode/angular/example_component_html.md +++ b/static/usage/v7/config/mode/angular/example_component_html.md @@ -9,9 +9,7 @@ > {{ modeValue }} -
- Current mode: {{ modeValue }} -
+
Current mode: {{ modeValue }}
@@ -27,4 +25,4 @@ font-weight: bold; } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/config/mode/angular/example_component_ts.md b/static/usage/v7/config/mode/angular/example_component_ts.md index daac2651690..b65903b2fe0 100644 --- a/static/usage/v7/config/mode/angular/example_component_ts.md +++ b/static/usage/v7/config/mode/angular/example_component_ts.md @@ -6,8 +6,8 @@ import { NgIf } from '@angular/common'; @Component({ selector: 'app-example', templateUrl: './example.component.html', - imports: [IonicModule, NgIf], - standalone: true + imports: [IonicModule, NgIf], + standalone: true, }) export class ExampleComponent { modeValue = ''; @@ -19,4 +19,4 @@ export class ExampleComponent { this.modeValue = this.config.get('mode'); } } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/config/mode/demo.html b/static/usage/v7/config/mode/demo.html index 752587281f8..46bef3fa0d9 100644 --- a/static/usage/v7/config/mode/demo.html +++ b/static/usage/v7/config/mode/demo.html @@ -1,7 +1,6 @@ - - + Ionic Config Mode @@ -10,56 +9,55 @@ - + - + - -
- Show Current Mode -
-
-
+ +
+ Show Current Mode +
+
+
- - - \ No newline at end of file + + diff --git a/static/usage/v7/config/mode/index.md b/static/usage/v7/config/mode/index.md index f644f1be806..2a39f7cc794 100644 --- a/static/usage/v7/config/mode/index.md +++ b/static/usage/v7/config/mode/index.md @@ -21,4 +21,4 @@ import angular_example_component_ts from './angular/example_component_ts.md'; }, }} src="usage/v8/config/mode/demo.html" -/> \ No newline at end of file +/> diff --git a/static/usage/v7/config/mode/javascript.md b/static/usage/v7/config/mode/javascript.md index 74c92fedfd9..21523857f8f 100644 --- a/static/usage/v7/config/mode/javascript.md +++ b/static/usage/v7/config/mode/javascript.md @@ -42,4 +42,4 @@ font-weight: bold; } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/config/mode/react.md b/static/usage/v7/config/mode/react.md index 4b54b72f004..18375822648 100644 --- a/static/usage/v7/config/mode/react.md +++ b/static/usage/v7/config/mode/react.md @@ -29,4 +29,4 @@ function Example() { ); } export default Example; -``` \ No newline at end of file +``` diff --git a/static/usage/v7/config/mode/vue.md b/static/usage/v7/config/mode/vue.md index b5ef5888182..69bf2ccbf73 100644 --- a/static/usage/v7/config/mode/vue.md +++ b/static/usage/v7/config/mode/vue.md @@ -1,46 +1,38 @@ ```html -``` \ No newline at end of file +``` diff --git a/static/usage/v8/config/mode/angular/example_component_html.md b/static/usage/v8/config/mode/angular/example_component_html.md index 3c9e0eb1eb4..f3c1c3b8d96 100644 --- a/static/usage/v8/config/mode/angular/example_component_html.md +++ b/static/usage/v8/config/mode/angular/example_component_html.md @@ -9,9 +9,7 @@ > {{ modeValue }} -
- Current mode: {{ modeValue }} -
+
Current mode: {{ modeValue }}
@@ -27,4 +25,4 @@ font-weight: bold; } -``` \ No newline at end of file +``` diff --git a/static/usage/v8/config/mode/angular/example_component_ts.md b/static/usage/v8/config/mode/angular/example_component_ts.md index daac2651690..b65903b2fe0 100644 --- a/static/usage/v8/config/mode/angular/example_component_ts.md +++ b/static/usage/v8/config/mode/angular/example_component_ts.md @@ -6,8 +6,8 @@ import { NgIf } from '@angular/common'; @Component({ selector: 'app-example', templateUrl: './example.component.html', - imports: [IonicModule, NgIf], - standalone: true + imports: [IonicModule, NgIf], + standalone: true, }) export class ExampleComponent { modeValue = ''; @@ -19,4 +19,4 @@ export class ExampleComponent { this.modeValue = this.config.get('mode'); } } -``` \ No newline at end of file +``` diff --git a/static/usage/v8/config/mode/demo.html b/static/usage/v8/config/mode/demo.html index 752587281f8..46bef3fa0d9 100644 --- a/static/usage/v8/config/mode/demo.html +++ b/static/usage/v8/config/mode/demo.html @@ -1,7 +1,6 @@ - - + Ionic Config Mode @@ -10,56 +9,55 @@ - + - + - -
- Show Current Mode -
-
-
+ +
+ Show Current Mode +
+
+
- - - \ No newline at end of file + + diff --git a/static/usage/v8/config/mode/index.md b/static/usage/v8/config/mode/index.md index 6c9d2cf8f1a..569a8a2ce34 100644 --- a/static/usage/v8/config/mode/index.md +++ b/static/usage/v8/config/mode/index.md @@ -21,4 +21,4 @@ import angular_example_component_ts from './angular/example_component_ts.md'; }, }} src="usage/v8/config/mode/demo.html" -/> \ No newline at end of file +/> diff --git a/static/usage/v8/config/mode/javascript.md b/static/usage/v8/config/mode/javascript.md index 74c92fedfd9..21523857f8f 100644 --- a/static/usage/v8/config/mode/javascript.md +++ b/static/usage/v8/config/mode/javascript.md @@ -42,4 +42,4 @@ font-weight: bold; } -``` \ No newline at end of file +``` diff --git a/static/usage/v8/config/mode/react.md b/static/usage/v8/config/mode/react.md index 4b54b72f004..18375822648 100644 --- a/static/usage/v8/config/mode/react.md +++ b/static/usage/v8/config/mode/react.md @@ -29,4 +29,4 @@ function Example() { ); } export default Example; -``` \ No newline at end of file +``` diff --git a/static/usage/v8/config/mode/vue.md b/static/usage/v8/config/mode/vue.md index b5ef5888182..69bf2ccbf73 100644 --- a/static/usage/v8/config/mode/vue.md +++ b/static/usage/v8/config/mode/vue.md @@ -1,46 +1,38 @@ ```html -``` \ No newline at end of file +``` From 675dfbd6ac01475b2ed1ca5b82eeb3e530e4b993 Mon Sep 17 00:00:00 2001 From: joesphchang Date: Tue, 8 Jul 2025 10:39:36 -0500 Subject: [PATCH 5/7] config(docs): made suggested changes to code-base and simplify the examples --- .../mode/angular/example_component_html.md | 32 +++--------- .../mode/angular/example_component_ts.md | 15 ++---- static/usage/v7/config/mode/index.md | 4 +- static/usage/v7/config/mode/javascript.md | 49 ++++--------------- static/usage/v7/config/mode/react.md | 25 ++++------ static/usage/v7/config/mode/vue.md | 32 +++--------- .../mode/angular/example_component_html.md | 32 +++--------- .../mode/angular/example_component_ts.md | 15 ++---- static/usage/v8/config/mode/demo.html | 36 +++----------- static/usage/v8/config/mode/index.md | 2 +- static/usage/v8/config/mode/javascript.md | 48 +++--------------- static/usage/v8/config/mode/react.md | 26 ++++------ static/usage/v8/config/mode/vue.md | 32 +++--------- 13 files changed, 81 insertions(+), 267 deletions(-) diff --git a/static/usage/v7/config/mode/angular/example_component_html.md b/static/usage/v7/config/mode/angular/example_component_html.md index f3c1c3b8d96..ec070d774a9 100644 --- a/static/usage/v7/config/mode/angular/example_component_html.md +++ b/static/usage/v7/config/mode/angular/example_component_html.md @@ -1,28 +1,8 @@ ```html - - -
- - {{ modeValue }} - -
Current mode: {{ modeValue }}
-
-
-
- + + Current mode: {{ mode }} + ``` diff --git a/static/usage/v7/config/mode/angular/example_component_ts.md b/static/usage/v7/config/mode/angular/example_component_ts.md index b65903b2fe0..5ea2320af2b 100644 --- a/static/usage/v7/config/mode/angular/example_component_ts.md +++ b/static/usage/v7/config/mode/angular/example_component_ts.md @@ -1,22 +1,17 @@ ```ts import { Component } from '@angular/core'; -import { Config, IonicModule } from '@ionic/angular'; -import { NgIf } from '@angular/common'; +import { Config, IonButton } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: './example.component.html', - imports: [IonicModule, NgIf], - standalone: true, + imports: [IonButton] }) -export class ExampleComponent { - modeValue = ''; +export class ExampleComponent { + mode: string; constructor(public config: Config) { - this.modeValue = this.config.get('mode'); - } - showMode() { - this.modeValue = this.config.get('mode'); + this.mode = this.config.get('mode'); } } ``` diff --git a/static/usage/v7/config/mode/index.md b/static/usage/v7/config/mode/index.md index 2a39f7cc794..f81cca1df75 100644 --- a/static/usage/v7/config/mode/index.md +++ b/static/usage/v7/config/mode/index.md @@ -8,7 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md' import angular_example_component_ts from './angular/example_component_ts.md'; diff --git a/static/usage/v7/config/mode/javascript.md b/static/usage/v7/config/mode/javascript.md index 21523857f8f..42f4b6e099b 100644 --- a/static/usage/v7/config/mode/javascript.md +++ b/static/usage/v7/config/mode/javascript.md @@ -1,45 +1,14 @@ ```html -
- Show Current Mode -
-
- - ``` diff --git a/static/usage/v7/config/mode/react.md b/static/usage/v7/config/mode/react.md index 18375822648..3699e778a85 100644 --- a/static/usage/v7/config/mode/react.md +++ b/static/usage/v7/config/mode/react.md @@ -4,29 +4,22 @@ import { IonButton } from '@ionic/react'; import { getMode } from '@ionic/core'; function Example() { - const [modeValue, setModeValue] = useState(''); + const [mode, setMode] = useState(''); useEffect(() => { - setModeValue(getMode()); + const mode = getMode() || 'md'; + setMode(mode); }, []); - const showMode = () => { - setModeValue(getMode()); - }; - - const color = modeValue === 'ios' ? 'secondary' : 'tertiary'; - const fill = modeValue === 'ios' ? 'outline' : 'solid'; + const color = mode === 'ios' ? 'secondary' : 'tertiary'; + const fill = mode === 'ios' ? 'outline' : 'solid'; return ( -
- - {modeValue} - -
- {modeValue && `Current mode: ${modeValue}`} -
-
+ + Current mode: {mode} + ); } + export default Example; ``` diff --git a/static/usage/v7/config/mode/vue.md b/static/usage/v7/config/mode/vue.md index 69bf2ccbf73..997fdae865c 100644 --- a/static/usage/v7/config/mode/vue.md +++ b/static/usage/v7/config/mode/vue.md @@ -1,38 +1,20 @@ ```html - - ``` diff --git a/static/usage/v8/config/mode/angular/example_component_html.md b/static/usage/v8/config/mode/angular/example_component_html.md index f3c1c3b8d96..ec070d774a9 100644 --- a/static/usage/v8/config/mode/angular/example_component_html.md +++ b/static/usage/v8/config/mode/angular/example_component_html.md @@ -1,28 +1,8 @@ ```html - - -
- - {{ modeValue }} - -
Current mode: {{ modeValue }}
-
-
-
- + + Current mode: {{ mode }} + ``` diff --git a/static/usage/v8/config/mode/angular/example_component_ts.md b/static/usage/v8/config/mode/angular/example_component_ts.md index b65903b2fe0..5ea2320af2b 100644 --- a/static/usage/v8/config/mode/angular/example_component_ts.md +++ b/static/usage/v8/config/mode/angular/example_component_ts.md @@ -1,22 +1,17 @@ ```ts import { Component } from '@angular/core'; -import { Config, IonicModule } from '@ionic/angular'; -import { NgIf } from '@angular/common'; +import { Config, IonButton } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: './example.component.html', - imports: [IonicModule, NgIf], - standalone: true, + imports: [IonButton] }) -export class ExampleComponent { - modeValue = ''; +export class ExampleComponent { + mode: string; constructor(public config: Config) { - this.modeValue = this.config.get('mode'); - } - showMode() { - this.modeValue = this.config.get('mode'); + this.mode = this.config.get('mode'); } } ``` diff --git a/static/usage/v8/config/mode/demo.html b/static/usage/v8/config/mode/demo.html index 46bef3fa0d9..f5bf6e9d0c1 100644 --- a/static/usage/v8/config/mode/demo.html +++ b/static/usage/v8/config/mode/demo.html @@ -21,43 +21,21 @@ } -
- Show Current Mode -
+ Current mode:
diff --git a/static/usage/v8/config/mode/index.md b/static/usage/v8/config/mode/index.md index 569a8a2ce34..2a39f7cc794 100644 --- a/static/usage/v8/config/mode/index.md +++ b/static/usage/v8/config/mode/index.md @@ -8,7 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md' import angular_example_component_ts from './angular/example_component_ts.md'; - Show Current Mode -
- +Current mode: - ``` diff --git a/static/usage/v8/config/mode/react.md b/static/usage/v8/config/mode/react.md index 18375822648..1c2f5ab0d6b 100644 --- a/static/usage/v8/config/mode/react.md +++ b/static/usage/v8/config/mode/react.md @@ -4,28 +4,20 @@ import { IonButton } from '@ionic/react'; import { getMode } from '@ionic/core'; function Example() { - const [modeValue, setModeValue] = useState(''); + const [mode, setMode] = useState(''); useEffect(() => { - setModeValue(getMode()); + const mode = getMode() || 'md'; + setMode(mode); }, []); - - const showMode = () => { - setModeValue(getMode()); - }; - - const color = modeValue === 'ios' ? 'secondary' : 'tertiary'; - const fill = modeValue === 'ios' ? 'outline' : 'solid'; + + const color = mode === 'ios' ? 'secondary' : 'tertiary'; + const fill = mode === 'ios' ? 'outline' : 'solid'; return ( -
- - {modeValue} - -
- {modeValue && `Current mode: ${modeValue}`} -
-
+ + Current mode: {mode} + ); } export default Example; diff --git a/static/usage/v8/config/mode/vue.md b/static/usage/v8/config/mode/vue.md index 69bf2ccbf73..161fdace85e 100644 --- a/static/usage/v8/config/mode/vue.md +++ b/static/usage/v8/config/mode/vue.md @@ -1,38 +1,20 @@ ```html - - ``` From d110c24021c3b0a85158737ec6b80485dba2416a Mon Sep 17 00:00:00 2001 From: joesphchang Date: Tue, 8 Jul 2025 10:40:32 -0500 Subject: [PATCH 6/7] docs(config): ran npm run lint --- .../usage/v7/config/mode/angular/example_component_html.md | 5 +---- static/usage/v7/config/mode/angular/example_component_ts.md | 3 +-- static/usage/v7/config/mode/javascript.md | 2 +- static/usage/v7/config/mode/vue.md | 2 +- .../usage/v8/config/mode/angular/example_component_html.md | 5 +---- static/usage/v8/config/mode/angular/example_component_ts.md | 3 +-- static/usage/v8/config/mode/demo.html | 2 +- static/usage/v8/config/mode/javascript.md | 2 +- static/usage/v8/config/mode/react.md | 2 +- static/usage/v8/config/mode/vue.md | 2 +- 10 files changed, 10 insertions(+), 18 deletions(-) diff --git a/static/usage/v7/config/mode/angular/example_component_html.md b/static/usage/v7/config/mode/angular/example_component_html.md index ec070d774a9..759329a97da 100644 --- a/static/usage/v7/config/mode/angular/example_component_html.md +++ b/static/usage/v7/config/mode/angular/example_component_html.md @@ -1,8 +1,5 @@ ```html - + Current mode: {{ mode }} ``` diff --git a/static/usage/v7/config/mode/angular/example_component_ts.md b/static/usage/v7/config/mode/angular/example_component_ts.md index 5ea2320af2b..5f0d31b1a3c 100644 --- a/static/usage/v7/config/mode/angular/example_component_ts.md +++ b/static/usage/v7/config/mode/angular/example_component_ts.md @@ -5,9 +5,8 @@ import { Config, IonButton } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: './example.component.html', - imports: [IonButton] + imports: [IonButton], }) - export class ExampleComponent { mode: string; constructor(public config: Config) { diff --git a/static/usage/v7/config/mode/javascript.md b/static/usage/v7/config/mode/javascript.md index 42f4b6e099b..106100c35d9 100644 --- a/static/usage/v7/config/mode/javascript.md +++ b/static/usage/v7/config/mode/javascript.md @@ -5,7 +5,7 @@ const modeButton = document.querySelector('#modeButton'); const modeValue = document.querySelector('#modeValue'); const mode = window.Ionic.config.get('mode') || document.documentElement.getAttribute('mode') || 'md'; - + modeValue.textContent = mode; modeButton.setAttribute('color', mode === 'ios' ? 'secondary' : 'tertiary'); diff --git a/static/usage/v7/config/mode/vue.md b/static/usage/v7/config/mode/vue.md index 997fdae865c..a227337a408 100644 --- a/static/usage/v7/config/mode/vue.md +++ b/static/usage/v7/config/mode/vue.md @@ -12,7 +12,7 @@ const color = computed(() => (mode.value === 'ios' ? 'secondary' : 'tertiary')); const fill = computed(() => (mode.value === 'ios' ? 'outline' : 'solid')); - + onMounted(() => { mode.value = getMode() || 'md'; }); diff --git a/static/usage/v8/config/mode/angular/example_component_html.md b/static/usage/v8/config/mode/angular/example_component_html.md index ec070d774a9..759329a97da 100644 --- a/static/usage/v8/config/mode/angular/example_component_html.md +++ b/static/usage/v8/config/mode/angular/example_component_html.md @@ -1,8 +1,5 @@ ```html - + Current mode: {{ mode }} ``` diff --git a/static/usage/v8/config/mode/angular/example_component_ts.md b/static/usage/v8/config/mode/angular/example_component_ts.md index 5ea2320af2b..5f0d31b1a3c 100644 --- a/static/usage/v8/config/mode/angular/example_component_ts.md +++ b/static/usage/v8/config/mode/angular/example_component_ts.md @@ -5,9 +5,8 @@ import { Config, IonButton } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: './example.component.html', - imports: [IonButton] + imports: [IonButton], }) - export class ExampleComponent { mode: string; constructor(public config: Config) { diff --git a/static/usage/v8/config/mode/demo.html b/static/usage/v8/config/mode/demo.html index f5bf6e9d0c1..08973e7ca15 100644 --- a/static/usage/v8/config/mode/demo.html +++ b/static/usage/v8/config/mode/demo.html @@ -25,7 +25,7 @@
- Current mode: + Current mode:
diff --git a/static/usage/v8/config/mode/javascript.md b/static/usage/v8/config/mode/javascript.md index 43f43271263..fe11af40fdc 100644 --- a/static/usage/v8/config/mode/javascript.md +++ b/static/usage/v8/config/mode/javascript.md @@ -6,7 +6,7 @@ const mode = window.Ionic.config.get('mode') || document.documentElement.getAttribute('mode') || 'md'; modeValue.textContent = mode; - + modeButton.setAttribute('color', mode === 'ios' ? 'secondary' : 'tertiary'); modeButton.setAttribute('fill', mode === 'ios' ? 'outline' : 'solid'); diff --git a/static/usage/v8/config/mode/react.md b/static/usage/v8/config/mode/react.md index 1c2f5ab0d6b..3de2faf85a1 100644 --- a/static/usage/v8/config/mode/react.md +++ b/static/usage/v8/config/mode/react.md @@ -10,7 +10,7 @@ function Example() { const mode = getMode() || 'md'; setMode(mode); }, []); - + const color = mode === 'ios' ? 'secondary' : 'tertiary'; const fill = mode === 'ios' ? 'outline' : 'solid'; diff --git a/static/usage/v8/config/mode/vue.md b/static/usage/v8/config/mode/vue.md index 161fdace85e..a227337a408 100644 --- a/static/usage/v8/config/mode/vue.md +++ b/static/usage/v8/config/mode/vue.md @@ -9,7 +9,7 @@ import { getMode } from '@ionic/core'; const mode = ref(''); - + const color = computed(() => (mode.value === 'ios' ? 'secondary' : 'tertiary')); const fill = computed(() => (mode.value === 'ios' ? 'outline' : 'solid')); From 10e159a5bb6f47a30bfa0dfec340ad4662a9a5b9 Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Tue, 8 Jul 2025 14:47:02 -0400 Subject: [PATCH 7/7] docs(config): update demo and js examples --- static/usage/v7/config/mode/demo.html | 34 ++++------------------- static/usage/v7/config/mode/javascript.md | 6 ++-- static/usage/v8/config/mode/demo.html | 6 ++-- static/usage/v8/config/mode/javascript.md | 7 ++--- 4 files changed, 14 insertions(+), 39 deletions(-) diff --git a/static/usage/v7/config/mode/demo.html b/static/usage/v7/config/mode/demo.html index 46bef3fa0d9..8762f394ba5 100644 --- a/static/usage/v7/config/mode/demo.html +++ b/static/usage/v7/config/mode/demo.html @@ -21,43 +21,21 @@ } -
- Show Current Mode -
+
diff --git a/static/usage/v7/config/mode/javascript.md b/static/usage/v7/config/mode/javascript.md index 106100c35d9..86b8b111d5f 100644 --- a/static/usage/v7/config/mode/javascript.md +++ b/static/usage/v7/config/mode/javascript.md @@ -1,13 +1,11 @@ ```html -Current mode: + diff --git a/static/usage/v8/config/mode/demo.html b/static/usage/v8/config/mode/demo.html index 08973e7ca15..8762f394ba5 100644 --- a/static/usage/v8/config/mode/demo.html +++ b/static/usage/v8/config/mode/demo.html @@ -25,15 +25,15 @@
- Current mode: +
diff --git a/static/usage/v8/config/mode/javascript.md b/static/usage/v8/config/mode/javascript.md index fe11af40fdc..86b8b111d5f 100644 --- a/static/usage/v8/config/mode/javascript.md +++ b/static/usage/v8/config/mode/javascript.md @@ -1,12 +1,11 @@ ```html -Current mode: + +