ionic-team · brandyscarney · May 4, 2023 · May 1, 2023 · May 1, 2023 · May 1, 2023
diff --git a/docs/angular/slides.md b/docs/angular/slides.md
@@ -75,7 +75,7 @@ If you would like to use the Core version instead, which does not include additi
 To migrate over your CSS, first update your selectors to target the new custom elements instead:
 
 | ion-slides Selector | Swiper Selector    |
-| ------------------- | ------------------ | 
+| ------------------- | ------------------ |
 | `ion-slides`        | `swiper-container` |
 | `ion-slide`         | `swiper-slide`     |
 
@@ -155,9 +155,7 @@ export class HomePage {
 ```html
 <!-- home.page.html -->
 
-<swiper-container [modules]="swiperModules">
-  ...
-</swiper-container>
+<swiper-container [modules]="swiperModules"> ... </swiper-container>
 ```
 
 :::note
@@ -190,11 +188,11 @@ To set these options as properties directly on `<swiper-container>` we would do
 
 Below is a full list of property changes when going from `ion-slides` to Swiper Element:
 
-| Name      | Notes                                                                                                                                   |
-| --------- | --------------------------------------------------------------------------------------------------------------------------------------- |
-| options   | Set each option as a property directly on the `<swiper-container>` component.                                                           |
-| mode      | For different styles based upon the mode, you can target the slides with `.ios swiper-container` or `.md swiper-container` in your CSS. |
-| pager     | Use the `pagination` property instead.                                                                                                  |
+| Name    | Notes                                                                                                                                   |
+| ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| options | Set each option as a property directly on the `<swiper-container>` component.                                                           |
+| mode    | For different styles based upon the mode, you can target the slides with `.ios swiper-container` or `.md swiper-container` in your CSS. |
+| pager   | Use the `pagination` property instead.                                                                                                  |
 
 :::note
 All properties available in Swiper Element can be found at <a href="https://swiperjs.com/swiper-api#parameters" target="_blank" rel="noopener noreferrer">https://swiperjs.com/swiper-api#parameters</a>.
@@ -306,9 +304,7 @@ All methods and properties available on the Swiper instance can be found at <a h
 Effects such as Cube or Fade can be used in Swiper Element with no additional imports, as long as you are using the bundled version of Swiper. For example, the below code will cause the slides to have a flip transition effect:
 
 ```html
-<swiper-container effect="flip">
-  ...
-</swiper-container>
+<swiper-container effect="flip"> ... </swiper-container>
 ```
 
 :::note

diff --git a/docs/cli/livereload.md b/docs/cli/livereload.md
@@ -64,8 +64,9 @@ Remember, with the `--external` option, others on your Wi-Fi network will be abl
 Live reload will use HTTP by default which will cause web APIs that require a secure context (like [web crypto](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API)) to fail. To establish a secure context you can use the `--ssl` argument to use HTTPS.
 
 For example, with an Angular application you can run the following to pass a certificate and private key and serve your app with HTTPS:
+
 ```shell
 ionic capacitor run android --livereload --external --ssl -- --ssl-cert='server.crt' --ssl-key='server.key'
 ```
 
-Using a self signed certificate and ensuring it is trusted by the device is a complicated topic and is covered in [this article](https://ionic.zendesk.com/hc/en-us/articles/11384425513623).
+Using a self signed certificate and ensuring it is trusted by the device is a complicated topic and is covered in [this article](https://ionic.zendesk.com/hc/en-us/articles/11384425513623).
diff --git a/docs/developing/config.md b/docs/developing/config.md
diff --git a/docs/developing/config/global/index.md b/docs/developing/config/global/index.md
@@ -17,10 +17,11 @@ import TabItem from '@theme/TabItem';
 window.Ionic = {
   config: {
     rippleEffect: false,
-    mode: 'md'
-  }
-}
+    mode: 'md',
+  },
+};
 ```
+
 </TabItem>
 <TabItem value="angular">
 
@@ -38,10 +39,12 @@ import { IonicModule } from '@ionic/angular';
   ...
 })
 ```
+
 </TabItem>
 <TabItem value="react">
 
 The `setupIonicReact` function must be called before rendering any Ionic components (including `IonApp`).
+
 ```tsx title="App.tsx"
 import { setupIonicReact } from '@ionic/react';
 
@@ -50,18 +53,19 @@ setupIonicReact({
   mode: 'md',
 });
 ```
+
 </TabItem>
 <TabItem value="vue">
 
 ```tsx title="main.ts"
-
 import { IonicVue } from '@ionic/vue';
 import { createApp } from 'vue';
- 
+
 createApp(App).use(IonicVue, {
   rippleEffect: false,
   mode: 'md',
 });
 ```
+
 </TabItem>
-</Tabs>
+</Tabs>
diff --git a/docs/developing/config/per-component/index.md b/docs/developing/config/per-component/index.md
@@ -19,9 +19,9 @@ import TabItem from '@theme/TabItem';
 window.Ionic = {
   config: {
     // Not recommended when your app requires reactive values
-    backButtonText: 'Go Back'
-  }
-}
+    backButtonText: 'Go Back',
+  },
+};
 ```
 
 **Recommended**
@@ -31,14 +31,15 @@ window.Ionic = {
 
 <script>
   const backButton = document.querySelector('ion-back-button');
-  
+
   /**
    * The back button text can be updated
    * anytime the locale changes.
    */
   backButton.text = 'Go Back';
 </script>
 ```
