From 3e7664f8f7cf7eb4495e12ec0b1f00b2e6a2a38a Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 14 May 2020 16:17:58 -0400 Subject: [PATCH 1/9] add base config custom docs --- src/pages/angular/config.md | 101 ++++++++++++++++++++++++++++++++-- src/pages/angular/platform.md | 31 ++++++----- src/pages/react/config.md | 69 +++++++++++++++++++++++ src/pages/react/platform.md | 21 +++++++ 4 files changed, 202 insertions(+), 20 deletions(-) diff --git a/src/pages/angular/config.md b/src/pages/angular/config.md index 23a033e1d78..bd4f967dfc1 100755 --- a/src/pages/angular/config.md +++ b/src/pages/angular/config.md @@ -12,9 +12,7 @@ contributors: Ionic Config provides a way to change the properties of components globally across an app. It can set the app mode, tab button layout, animations, and more. -## Usage - -### Global +## Global Config To override the initial Ionic config for the app, provide a config in `IonicModule.forRoot` in the `app.module.ts` file. @@ -38,12 +36,12 @@ import { IonicModule } from '@ionic/angular'; In the above example, we are disabling the Material Design ripple effect across the app, as well as forcing the mode to be Material Design. -### By Component +## Per-Component Config Ionic Config is not reactive, so it is recommended to use a component's properties when you want to override its default behavior rather than set its config globally. ```typescript -import { createAnimation, IonicModule } from '@ionic/angular'; +import { IonicModule } from '@ionic/angular'; @NgModule({ ... @@ -66,6 +64,99 @@ This will set the default text for `ion-back-button` to `Go Back`. However, if y In this example we have used our `ion-back-button` in such a way that the text can be dynamically updated if there were to be a change that warranted it, such as a language or locale change. The `getBackButtonText` method would be responsible for returning the correct text. +## Per-Platform Config + +Ionic Config can also be set on a per-platform basis. For example, this allows you to disable animations if the app is being run in a browser on a potentially slower device. Developers can take advantage of the Platform utilities to accomplish this. + +Since the config is set at runtime, you will not have access to the Platform Dependency Injection. Instead, you can use the underlying functions that it uses directly. + +```typescript +import { getPlatforms, IonicModule } from '@ionic/angular'; + +const platforms = (typeof (window as any) !== 'undefined') ? getPlatforms(window) : []; + +@NgModule({ + ... + imports: [ + BrowserModule, + IonicModule.forRoot({ + animated: !platforms.includes('mobileweb') + }), + AppRoutingModule + ], + ... +}) +``` + +The `getPlatforms(window)` call returns an array of platform strings. See the [Platform Documentation](./platform#platforms) for a list of possible values. + +In the example above, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser. + +> The `typeof (window as any) !== 'undefined'` check is needed to ensure that your application does not crash when using Server Side Rendering (SSR). If you are not using SSR you can safely remove this check. + +```typescript +import { getPlatforms, IonicModule } from '@ionic/angular'; + +const platforms = (typeof (window as any) !== 'undefined') ? getPlatforms(window) : []; +const getConfig = () => { + + // If running in Capacitor/Cordova + if (platforms.includes('hybrid')) { + return { + backButtonText: 'Previous', + tabButtonLayout: 'label-hide' + } + } + + // If not Capacitor/Cordova + return { + menuIcon: 'ellipsis-vertical' + } +} +@NgModule({ + ... + imports: [ + BrowserModule, + IonicModule.forRoot(getConfig()), + AppRoutingModule + ], + ... +}) +``` + +This example allows you to set an entirely different configuration based upon the platform, falling back to a default config if no platforms match. + +```typescript +import { getPlatforms, IonicModule } from '@ionic/angular'; + +const platforms = (typeof (window as any) !== 'undefined') ? getPlatforms(window) : []; +const getConfig = () => { + let config = { + animated: false + }; + + // If running on an iPhone + if (platforms.includes('iphone')) { + config = { + backButtonText: 'Previous', + ...config + } + } + + return config; +} +@NgModule({ + ... + imports: [ + BrowserModule, + IonicModule.forRoot(getConfig()), + AppRoutingModule + ], + ... +}) +``` + +This example allows you to accumulate a config object based upon different platform requirements. ## Config Options diff --git a/src/pages/angular/platform.md b/src/pages/angular/platform.md index 9785d065931..25b77340cff 100755 --- a/src/pages/angular/platform.md +++ b/src/pages/angular/platform.md @@ -41,21 +41,22 @@ Depending on the platform the user is on, `is(platformName)` will return true or Below is a table listing all the possible `Platforms` values along with corresponding descriptions. -| Platform Name | Description | -|---------------|---------------------------------------| -| android | a device running Android | -| capacitor | a device running Capacitor | -| cordova | a device running Cordova | -| desktop | a desktop device | -| electron | a desktop device running Electron | -| hybrid | a device running Capacitor or Cordova | -| ios | a device running iOS | -| ipad | an iPad device | -| iphone | an iPhone device | -| mobile | a mobile device | -| phablet | a phablet device | -| pwa | a PWA app | -| tablet | a tablet device | +| Platform Name | Description | +|---------------|------------------------------------------| +| android | a device running Android | +| capacitor | a device running Capacitor | +| cordova | a device running Cordova | +| desktop | a desktop device | +| electron | a desktop device running Electron | +| hybrid | a device running Capacitor or Cordova | +| ios | a device running iOS | +| ipad | an iPad device | +| iphone | an iPhone device | +| mobile | a mobile device | +| mobileweb | a device running in a mobile web browser | +| phablet | a phablet device | +| pwa | a PWA app | +| tablet | a tablet device | ### `platforms() => string[]` diff --git a/src/pages/react/config.md b/src/pages/react/config.md index 395724c5e05..52788c46692 100644 --- a/src/pages/react/config.md +++ b/src/pages/react/config.md @@ -26,6 +26,75 @@ setupConfig({ In the above example, we are disabling the Material Design ripple effect across the app, as well as forcing the mode to be Material Design. +## Per-Platform Config + +Ionic Config can also be set on a per-platform basis. For example, this allows you to disable animations if the app is being run in a browser on a potentially slower device. Developers can take advantage of the Platform utilities to accomplish this. + +```typescript +import { getPlatforms, setupConfig } from '@ionic/react'; + +const platforms = (typeof (window as any) !== 'undefined') ? getPlatforms(window) : []; + +setupConfig({ + animated: !platforms.includes('mobileweb') +}); +``` + +The `getPlatforms(window)` call returns an array of platform strings. See the [Platform Documentation](./platform#platforms) for a list of possible values. + +In the example above, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser. + +> The `typeof (window as any) !== 'undefined'` check is needed to ensure that your application does not crash when using Server Side Rendering (SSR). If you are not using SSR you can safely remove this check. + +```typescript +import { getPlatforms, setupConfig } from '@ionic/react'; + +const platforms = (typeof (window as any) !== 'undefined') ? getPlatforms(window) : []; +const getConfig = () => { + + // If running in Capacitor/Cordova + if (platforms.includes('hybrid')) { + return { + backButtonText: 'Previous', + tabButtonLayout: 'label-hide' + } + } + + // If not Capacitor/Cordova + return { + menuIcon: 'ellipsis-vertical' + } +} + +setupConfig(getConfig()); +``` + +This example allows you to set an entirely different configuration based upon the platform, falling back to a default config if no platforms match. + +```typescript +import { getPlatforms, setupConfig } from '@ionic/react'; + +const platforms = (typeof (window as any) !== 'undefined') ? getPlatforms(window) : []; +const getConfig = () => { + let config = { + animated: false + }; + + // If running on an iPhone + if (platforms.includes('iphone')) { + config = { + backButtonText: 'Previous', + ...config + } + } + + return config; +} +setupConfig(getConfig()); +``` + +This example allows you to accumulate a config object based upon different platform requirements. + ## Config Options Below is a list of config options that Ionic uses. diff --git a/src/pages/react/platform.md b/src/pages/react/platform.md index 9f1e7f2e0a5..3712aab6bdd 100644 --- a/src/pages/react/platform.md +++ b/src/pages/react/platform.md @@ -30,3 +30,24 @@ getPlatforms(); // returns ["iphone", "ios", "mobile", "mobileweb"] from an iPho ``` Depending on what device you are on, `getPlatforms` can return multiple values. Each possible value is a hierarchy of platforms. For example, on an iPhone, it would return mobile, ios, and iphone. + +## Platforms + +Below is a table listing all the possible `Platforms` values along with corresponding descriptions. + +| Platform Name | Description | +|---------------|------------------------------------------| +| android | a device running Android | +| capacitor | a device running Capacitor | +| cordova | a device running Cordova | +| desktop | a desktop device | +| electron | a desktop device running Electron | +| hybrid | a device running Capacitor or Cordova | +| ios | a device running iOS | +| ipad | an iPad device | +| iphone | an iPhone device | +| mobile | a mobile device | +| mobileweb | a device running in a mobile web browser | +| phablet | a phablet device | +| pwa | a PWA app | +| tablet | a tablet device | From 13d150a1f506eae0d887971d7b4800e9a1c5abe3 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 15 May 2020 10:56:48 -0400 Subject: [PATCH 2/9] one change --- src/pages/react/platform.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/react/platform.md b/src/pages/react/platform.md index 3712aab6bdd..7353d646a29 100644 --- a/src/pages/react/platform.md +++ b/src/pages/react/platform.md @@ -47,7 +47,7 @@ Below is a table listing all the possible `Platforms` values along with correspo | ipad | an iPad device | | iphone | an iPhone device | | mobile | a mobile device | -| mobileweb | a device running in a mobile web browser | +| mobileweb | a web browser running in a mobile device | | phablet | a phablet device | | pwa | a PWA app | | tablet | a tablet device | From 13ecd64d5d032e0649379f668210e139f4721e40 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 15 May 2020 11:45:33 -0400 Subject: [PATCH 3/9] update usage examples --- src/pages/angular/config.md | 23 +++++++---------------- src/pages/react/config.md | 23 +++++++---------------- 2 files changed, 14 insertions(+), 32 deletions(-) diff --git a/src/pages/angular/config.md b/src/pages/angular/config.md index bd4f967dfc1..5b4bde98eb2 100755 --- a/src/pages/angular/config.md +++ b/src/pages/angular/config.md @@ -71,16 +71,14 @@ Ionic Config can also be set on a per-platform basis. For example, this allows y Since the config is set at runtime, you will not have access to the Platform Dependency Injection. Instead, you can use the underlying functions that it uses directly. ```typescript -import { getPlatforms, IonicModule } from '@ionic/angular'; - -const platforms = (typeof (window as any) !== 'undefined') ? getPlatforms(window) : []; +import { isPlatform, IonicModule } from '@ionic/angular'; @NgModule({ ... imports: [ BrowserModule, IonicModule.forRoot({ - animated: !platforms.includes('mobileweb') + animated: !isPlatform('mobileweb') }), AppRoutingModule ], @@ -88,27 +86,21 @@ const platforms = (typeof (window as any) !== 'undefined') ? getPlatforms(window }) ``` -The `getPlatforms(window)` call returns an array of platform strings. See the [Platform Documentation](./platform#platforms) for a list of possible values. +The `isPlatform()` call returns `true` or `false` based upon the platform that is based in. See the [Platform Documentation](./platform#platforms) for a list of possible values. In the example above, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser. -> The `typeof (window as any) !== 'undefined'` check is needed to ensure that your application does not crash when using Server Side Rendering (SSR). If you are not using SSR you can safely remove this check. - ```typescript -import { getPlatforms, IonicModule } from '@ionic/angular'; +import { isPlatform, IonicModule } from '@ionic/angular'; -const platforms = (typeof (window as any) !== 'undefined') ? getPlatforms(window) : []; const getConfig = () => { - - // If running in Capacitor/Cordova - if (platforms.includes('hybrid')) { + if (isPlatform('hybrid')) { return { backButtonText: 'Previous', tabButtonLayout: 'label-hide' } } - // If not Capacitor/Cordova return { menuIcon: 'ellipsis-vertical' } @@ -127,16 +119,15 @@ const getConfig = () => { This example allows you to set an entirely different configuration based upon the platform, falling back to a default config if no platforms match. ```typescript -import { getPlatforms, IonicModule } from '@ionic/angular'; +import { isPlatform, IonicModule } from '@ionic/angular'; -const platforms = (typeof (window as any) !== 'undefined') ? getPlatforms(window) : []; const getConfig = () => { let config = { animated: false }; // If running on an iPhone - if (platforms.includes('iphone')) { + if (isPlatform('iphone')) { config = { backButtonText: 'Previous', ...config diff --git a/src/pages/react/config.md b/src/pages/react/config.md index 52788c46692..97c300a95de 100644 --- a/src/pages/react/config.md +++ b/src/pages/react/config.md @@ -31,36 +31,28 @@ In the above example, we are disabling the Material Design ripple effect across Ionic Config can also be set on a per-platform basis. For example, this allows you to disable animations if the app is being run in a browser on a potentially slower device. Developers can take advantage of the Platform utilities to accomplish this. ```typescript -import { getPlatforms, setupConfig } from '@ionic/react'; - -const platforms = (typeof (window as any) !== 'undefined') ? getPlatforms(window) : []; +import { isPlatform, setupConfig } from '@ionic/react'; setupConfig({ - animated: !platforms.includes('mobileweb') + animated: !isPlatform('mobileweb') }); ``` -The `getPlatforms(window)` call returns an array of platform strings. See the [Platform Documentation](./platform#platforms) for a list of possible values. +The `isPlatform()` call returns `true` or `false` based upon the platform that is based in. See the [Platform Documentation](./platform#platforms) for a list of possible values. In the example above, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser. -> The `typeof (window as any) !== 'undefined'` check is needed to ensure that your application does not crash when using Server Side Rendering (SSR). If you are not using SSR you can safely remove this check. - ```typescript -import { getPlatforms, setupConfig } from '@ionic/react'; +import { isPlatform, setupConfig } from '@ionic/react'; -const platforms = (typeof (window as any) !== 'undefined') ? getPlatforms(window) : []; const getConfig = () => { - - // If running in Capacitor/Cordova - if (platforms.includes('hybrid')) { + if (isPlatform('hybrid')) { return { backButtonText: 'Previous', tabButtonLayout: 'label-hide' } } - // If not Capacitor/Cordova return { menuIcon: 'ellipsis-vertical' } @@ -72,16 +64,15 @@ setupConfig(getConfig()); This example allows you to set an entirely different configuration based upon the platform, falling back to a default config if no platforms match. ```typescript -import { getPlatforms, setupConfig } from '@ionic/react'; +import { isPlatform, setupConfig } from '@ionic/react'; -const platforms = (typeof (window as any) !== 'undefined') ? getPlatforms(window) : []; const getConfig = () => { let config = { animated: false }; // If running on an iPhone - if (platforms.includes('iphone')) { + if (isPlatform('iphone')) { config = { backButtonText: 'Previous', ...config From 38c4b54c2d8a57b1824bc37e7e2413d93c9fafb3 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 15 May 2020 12:51:26 -0400 Subject: [PATCH 4/9] change platform utils to platform, make a few changes --- src/assets/locales/en/messages.json | 2 +- src/pages/angular/config.md | 14 +++++++------- src/pages/react/config.md | 13 +++++++------ src/pages/react/platform.md | 2 +- 4 files changed, 16 insertions(+), 15 deletions(-) diff --git a/src/assets/locales/en/messages.json b/src/assets/locales/en/messages.json index 63c2aa7fce7..75ab21f0d46 100644 --- a/src/assets/locales/en/messages.json +++ b/src/assets/locales/en/messages.json @@ -78,7 +78,7 @@ "menu-react-lifecycle": "Lifecycle", "menu-react-navigation": "Navigation/Routing", "menu-react-config": "Config", - "menu-react-platform": "Platform Utils", + "menu-react-platform": "Platform", "menu-react-pwa": "Progressive Web Apps", "menu-react-testing": "Testing", diff --git a/src/pages/angular/config.md b/src/pages/angular/config.md index 5b4bde98eb2..133e38a559e 100755 --- a/src/pages/angular/config.md +++ b/src/pages/angular/config.md @@ -68,7 +68,11 @@ In this example we have used our `ion-back-button` in such a way that the text c Ionic Config can also be set on a per-platform basis. For example, this allows you to disable animations if the app is being run in a browser on a potentially slower device. Developers can take advantage of the Platform utilities to accomplish this. -Since the config is set at runtime, you will not have access to the Platform Dependency Injection. Instead, you can use the underlying functions that it uses directly. +Since the config is set at runtime, you will not have access to the Platform Dependency Injection. Instead, you can use the underlying functions that the provider uses directly. + +In the following example, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser. +The `isPlatform()` call returns `true` or `false` based upon the platform that is passed in. See the [Platform Documentation](./platform#platforms) for a list of possible values. + ```typescript import { isPlatform, IonicModule } from '@ionic/angular'; @@ -86,9 +90,7 @@ import { isPlatform, IonicModule } from '@ionic/angular'; }) ``` -The `isPlatform()` call returns `true` or `false` based upon the platform that is based in. See the [Platform Documentation](./platform#platforms) for a list of possible values. - -In the example above, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser. +The next example allows you to set an entirely different configuration based upon the platform, falling back to a default config if no platforms match: ```typescript import { isPlatform, IonicModule } from '@ionic/angular'; @@ -116,7 +118,7 @@ const getConfig = () => { }) ``` -This example allows you to set an entirely different configuration based upon the platform, falling back to a default config if no platforms match. +Finally, this example allows you to accumulate a config object based upon different platform requirements: ```typescript import { isPlatform, IonicModule } from '@ionic/angular'; @@ -147,8 +149,6 @@ const getConfig = () => { }) ``` -This example allows you to accumulate a config object based upon different platform requirements. - ## Config Options Below is a list of config options that Ionic uses. diff --git a/src/pages/react/config.md b/src/pages/react/config.md index 97c300a95de..a2dd862dac9 100644 --- a/src/pages/react/config.md +++ b/src/pages/react/config.md @@ -30,6 +30,10 @@ In the above example, we are disabling the Material Design ripple effect across Ionic Config can also be set on a per-platform basis. For example, this allows you to disable animations if the app is being run in a browser on a potentially slower device. Developers can take advantage of the Platform utilities to accomplish this. +In the following example, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser. +The `isPlatform()` call returns `true` or `false` based upon the platform that is passed in. See the [Platform Documentation](./platform#platforms) for a list of possible values. + + ```typescript import { isPlatform, setupConfig } from '@ionic/react'; @@ -38,9 +42,7 @@ setupConfig({ }); ``` -The `isPlatform()` call returns `true` or `false` based upon the platform that is based in. See the [Platform Documentation](./platform#platforms) for a list of possible values. - -In the example above, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser. +The next example allows you to set an entirely different configuration based upon the platform, falling back to a default config if no platforms match: ```typescript import { isPlatform, setupConfig } from '@ionic/react'; @@ -61,7 +63,8 @@ const getConfig = () => { setupConfig(getConfig()); ``` -This example allows you to set an entirely different configuration based upon the platform, falling back to a default config if no platforms match. +Finally, this example allows you to accumulate a config object based upon different platform requirements: + ```typescript import { isPlatform, setupConfig } from '@ionic/react'; @@ -84,8 +87,6 @@ const getConfig = () => { setupConfig(getConfig()); ``` -This example allows you to accumulate a config object based upon different platform requirements. - ## Config Options Below is a list of config options that Ionic uses. diff --git a/src/pages/react/platform.md b/src/pages/react/platform.md index 7353d646a29..8d7c404f41b 100644 --- a/src/pages/react/platform.md +++ b/src/pages/react/platform.md @@ -5,7 +5,7 @@ nextText: 'Progressive Web Apps in React' nextUrl: '/docs/react/pwa' --- -# Platform Utils +# Platform ## isPlatform From 96b97fa3898f3e2b96d87a4bfe2db78dee9a5e36 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 18 May 2020 13:10:00 -0400 Subject: [PATCH 5/9] remove unneeded comment --- src/pages/angular/config.md | 1 - src/pages/react/config.md | 1 - 2 files changed, 2 deletions(-) diff --git a/src/pages/angular/config.md b/src/pages/angular/config.md index 133e38a559e..6b220b55851 100755 --- a/src/pages/angular/config.md +++ b/src/pages/angular/config.md @@ -128,7 +128,6 @@ const getConfig = () => { animated: false }; - // If running on an iPhone if (isPlatform('iphone')) { config = { backButtonText: 'Previous', diff --git a/src/pages/react/config.md b/src/pages/react/config.md index a2dd862dac9..db7f686ce1c 100644 --- a/src/pages/react/config.md +++ b/src/pages/react/config.md @@ -74,7 +74,6 @@ const getConfig = () => { animated: false }; - // If running on an iPhone if (isPlatform('iphone')) { config = { backButtonText: 'Previous', From d6549c0bb14132ad9cfe4c603350af957174553a Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 20 May 2020 13:09:02 -0400 Subject: [PATCH 6/9] Update src/pages/angular/config.md Co-authored-by: Brandy Carney --- src/pages/angular/config.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/angular/config.md b/src/pages/angular/config.md index 6b220b55851..25b41e5892c 100755 --- a/src/pages/angular/config.md +++ b/src/pages/angular/config.md @@ -130,8 +130,8 @@ const getConfig = () => { if (isPlatform('iphone')) { config = { - backButtonText: 'Previous', - ...config + ...config, + backButtonText: 'Previous' } } @@ -184,4 +184,4 @@ Below is a list of config options that Ionic uses. | `swipeBackEnabled` | `boolean` | If `true`, Ionic will enable the "swipe-to-go-back" gesture across the application. | `tabButtonLayout` | `TabButtonLayout` | Overrides the default "layout" of all `ion-bar-button` across the whole application. | `toastEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-toast`, overriding the default "animation". -| `toastLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-toast`, overriding the default "animation". \ No newline at end of file +| `toastLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-toast`, overriding the default "animation". From 315a5e9ccad789ca6643687823866fe8244fbf4c Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 20 May 2020 13:09:21 -0400 Subject: [PATCH 7/9] Update src/pages/react/config.md Co-authored-by: Brandy Carney --- src/pages/react/config.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/react/config.md b/src/pages/react/config.md index db7f686ce1c..e2aed70623b 100644 --- a/src/pages/react/config.md +++ b/src/pages/react/config.md @@ -76,8 +76,8 @@ const getConfig = () => { if (isPlatform('iphone')) { config = { - backButtonText: 'Previous', - ...config + ...config, + backButtonText: 'Previous' } } @@ -122,4 +122,4 @@ Below is a list of config options that Ionic uses. | `swipeBackEnabled` | `boolean` | If `true`, Ionic will enable the "swipe-to-go-back" gesture across the application. | `tabButtonLayout` | `TabButtonLayout` | Overrides the default "layout" of all `ion-bar-button` across the whole application. | `toastEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-toast`, overriding the default "animation". -| `toastLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-toast`, overriding the default "animation". \ No newline at end of file +| `toastLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-toast`, overriding the default "animation". From 9ea79441ecd8880ae8c63c4d954ddc8ff25d55d3 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 20 May 2020 13:20:41 -0400 Subject: [PATCH 8/9] make a few changes --- src/pages/react/config.md | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/pages/react/config.md b/src/pages/react/config.md index e2aed70623b..09f87dae98b 100644 --- a/src/pages/react/config.md +++ b/src/pages/react/config.md @@ -9,19 +9,15 @@ nextUrl: '/docs/react/platform' Ionic Config provides a way to change the properties of components globally across an app. It can set the app mode, tab button layout, animations, and more. -## Usage +## Global Config -To override the initial Ionic config for the app, import the `setupConfig` method from `@ionic/react` and call it before you render any Ionic components: +To override the initial Ionic config for the app, import the `setupConfig` method from `@ionic/react`, and call it before you render any Ionic components (including `IonApp`). ```typescript setupConfig({ rippleEffect: false, mode: 'md' }); - - - // more components - ``` In the above example, we are disabling the Material Design ripple effect across the app, as well as forcing the mode to be Material Design. From f7156c38ae5853dd2a9f47015fed7f08874dc724 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 22 May 2020 09:14:59 -0400 Subject: [PATCH 9/9] update text --- src/pages/angular/platform.md | 2 +- src/pages/react/platform.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/angular/platform.md b/src/pages/angular/platform.md index 09ca9acab97..1df71a7d108 100755 --- a/src/pages/angular/platform.md +++ b/src/pages/angular/platform.md @@ -39,7 +39,7 @@ Depending on the platform the user is on, `is(platformName)` will return true or #### Platforms -Below is a table listing all the possible `Platforms` values along with corresponding descriptions. +Below is a table listing all the possible platform values along with corresponding descriptions. | Platform Name | Description | | ------------- | ------------------------------------- | diff --git a/src/pages/react/platform.md b/src/pages/react/platform.md index 8d7c404f41b..819d047a741 100644 --- a/src/pages/react/platform.md +++ b/src/pages/react/platform.md @@ -33,7 +33,7 @@ Depending on what device you are on, `getPlatforms` can return multiple values. ## Platforms -Below is a table listing all the possible `Platforms` values along with corresponding descriptions. +Below is a table listing all the possible platform values along with corresponding descriptions. | Platform Name | Description | |---------------|------------------------------------------|