+
 </TabItem>
 <TabItem value="angular">
 
@@ -75,6 +76,7 @@ class MyComponent {
   backButtonText = 'Go Back';
 }
 ```
+
 </TabItem>
 <TabItem value="react">
 
@@ -85,7 +87,7 @@ import { setupIonicReact } from '@ionic/react';
 
 setupIonicReact({
   // Not recommended when your app requires reactive values
-  backButtonText: 'Go Back'
+  backButtonText: 'Go Back',
 });
 ```
 
@@ -106,6 +108,7 @@ const ExampleComponent = () => {
   )
 }
 ```
+
 </TabItem>
 <TabItem value="vue">
 
@@ -114,10 +117,10 @@ const ExampleComponent = () => {
 ```ts
 import { IonicVue } from '@ionic/vue';
 import { createApp } from 'vue';
- 
- // Not recommended when your app requires reactive values
+
+// Not recommended when your app requires reactive values
 createApp(App).use(IonicVue, {
-  backButtonText: 'Go Back'
+  backButtonText: 'Go Back',
 });
 ```
 
@@ -139,5 +142,6 @@ createApp(App).use(IonicVue, {
   const backButtonText = ref('Go Back');
 </script>
 ```
+
 </TabItem>
-</Tabs>
+</Tabs>
diff --git a/docs/developing/config/per-platform-fallback/index.md b/docs/developing/config/per-platform-fallback/index.md
@@ -34,6 +34,7 @@ const getConfig = () => {
   ...
 });
 ```
+
 </TabItem>
 <TabItem value="react">
 
@@ -43,18 +44,18 @@ import { isPlatform, setupIonicReact } from '@ionic/react';
 const getConfig = () => {
   if (isPlatform('hybrid')) {
     return {
-      tabButtonLayout: 'label-hide'
-    }
+      tabButtonLayout: 'label-hide',
+    };
   }
-  
+
   return {
-    tabButtonLayout: 'icon-top'
+    tabButtonLayout: 'icon-top',
   };
 };
 
 setupIonicReact(getConfig());
-
 ```
+
 </TabItem>
 <TabItem value="vue">
 
@@ -64,16 +65,17 @@ import { IonicVue, isPlatform } from '@ionic/vue';
 const getConfig = () => {
   if (isPlatform('hybrid')) {
     return {
-      tabButtonLayout: 'label-hide'
-    }
+      tabButtonLayout: 'label-hide',
+    };
   }
-  
+
   return {
-    tabButtonLayout: 'icon-top'
+    tabButtonLayout: 'icon-top',
   };
 };
 
 createApp(App).use(IonicVue, getConfig());
-````
+```
+
 </TabItem>
-</Tabs>
+</Tabs>
diff --git a/docs/developing/config/per-platform-overrides/index.md b/docs/developing/config/per-platform-overrides/index.md
@@ -37,6 +37,7 @@ const getConfig = () => {
   ...
 });
 ```
+
 </TabItem>
 <TabItem value="react">
 
@@ -59,8 +60,8 @@ const getConfig = () => {
 };
 
 setupIonicReact(getConfig());
-
 ```
+
 </TabItem>
 <TabItem value="vue">
 
@@ -83,6 +84,7 @@ const getConfig = () => {
 };
 
 createApp(App).use(IonicVue, getConfig());
-````
+```
+
 </TabItem>
-</Tabs>
+</Tabs>
diff --git a/docs/developing/config/per-platform/index.md b/docs/developing/config/per-platform/index.md
@@ -31,6 +31,7 @@ import { isPlatform, IonicModule } from '@ionic/angular';
   ...
 })
 ```
+
 </TabItem>
 <TabItem value="react">
 
@@ -45,6 +46,7 @@ setupIonicReact({
   animated: !isPlatform('mobileweb'),
 });
 ```
+
 </TabItem>
 <TabItem value="vue">
 
@@ -58,6 +60,7 @@ import { IonicVue, isPlatform } from '@ionic/vue';
 createApp(App).use(IonicVue, {
   animated: !isPlatform('mobileweb'),
 });
-````
+```
+
 </TabItem>
-</Tabs>
+</Tabs>
diff --git a/docs/developing/hardware-back-button.md b/docs/developing/hardware-back-button.md
@@ -338,8 +338,8 @@ It is recommended to check whether or not the user is on the root page prior to
 
 The table below lists all of the internal hardware back button event handlers that Ionic Framework uses. The `Propagates` column notes whether or not that particular handler tells Ionic Framework to call the next back button handler.
 
-| Handler    | Priority | Propagates | Description                                                                                                                              |
-| ---------- | -------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| Handler    | Priority | Propagates | Description                                                                                                                 |
+| ---------- | -------- | ---------- | --------------------------------------------------------------------------------------------------------------------------- |
 | Overlays   | 100      | No         | Applies to overlay components `ion-action-sheet`, `ion-alert`, `ion-loading`, `ion-modal`, `ion-popover`, and `ion-picker`. |
-| Menu       | 99       | No         | Applies to `ion-menu`.                                                                                                                   |
-| Navigation | 0        | Yes        | Applies to routing navigation (i.e. Angular Routing).                                                                                    |
+| Menu       | 99       | No         | Applies to `ion-menu`.                                                                                                      |
+| Navigation | 0        | Yes        | Applies to routing navigation (i.e. Angular Routing).                                                                       |
diff --git a/docs/layout/css-utilities.md b/docs/layout/css-utilities.md
@@ -141,8 +141,7 @@ The float CSS property specifies that an element should be placed along the left
         src="https://ionicframework.com/docs/img/demos/avatar.svg"
         height="50px"
       />
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac
-      vehicula lorem.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
     </ion-col>
     <ion-col>
       <h3>float-left</h3>
@@ -152,8 +151,7 @@ The float CSS property specifies that an element should be placed along the left
         height="50px"
         class="ion-float-left"
       />
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac
-      vehicula lorem.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
     </ion-col>
     <ion-col>
       <h3>float-right</h3>
@@ -163,8 +161,7 @@ The float CSS property specifies that an element should be placed along the left
         height="50px"
         class="ion-float-right"
       />
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac
-      vehicula lorem.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
     </ion-col>
   </ion-row>
 </ion-grid>

diff --git a/docs/layout/structure.md b/docs/layout/structure.md
@@ -34,17 +34,14 @@ import Footer from '@site/static/usage/v7/footer/basic/index.md';
 
 <Footer />
 
-
 ## Tabs Layout
 
 A layout consisting of horizontal [tabs](../api/tabs.md) can be used to let the user quickly change between content views. Each tab can contain static content or a navigation stack by using a [router outlet](../api/router-outlet.md) or [nav](../api/nav.md).
 
-
 import Tabs from '@site/static/usage/v7/tabs/router/index.md';
 
 <Tabs />
 
-
 ## Menu Layout
 
 A standard layout among mobile apps includes the ability to toggle a side [menu](../api/menu.md) by clicking a button or swiping it open from the side. Side menus are generally used for navigation, but they can contain any content.
@@ -53,7 +50,6 @@ import Menu from '@site/static/usage/v7/menu/basic/index.md';
 
 <Menu />
 
-
 ## Split Pane Layout
 
 A [split pane](../api/split-pane.md) layout has a more complex structure because it can combine the previous layouts. It allows for multiple views to be displayed when the viewport is above a specified breakpoint. If the device's screen size is below a certain size, the split pane view will be hidden.

diff --git a/docs/native-faq.md b/docs/native-faq.md
@@ -5,9 +5,9 @@ slug: /native/faq
 
 # Frequently Asked Question
 
-## What is Capacitor? 
+## What is Capacitor?
 
-Capacitor a native runtime built by the Ionic team that offers web developers the ability to deploy their web apps to a native device. Capacitor also exposing native device capabilities through JavaScript so developers could access features like native location services, filesystem access, or notifications as if they are interacting with any other JavaScript library. 
+Capacitor a native runtime built by the Ionic team that offers web developers the ability to deploy their web apps to a native device. Capacitor also exposing native device capabilities through JavaScript so developers could access features like native location services, filesystem access, or notifications as if they are interacting with any other JavaScript library.
 
 ## Permission Issues
 
@@ -17,9 +17,8 @@ If you're using a plugin, it may require adding additional permissions to your n
 - `NSPhotoLibraryAddUsageDescription` (`Privacy - Photo Library Additions Usage Description`)
 - `NSPhotoLibraryUsageDescription` (`Privacy - Photo Library Usage Description`)
 
-You need to manually add those permissions to the `info.plist` in your native project. Otherwise, calls to the native camera API will fail. 
-
+You need to manually add those permissions to the `info.plist` in your native project. Otherwise, calls to the native camera API will fail.
 
 ## Unexpected behaviour
 
-If for some reason the plugin does not behave in a way that is unexpected, please [open an issue on our github repo](https://github.com/ionic-team/capacitor-plugins)! Providing a clear issue report along with a reproduction can help get your issue resolved.
+If for some reason the plugin does not behave in a way that is unexpected, please [open an issue on our github repo](https://github.com/ionic-team/capacitor-plugins)! Providing a clear issue report along with a reproduction can help get your issue resolved.