diff --git a/docs/angular/lifecycle.md b/docs/angular/lifecycle.md
index 0f981e64dc3..21d40f06104 100644
--- a/docs/angular/lifecycle.md
+++ b/docs/angular/lifecycle.md
@@ -13,7 +13,7 @@ sidebar_label: Lifecycle
This guide covers how the page life cycle works in an app built with Ionic and Angular.
-
+
## Angular Life Cycle Events
@@ -47,7 +47,7 @@ The difference between `ionViewWillEnter` and `ionViewDidEnter` is when they fir
For `ionViewWillLeave` and `ionViewDidLeave`, `ionViewWillLeave` gets called directly before the transition away from the current page begins, and `ionViewDidLeave` does not get called until after the new page gets successfully transitioned into (after the new pages `ionViewDidEnter` fires).
-
+
## How Ionic Handles the Life of a Page
diff --git a/docs/angular/your-first-app.md b/docs/angular/your-first-app.md
index b876e2f66c4..739a9c3d29b 100644
--- a/docs/angular/your-first-app.md
+++ b/docs/angular/your-first-app.md
@@ -132,7 +132,7 @@ And voilà! Your Ionic app is now running in a web browser. Most of your app can
There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately!
-
+
Open the photo-gallery app folder in your code editor of choice, then navigate to `/src/app/tab2/tab2.page.html`. We see:
diff --git a/docs/angular/your-first-app/2-taking-photos.md b/docs/angular/your-first-app/2-taking-photos.md
index 2c94527390e..0e0cd078a70 100644
--- a/docs/angular/your-first-app/2-taking-photos.md
+++ b/docs/angular/your-first-app/2-taking-photos.md
@@ -70,7 +70,7 @@ Then, open `tab2.page.html` and call the `addPhotoToGallery()` function when the
Save the file, and if it's not running already, restart the development server in your browser by running `ionic serve`. On the Photo Gallery tab, click the Camera button. If your computer has a webcam of any sort, a modal window appears. Take a selfie!
-
+
_(Your selfie is probably much better than mine)_
diff --git a/docs/angular/your-first-app/6-deploying-mobile.md b/docs/angular/your-first-app/6-deploying-mobile.md
index e30d8acd79d..e9637084b7b 100644
--- a/docs/angular/your-first-app/6-deploying-mobile.md
+++ b/docs/angular/your-first-app/6-deploying-mobile.md
@@ -60,7 +60,7 @@ ionic cap open ios
In order for some native plugins to work, user permissions must be configured. In our photo gallery app, this includes the Camera plugin: iOS displays a modal dialog automatically after the first time that `Camera.getPhoto()` is called, prompting the user to allow the app to use the Camera. The permission that drives this is labeled “Privacy - Camera Usage.” To set it, the `Info.plist` file must be modified ([more details here](https://capacitorjs.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties."
-
+
Each setting in `Info.plist` has a low-level parameter name and a high-level name. By default, the property list editor shows the high-level names, but it's often useful to switch to showing the raw, low-level names. To do this, right-click anywhere in the property list editor and toggle "Raw Keys/Values."
@@ -70,15 +70,15 @@ Follow the same process to add the other two Keys required of the Camera plugin:
Next, click on `App` in the Project Navigator on the left-hand side, then within the `Signing & Capabilities` section, select your Development Team.
-
+
With permissions in place and Development Team selected, we are ready to try out the app on a real device! Connect an iOS device to your Mac computer, select it (`App -> Matthew’s iPhone` for me) then click the "Build" button to build, install, and launch the app on your device:
-
+
Upon tapping the Camera button on the Photo Gallery tab, the permission prompt will display. Tap OK, then take a picture with the Camera. Afterward, the photo shows in the app!
-
+
## Android Deployment
@@ -92,7 +92,7 @@ ionic cap open android
Similar to iOS, we must enable the correct permissions to use the Camera. Configure these in the `AndroidManifest.xml` file. Android Studio will likely open this file automatically, but in case it doesn't, locate it under `android/app/src/main/`.
-
+
Scroll to the `Permissions` section and ensure these entries are included:
@@ -103,11 +103,11 @@ Scroll to the `Permissions` section and ensure these entries are included:
Save the file. With permissions in place, we are ready to try out the app on a real device! Connect an Android device to your computer. Within Android Studio, click the "Run" button, select the attached Android device, then click OK to build, install, and launch the app on your device.
-
+
Once again, upon tapping the Camera button on the Photo Gallery tab, the permission prompt should be displayed. Tap OK, then take a picture with the Camera. Afterward, the photo should appear in the app.
-
+
Our Photo Gallery app has just been deployed to Android and iOS devices. 🎉
diff --git a/docs/core-concepts/webview.md b/docs/core-concepts/webview.md
index a314d09f566..359ead6fae3 100644
--- a/docs/core-concepts/webview.md
+++ b/docs/core-concepts/webview.md
@@ -22,7 +22,7 @@ Ionic apps are built using [web technologies](../reference/glossary.md#web-stand
Modern Web Views offer many built-in HTML5 APIs for hardware functionality such as cameras, sensors, GPS, speakers, and Bluetooth, but sometimes it may also be necessary to access platform-specific hardware APIs. In Ionic apps, hardware APIs can be accessed through a bridge layer, typically by using native plugins which expose JavaScript APIs.
-
+
The Ionic Web View plugin is specialized for modern JavaScript apps. For both iOS and Android, app files are always hosted using the `http://` protocol with an optimized HTTP server that runs on the local device.
diff --git a/docs/deployment/play-store.mdx b/docs/deployment/play-store.mdx
index f871fe34963..ce2dd35317e 100644
--- a/docs/deployment/play-store.mdx
+++ b/docs/deployment/play-store.mdx
@@ -69,15 +69,15 @@ If you haven't made the switch to Android app bundles yet, you will need to opt
First, create a new app in the Google Play Console. In order to enable app signing, you'll need to navigate to the new release screen, on one of the Production, Open testing, closed testing, or internal testing pages.
Select the Create new release button as seen below (it doesn't matter which release type, since you don't have to actually go through with creating a new release right now):
-
+
Under the App integrity section, click the **Change app signing key** button:
-
+
Next, select the **Export and upload a key from Java Keystore** option. This is the only way in which you can retain the key and have Google Play use it for signing. If you're using Appflow to build Android apps in the cloud, this is also the required option so you can upload the keystore file to Appflow.
-
+
Follow the instructions on the screen to generate the Keystore and you can use the same Keystore file to sign your app in the Appflow dashboard as well. If you need any help generating the Keystore file, you can refer to our docs [here](https://ionic.io/docs/appflow/package/credentials#android-certificates).
Once the generated zip file has been uploaded, you're all set! Build an AAB binary signed with the keystore file then upload it to Google Play.
@@ -88,7 +88,7 @@ As of now, existing apps aren't required to use the AAB format, but you can stil
To opt into app signing, you'll need to upload the app signing key used to sign previous releases of the app. Navigate to Setup -> App integrity, then choose one of the two methods seen in the screenshot below. Once the key has been uploaded, you can enroll in Play App Signing.
-
+
:::tip
With smaller app sizes, improved performance, and enhanced security, the AAB binary format is a win for app developers and users alike. If you have an existing Android app using the APK format, consider migrating to AAB to take advantage of all the great features it provides.
@@ -140,7 +140,7 @@ Making a developer account with Google Play costs $25 USD.
Once a developer account has been created, go ahead and click the `Create an Application`
-
+
Be sure to fill out the description for the app along with providing screenshots and additional info.
When ready, upload the signed release AAB/APK that was generated and publish the app.
diff --git a/docs/developer-resources/guides/first-app-v3/intro.md b/docs/developer-resources/guides/first-app-v3/intro.md
index 844aef86a7e..4d44434249f 100644
--- a/docs/developer-resources/guides/first-app-v3/intro.md
+++ b/docs/developer-resources/guides/first-app-v3/intro.md
@@ -2,7 +2,7 @@
The great thing about Ionic is that with one codebase, you can build for any platform using familiar web tools and languages. Follow along as we create a working Photo Gallery. Here’s the before and after:
-
+
It’s easy to get started. Reference code for this guide can be [found on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic3/).
@@ -76,7 +76,7 @@ And voilà! Your Ionic app is now running in a web browser. Most of your app can
There are three tabs: “Home”, “About”, and “Contact.” Click on the About tab. It’s a blank canvas, aka the perfect spot to add camera functionality. Let’s begin to transform the About page into a Photo Gallery. Ionic features LiveReload, so when you make changes and save them, the app is updated immediately!
-
+
Open the photo-gallery app folder in your favorite code editor of choice, then navigate to `/src/pages/about/about.html`. We see:
diff --git a/docs/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md b/docs/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md
index da6f9462ecc..61d4605e865 100644
--- a/docs/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md
+++ b/docs/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md
@@ -17,7 +17,7 @@ $ ionic cordova plugin add cordova-plugin-ionic@latest --save
There are two unique values to provide: your app id and channel name. Sign into Appflow, then find the App Id on your app’s dashboard:
-
+
And we’ll just use “Master” as the channel name. Putting this together looks like:
@@ -168,7 +168,7 @@ $ git push ionic master
Log into the [Appflow dashboard](https://dashboard.ionicframework.com) and navigate to Deploy -> Builds. You’ll see this newest commit begin to build immediately. Since we assigned the Appflow plugin to the Master branch (the one we always Git Push to), the Channel label will also point to this commit, effectively auto-deploying this change to all app users:
-
+
A Channel points to a specific JavaScript Build or Snapshot of your app that will be shared with devices listening to that channel for updates. You can change which Build a Channel points to whenever you’d like.
@@ -180,7 +180,7 @@ What if you deploy a change, then realize that there is a bug? Or perhaps you’
On the Deploy Builds page, click the “Assign to Channel” button on the previous commit, then click “Deploy.” App users will be reverted to the previous version, and our “Photo Gallery” name has been restored.
-
+
This was just a taste of what you can do with Appflow Live Updates! You can also set up multiple deployment channels to send targeted updates to specific groups of users. Use it to run A/B tests, or target the distribution of updates by audience, geography, or test group.
diff --git a/docs/developer-resources/guides/first-app-v3/theming.md b/docs/developer-resources/guides/first-app-v3/theming.md
index 19ef3364069..077186843fc 100644
--- a/docs/developer-resources/guides/first-app-v3/theming.md
+++ b/docs/developer-resources/guides/first-app-v3/theming.md
@@ -4,11 +4,11 @@ Previously, we converted our single use Camera app into an epic photo gallery. N
Ionic has five default colors, defined as Sass variables, that can be used to change the color of its UI components:
-
+
You can customize each color further by supplying a base and contract property. Base acts as the background color and contrast acts as the text color for most components. This provides much more flexible control over your styles:
-
+
You can find these colors defined in `src/theme/variables.scss`.
@@ -22,7 +22,7 @@ $colors: (
But wait, there’s more! Ionic automatically provides platform specific styles based on the device the application is running on, giving that native look and feel your users are used to:
-
+
In our app, this is clearly visible in how the header and the icons are styled.
@@ -40,7 +40,7 @@ imports: [
Now, the iOS version of our app has a Material Design skin!
-
+
Creating gorgeous-looking Ionic apps is easy with Sass variables and platform-specific styling. You now have everything you need to get started with Ionic. Go forth and build great apps!
diff --git a/docs/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md b/docs/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md
index c4fac8c2871..0417b953de6 100644
--- a/docs/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md
+++ b/docs/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md
@@ -75,11 +75,11 @@ ionic serve
Tap on the Gallery tab, then the camera button. A runtime error should occur. In a browser, head over to the [Appflow dashboard](https://dashboard.ionicframework.com), then Monitor -> Monitoring. After a few minutes, the error should appear:
-
+
Clicking on the event gives us lots of details surrounding what happened, such as a full stack trace. In this instance, we see that the error occurred three times on Mac OS X in the Chrome web browser.
-
+
Given the proliferation of mobile devices and operating systems these days, this is immensely powerful. Armed with these details, we can hone in on the problem and fix it quickly.
diff --git a/docs/developer-resources/guides/first-app-v4/intro.md b/docs/developer-resources/guides/first-app-v4/intro.md
index bffc7ea9c28..153afc5646f 100644
--- a/docs/developer-resources/guides/first-app-v4/intro.md
+++ b/docs/developer-resources/guides/first-app-v4/intro.md
@@ -2,7 +2,7 @@
The great thing about Ionic is that with one codebase, you can build for any platform using familiar web tools and languages. Follow along as we create a working Photo Gallery. Here’s the before and after:
-
+
It’s easy to get started. Note that all code referenced in this guide can be [found on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic4/).
@@ -65,7 +65,7 @@ And voilà! Your Ionic app is now running in a web browser. Most of your app can
There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to add camera functionality. Let’s begin to transform this page into a Photo Gallery. Ionic features LiveReload, so when you make changes and save them, the app is updated immediately!
-
+
Open the photo-gallery app folder in your favorite code editor of choice, then navigate to `/src/app/tab2/tab2.page.html`. We see:
diff --git a/docs/developer-resources/guides/first-app-v4/theming.md b/docs/developer-resources/guides/first-app-v4/theming.md
index 6170b2d673a..c185f6761c1 100644
--- a/docs/developer-resources/guides/first-app-v4/theming.md
+++ b/docs/developer-resources/guides/first-app-v4/theming.md
@@ -4,11 +4,11 @@ Previously, we converted our single use Camera app into an epic photo gallery. N
Ionic has nine default colors, defined as CSS variables, that can be used to change the color of its UI components:
-
+
You can customize each color further by supplying a base, contrast, shade, and tint properties. These provide flexible control over your styles:
-
+
You can find these colors defined in `src/theme/variables.scss`.
@@ -31,7 +31,7 @@ The easiest and most powerful way to create custom color palettes for your app
But wait, there’s more! Ionic automatically provides platform specific styles based on the device the application is running on, giving that native look and feel your users are used to:
-
+
In our app, this is clearly visible in how the header and the icons are styled.
@@ -49,7 +49,7 @@ imports: [
Now, the iOS version of our app has a Material Design skin!
-
+
Creating gorgeous-looking Ionic apps is easy with CSS variables and platform-specific styling. You now have everything you need to get started with Ionic.
diff --git a/docs/developing/tips.md b/docs/developing/tips.md
index 2adf19ea58d..965665f9f00 100644
--- a/docs/developing/tips.md
+++ b/docs/developing/tips.md
@@ -122,7 +122,7 @@ By default, when an app is viewed in the browser, Ionic will apply the `md` mode
This will not change which platform the browser sees being used. The platform is determined by device detection and inspecting the user-agent. To change the platform, the user-agent must be changed. To do this, open up Chrome DevTools with Ctrl+Shift+I(Cmd+Option+I on Mac), and then toggle device mode on with Ctrl+Shift+M(Cmd+Option+M on Mac).
:::
-
+
Selecting devices from the device dropdown will change the user-agent, as well as the dimensions of the viewport.
diff --git a/docs/intro/cli.md b/docs/intro/cli.md
index 0ddf23169d3..38a8a37e4b8 100644
--- a/docs/intro/cli.md
+++ b/docs/intro/cli.md
@@ -48,7 +48,7 @@ Create an Ionic app using one of the pre-made app templates, or a blank one to s
ionic start
```
-
+
To learn more about starting Ionic apps, see the [Starting Guide](../developing/starting.md).
diff --git a/docs/react/quickstart.md b/docs/react/quickstart.md
index f7bef34201b..1d702a65433 100644
--- a/docs/react/quickstart.md
+++ b/docs/react/quickstart.md
@@ -127,7 +127,7 @@ Now the `App` does not really have a lot to modify here. It's a basic example of
Currently, the `Home` component looks like so:
-
+
```tsx
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
diff --git a/docs/react/your-first-app.md b/docs/react/your-first-app.md
index d4428b1a5e2..b1fe24b6ec5 100644
--- a/docs/react/your-first-app.md
+++ b/docs/react/your-first-app.md
@@ -124,7 +124,7 @@ And voilà! Your Ionic app is now running in a web browser. Most of your app can
There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately!
-
+
Open `/src/pages/Tab2.tsx`. We see:
diff --git a/docs/react/your-first-app/2-taking-photos.md b/docs/react/your-first-app/2-taking-photos.md
index ac70c03c26c..23f63ef6166 100644
--- a/docs/react/your-first-app/2-taking-photos.md
+++ b/docs/react/your-first-app/2-taking-photos.md
@@ -72,7 +72,7 @@ const Tab2: React.FC = () => {
Save the file, and if you’re not already, restart the development server in your browser by running `ionic serve`. On the Photo Gallery tab, click the Camera button. If your computer has a webcam of any sort, a modal window appears. Take a selfie!
-
+
_(Your selfie is probably much better than mine)_
diff --git a/docs/react/your-first-app/6-deploying-mobile.md b/docs/react/your-first-app/6-deploying-mobile.md
index 70b47820eb6..da780fa76ab 100644
--- a/docs/react/your-first-app/6-deploying-mobile.md
+++ b/docs/react/your-first-app/6-deploying-mobile.md
@@ -53,7 +53,7 @@ ionic cap open ios
In order for some native plugins to work, user permissions must be configured. In our photo gallery app, this includes the Camera plugin: iOS displays a modal dialog automatically after the first time that `Camera.getPhoto()` is called, prompting the user to allow the app to use the Camera. The permission that drives this is labeled “Privacy - Camera Usage.” To set it, the `Info.plist` file must be modified ([more details here](https://capacitorjs.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties."
-
+
Each setting in `Info.plist` has a low-level parameter name and a high-level name. By default, the property list editor shows the high-level names, but it's often useful to switch to showing the raw, low-level names. To do this, right-click anywhere in the property list editor and toggle "Raw Keys/Values."
@@ -63,15 +63,15 @@ Follow the same process to add the other two Keys required of the Camera plugin:
Next, click on `App` in the Project Navigator on the left-hand side, then within the `Signing & Capabilities` section, select your Development Team.
-
+
With permissions in place and Development Team selected, we are ready to try out the app on a real device! Connect an iOS device to your Mac computer, select it (`App -> Matthew’s iPhone` for me) then click the "Build" button to build, install, and launch the app on your device:
-
+
Upon tapping the Camera button on the Photo Gallery tab, the permission prompt will display. Tap OK, then take a picture with the Camera. Afterward, the photo shows in the app!
-
+
## Android
@@ -85,7 +85,7 @@ ionic cap open android
Similar to iOS, we must enable the correct permissions to use the Camera. Configure these in the `AndroidManifest.xml` file. Android Studio will likely open this file automatically, but in case it doesn't, locate it under `android/app/src/main/`.
-
+
Scroll to the `Permissions` section and ensure these entries are included:
@@ -96,11 +96,11 @@ Scroll to the `Permissions` section and ensure these entries are included:
Save the file. With permissions in place, we are ready to try out the app on a real device! Connect an Android device to your computer. Within Android Studio, click the "Run" button, select the attached Android device, then click OK to build, install, and launch the app on your device.
-
+
Once again, upon tapping the Camera button on the Photo Gallery tab, the permission prompt should be displayed. Tap OK, then take a picture with the Camera. Afterward, the photo should appear in the app.
-
+
Our Photo Gallery app has just been deployed to Android and iOS devices. 🎉
diff --git a/docs/theming/advanced.md b/docs/theming/advanced.md
index 8f3b75379c9..2e91f82bccf 100644
--- a/docs/theming/advanced.md
+++ b/docs/theming/advanced.md
@@ -32,9 +32,9 @@ The example below demonstrates how to use `theme-color` to style the browser int
```
-| Light Mode | Dark Mode |
-| -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
-|  |  |
+| Light Mode | Dark Mode |
+| ------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- |
+|  |  |
The `theme-color` meta can also be used to customize the toolbar in Safari on macOS Monterey or newer.
diff --git a/docs/theming/dark-mode.md b/docs/theming/dark-mode.md
index 9d87c0bd484..3dfd6451334 100644
--- a/docs/theming/dark-mode.md
+++ b/docs/theming/dark-mode.md
@@ -190,9 +190,9 @@ This allows the page to indicate which color scheme it is comfortable being rend
color-scheme: light dark;
```
-| Default scrollbar | Scrollbar with `color-scheme` |
-| ------------------------------------------------------------------------ | -------------------------------------------------------------------- |
-|  |  |
+| Default scrollbar | Scrollbar with `color-scheme` |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+|  |  |
For more information regarding `color-scheme` please see https://web.dev/color-scheme/.
diff --git a/docs/troubleshooting/native.md b/docs/troubleshooting/native.md
index b757c5d0d59..bdaf0c244eb 100644
--- a/docs/troubleshooting/native.md
+++ b/docs/troubleshooting/native.md
@@ -38,12 +38,12 @@ Running an app on an iOS device requires a provisioning profile. If a provisioni
3. In Project navigator, select the project root to open the project editor. Under the **Identity** section, verify that the Package ID that was set matches the Bundle Identifier.
- 
+ 
4. In the same project editor, under the Signing section, ensure Automatically manage signing is enabled. Then, select a Development Team. Given a Development Team, Xcode will attempt to automatically prepare provisioning and signing.
- 
+ 
## Xcode build error 65
diff --git a/docs/vue/quickstart.md b/docs/vue/quickstart.md
index 25acbd0062e..390b7781ba1 100644
--- a/docs/vue/quickstart.md
+++ b/docs/vue/quickstart.md
@@ -189,7 +189,7 @@ Now the `App` component does not really have a lot to modify here. It is a basic
Currently, the `Home` component looks like so:
-
+
```html
diff --git a/docs/vue/your-first-app.md b/docs/vue/your-first-app.md
index 1a9aaacb0ae..1ebeda7d1b4 100644
--- a/docs/vue/your-first-app.md
+++ b/docs/vue/your-first-app.md
@@ -123,7 +123,7 @@ And voilà! Your Ionic app is now running in a web browser. Most of your app can
There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately!
-
+
Open `/src/views/Tab2.vue`. We see:
diff --git a/docs/vue/your-first-app/2-taking-photos.md b/docs/vue/your-first-app/2-taking-photos.md
index ae8c706f550..859c3a4565a 100644
--- a/docs/vue/your-first-app/2-taking-photos.md
+++ b/docs/vue/your-first-app/2-taking-photos.md
@@ -78,7 +78,7 @@ const { takePhoto } = usePhotoGallery();
Save the file. Start the development server via `ionic serve` if it is not already running. In your browser, on the Photo Gallery tab, click the Camera button. If your computer has a webcam of any sort, a modal window appears. Take a selfie!
-
+
_(Your selfie is probably much better than mine)_
diff --git a/docs/vue/your-first-app/6-deploying-mobile.md b/docs/vue/your-first-app/6-deploying-mobile.md
index 08cab4a0596..7258d32bcfd 100644
--- a/docs/vue/your-first-app/6-deploying-mobile.md
+++ b/docs/vue/your-first-app/6-deploying-mobile.md
@@ -64,7 +64,7 @@ ionic cap open ios
In order for some native plugins to work, user permissions must be configured. In our photo gallery app, this includes the Camera plugin: iOS displays a modal dialog automatically after the first time that `Camera.getPhoto()` is called, prompting the user to allow the app to use the Camera. The permission that drives this is labeled "Privacy - Camera Usage." To set it, the `Info.plist` file must be modified ([more details here](https://capacitorjs.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties."
-
+
Each setting in `Info.plist` has a low-level parameter name and a high-level name. By default, the property list editor shows the high-level names, but it's often useful to switch to showing the raw, low-level names. To do this, right-click anywhere in the property list editor and toggle "Raw Keys/Values."
@@ -74,15 +74,15 @@ Follow the same process to add the other two Keys required of the Camera plugin:
Next, click on `App` in the Project Navigator on the left-hand side, then within the `Signing & Capabilities` section, select your Development Team.
-
+
With permissions in place and Development Team selected, we are ready to try out the app on a real device! Connect an iOS device to your Mac computer, select it (`App -> Matthew’s iPhone` for me) then click the "Build" button to build, install, and launch the app on your device:
-
+
Upon tapping the Camera button on the Photo Gallery tab, the permission prompt will display. Tap OK, then take a picture with the Camera. Afterward, the photo shows in the app!
-
+
## Android
@@ -96,7 +96,7 @@ ionic cap open android
Similar to iOS, we must enable the correct permissions to use the Camera. Configure these in the `AndroidManifest.xml` file. Android Studio will likely open this file automatically, but in case it doesn't, locate it under `android/app/src/main/`.
-
+
Scroll to the `Permissions` section and ensure these entries are included:
@@ -107,11 +107,11 @@ Scroll to the `Permissions` section and ensure these entries are included:
Save the file. With permissions in place, we are ready to try out the app on a real device! Connect an Android device to your computer. Within Android Studio, click the "Run" button, select the attached Android device, then click OK to build, install, and launch the app on your device.
-
+
Once again, upon tapping the Camera button on the Photo Gallery tab, the permission prompt should be displayed. Tap OK, then take a picture with the Camera. Afterward, the photo should appear in the app.
-
+
Our Photo Gallery app has just been deployed to Android and iOS devices. 🎉
diff --git a/versioned_docs/version-v5/angular/lifecycle.md b/versioned_docs/version-v5/angular/lifecycle.md
index fc948673727..e4bd2114684 100644
--- a/versioned_docs/version-v5/angular/lifecycle.md
+++ b/versioned_docs/version-v5/angular/lifecycle.md
@@ -6,7 +6,7 @@ sidebar_label: Lifecycle
This guide covers how the page life cycle works in an app built with Ionic and Angular.
-
+
## Angular Life Cycle Events
@@ -38,7 +38,7 @@ The difference between `ionViewWillEnter` and `ionViewDidEnter` is when they fir
For `ionViewWillLeave` and `ionViewDidLeave`, `ionViewWillLeave` gets called directly before the transition away from the current page begins, and `ionViewDidLeave` does not get called until after the new page gets successfully transitioned into (after the new pages `ionViewDidEnter` fires).
-
+
## How Ionic Handles the Life of a Page
diff --git a/versioned_docs/version-v5/angular/your-first-app.md b/versioned_docs/version-v5/angular/your-first-app.md
index 1ebc93eb9fe..49a2b65deec 100644
--- a/versioned_docs/version-v5/angular/your-first-app.md
+++ b/versioned_docs/version-v5/angular/your-first-app.md
@@ -119,7 +119,7 @@ And voilà! Your Ionic app is now running in a web browser. Most of your app can
There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately!
-
+
Open the photo-gallery app folder in your code editor of choice, then navigate to `/src/app/tab2/tab2.page.html`. We see:
diff --git a/versioned_docs/version-v5/angular/your-first-app/2-taking-photos.md b/versioned_docs/version-v5/angular/your-first-app/2-taking-photos.md
index 70f6ed01e3f..7da972b57ab 100644
--- a/versioned_docs/version-v5/angular/your-first-app/2-taking-photos.md
+++ b/versioned_docs/version-v5/angular/your-first-app/2-taking-photos.md
@@ -63,7 +63,7 @@ Then, open `tab2.page.html` and call the `addPhotoToGallery()` function when the
Save the file, and if it's not running already, restart the development server in your browser by running `ionic serve`. On the Photo Gallery tab, click the Camera button. If your computer has a webcam of any sort, a modal window appears. Take a selfie!
-
+
_(Your selfie is probably much better than mine)_
diff --git a/versioned_docs/version-v5/angular/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v5/angular/your-first-app/6-deploying-mobile.md
index 790e83ef828..c6c56d79f49 100644
--- a/versioned_docs/version-v5/angular/your-first-app/6-deploying-mobile.md
+++ b/versioned_docs/version-v5/angular/your-first-app/6-deploying-mobile.md
@@ -53,7 +53,7 @@ ionic cap open ios
In order for some native plugins to work, user permissions must be configured. In our photo gallery app, this includes the Camera plugin: iOS displays a modal dialog automatically after the first time that `Camera.getPhoto()` is called, prompting the user to allow the app to use the Camera. The permission that drives this is labeled “Privacy - Camera Usage.” To set it, the `Info.plist` file must be modified ([more details here](https://capacitorjs.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties."
-
+
Each setting in `Info.plist` has a low-level parameter name and a high-level name. By default, the property list editor shows the high-level names, but it's often useful to switch to showing the raw, low-level names. To do this, right-click anywhere in the property list editor and toggle "Raw Keys/Values."
@@ -63,15 +63,15 @@ Follow the same process to add the other two Keys required of the Camera plugin:
Next, click on `App` in the Project Navigator on the left-hand side, then within the `Signing & Capabilities` section, select your Development Team.
-
+
With permissions in place and Development Team selected, we are ready to try out the app on a real device! Connect an iOS device to your Mac computer, select it (`App -> Matthew’s iPhone` for me) then click the "Build" button to build, install, and launch the app on your device:
-
+
Upon tapping the Camera button on the Photo Gallery tab, the permission prompt will display. Tap OK, then take a picture with the Camera. Afterward, the photo shows in the app!
-
+
## Android Deployment
@@ -85,7 +85,7 @@ ionic cap open android
Similar to iOS, we must enable the correct permissions to use the Camera. Configure these in the `AndroidManifest.xml` file. Android Studio will likely open this file automatically, but in case it doesn't, locate it under `android/app/src/main/`.
-
+
Scroll to the `Permissions` section and ensure these entries are included:
@@ -96,11 +96,11 @@ Scroll to the `Permissions` section and ensure these entries are included:
Save the file. With permissions in place, we are ready to try out the app on a real device! Connect an Android device to your computer. Within Android Studio, click the "Run" button, select the attached Android device, then click OK to build, install, and launch the app on your device.
-
+
Once again, upon tapping the Camera button on the Photo Gallery tab, the permission prompt should be displayed. Tap OK, then take a picture with the Camera. Afterward, the photo should appear in the app.
-
+
Our Photo Gallery app has just been deployed to Android and iOS devices. 🎉
diff --git a/versioned_docs/version-v5/core-concepts/webview.md b/versioned_docs/version-v5/core-concepts/webview.md
index 3a2b7628586..a2e69cf59c2 100644
--- a/versioned_docs/version-v5/core-concepts/webview.md
+++ b/versioned_docs/version-v5/core-concepts/webview.md
@@ -12,7 +12,7 @@ Ionic apps are built using [web technologies](../reference/glossary.md#web-stand
Modern Web Views offer many built-in HTML5 APIs for hardware functionality such as cameras, sensors, GPS, speakers, and Bluetooth, but sometimes it may also be necessary to access platform-specific hardware APIs. In Ionic apps, hardware APIs can be accessed through a bridge layer, typically by using native plugins which expose JavaScript APIs.
-
+
The Ionic Web View plugin is specialized for modern JavaScript apps. For both iOS and Android, app files are always hosted using the `http://` protocol with an optimized HTTP server that runs on the local device.
diff --git a/versioned_docs/version-v5/deployment/play-store.md b/versioned_docs/version-v5/deployment/play-store.md
index c5715966928..88923edd5af 100644
--- a/versioned_docs/version-v5/deployment/play-store.md
+++ b/versioned_docs/version-v5/deployment/play-store.md
@@ -58,7 +58,7 @@ Making a developer account with Google Play costs $25 USD.
Once a developer account has been created, go ahead and click the `Create an Application`
-
+
Be sure to fill out the description for the app along with providing screenshots and additional info.
When ready, upload the signed release APK that was generated and publish the app.
diff --git a/versioned_docs/version-v5/developer-resources/guides/first-app-v3/intro.md b/versioned_docs/version-v5/developer-resources/guides/first-app-v3/intro.md
index 844aef86a7e..201a4f6c981 100644
--- a/versioned_docs/version-v5/developer-resources/guides/first-app-v3/intro.md
+++ b/versioned_docs/version-v5/developer-resources/guides/first-app-v3/intro.md
@@ -2,7 +2,7 @@
The great thing about Ionic is that with one codebase, you can build for any platform using familiar web tools and languages. Follow along as we create a working Photo Gallery. Here’s the before and after:
-
+
It’s easy to get started. Reference code for this guide can be [found on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic3/).
@@ -76,7 +76,7 @@ And voilà! Your Ionic app is now running in a web browser. Most of your app can
There are three tabs: “Home”, “About”, and “Contact.” Click on the About tab. It’s a blank canvas, aka the perfect spot to add camera functionality. Let’s begin to transform the About page into a Photo Gallery. Ionic features LiveReload, so when you make changes and save them, the app is updated immediately!
-
+
Open the photo-gallery app folder in your favorite code editor of choice, then navigate to `/src/pages/about/about.html`. We see:
diff --git a/versioned_docs/version-v5/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md b/versioned_docs/version-v5/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md
index da6f9462ecc..61d4605e865 100644
--- a/versioned_docs/version-v5/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md
+++ b/versioned_docs/version-v5/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md
@@ -17,7 +17,7 @@ $ ionic cordova plugin add cordova-plugin-ionic@latest --save
There are two unique values to provide: your app id and channel name. Sign into Appflow, then find the App Id on your app’s dashboard:
-
+
And we’ll just use “Master” as the channel name. Putting this together looks like:
@@ -168,7 +168,7 @@ $ git push ionic master
Log into the [Appflow dashboard](https://dashboard.ionicframework.com) and navigate to Deploy -> Builds. You’ll see this newest commit begin to build immediately. Since we assigned the Appflow plugin to the Master branch (the one we always Git Push to), the Channel label will also point to this commit, effectively auto-deploying this change to all app users:
-
+
A Channel points to a specific JavaScript Build or Snapshot of your app that will be shared with devices listening to that channel for updates. You can change which Build a Channel points to whenever you’d like.
@@ -180,7 +180,7 @@ What if you deploy a change, then realize that there is a bug? Or perhaps you’
On the Deploy Builds page, click the “Assign to Channel” button on the previous commit, then click “Deploy.” App users will be reverted to the previous version, and our “Photo Gallery” name has been restored.
-
+
This was just a taste of what you can do with Appflow Live Updates! You can also set up multiple deployment channels to send targeted updates to specific groups of users. Use it to run A/B tests, or target the distribution of updates by audience, geography, or test group.
diff --git a/versioned_docs/version-v5/developer-resources/guides/first-app-v3/theming.md b/versioned_docs/version-v5/developer-resources/guides/first-app-v3/theming.md
index 19ef3364069..bc38fe59379 100644
--- a/versioned_docs/version-v5/developer-resources/guides/first-app-v3/theming.md
+++ b/versioned_docs/version-v5/developer-resources/guides/first-app-v3/theming.md
@@ -4,11 +4,11 @@ Previously, we converted our single use Camera app into an epic photo gallery. N
Ionic has five default colors, defined as Sass variables, that can be used to change the color of its UI components:
-
+
You can customize each color further by supplying a base and contract property. Base acts as the background color and contrast acts as the text color for most components. This provides much more flexible control over your styles:
-
+
You can find these colors defined in `src/theme/variables.scss`.
@@ -22,7 +22,7 @@ $colors: (
But wait, there’s more! Ionic automatically provides platform specific styles based on the device the application is running on, giving that native look and feel your users are used to:
-
+
In our app, this is clearly visible in how the header and the icons are styled.
@@ -40,7 +40,7 @@ imports: [
Now, the iOS version of our app has a Material Design skin!
-
+
Creating gorgeous-looking Ionic apps is easy with Sass variables and platform-specific styling. You now have everything you need to get started with Ionic. Go forth and build great apps!
diff --git a/versioned_docs/version-v5/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md b/versioned_docs/version-v5/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md
index c4fac8c2871..0417b953de6 100644
--- a/versioned_docs/version-v5/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md
+++ b/versioned_docs/version-v5/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md
@@ -75,11 +75,11 @@ ionic serve
Tap on the Gallery tab, then the camera button. A runtime error should occur. In a browser, head over to the [Appflow dashboard](https://dashboard.ionicframework.com), then Monitor -> Monitoring. After a few minutes, the error should appear:
-
+
Clicking on the event gives us lots of details surrounding what happened, such as a full stack trace. In this instance, we see that the error occurred three times on Mac OS X in the Chrome web browser.
-
+
Given the proliferation of mobile devices and operating systems these days, this is immensely powerful. Armed with these details, we can hone in on the problem and fix it quickly.
diff --git a/versioned_docs/version-v5/developer-resources/guides/first-app-v4/intro.md b/versioned_docs/version-v5/developer-resources/guides/first-app-v4/intro.md
index bffc7ea9c28..153afc5646f 100644
--- a/versioned_docs/version-v5/developer-resources/guides/first-app-v4/intro.md
+++ b/versioned_docs/version-v5/developer-resources/guides/first-app-v4/intro.md
@@ -2,7 +2,7 @@
The great thing about Ionic is that with one codebase, you can build for any platform using familiar web tools and languages. Follow along as we create a working Photo Gallery. Here’s the before and after:
-
+
It’s easy to get started. Note that all code referenced in this guide can be [found on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic4/).
@@ -65,7 +65,7 @@ And voilà! Your Ionic app is now running in a web browser. Most of your app can
There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to add camera functionality. Let’s begin to transform this page into a Photo Gallery. Ionic features LiveReload, so when you make changes and save them, the app is updated immediately!
-
+
Open the photo-gallery app folder in your favorite code editor of choice, then navigate to `/src/app/tab2/tab2.page.html`. We see:
diff --git a/versioned_docs/version-v5/developer-resources/guides/first-app-v4/theming.md b/versioned_docs/version-v5/developer-resources/guides/first-app-v4/theming.md
index 6170b2d673a..c185f6761c1 100644
--- a/versioned_docs/version-v5/developer-resources/guides/first-app-v4/theming.md
+++ b/versioned_docs/version-v5/developer-resources/guides/first-app-v4/theming.md
@@ -4,11 +4,11 @@ Previously, we converted our single use Camera app into an epic photo gallery. N
Ionic has nine default colors, defined as CSS variables, that can be used to change the color of its UI components:
-
+
You can customize each color further by supplying a base, contrast, shade, and tint properties. These provide flexible control over your styles:
-
+
You can find these colors defined in `src/theme/variables.scss`.
@@ -31,7 +31,7 @@ The easiest and most powerful way to create custom color palettes for your app
But wait, there’s more! Ionic automatically provides platform specific styles based on the device the application is running on, giving that native look and feel your users are used to:
-
+
In our app, this is clearly visible in how the header and the icons are styled.
@@ -49,7 +49,7 @@ imports: [
Now, the iOS version of our app has a Material Design skin!
-
+
Creating gorgeous-looking Ionic apps is easy with CSS variables and platform-specific styling. You now have everything you need to get started with Ionic.
diff --git a/versioned_docs/version-v5/developing/android.md b/versioned_docs/version-v5/developing/android.md
index ebcfdd3e2de..23aaa565a6e 100644
--- a/versioned_docs/version-v5/developing/android.md
+++ b/versioned_docs/version-v5/developing/android.md
@@ -25,13 +25,13 @@ Download Android Studio from the Android version history for information on Android versions.
@@ -153,7 +153,7 @@ Capacitor uses Android Studio to build and run apps to simulators and devices.
2. **In Android Studio, click the Run button and then select the target simulator or device.**
-
+
### Live reload
@@ -189,7 +189,7 @@ Chrome has web developer tool support for Android simulators and devices. Go to
Make sure your application is running on the device or simulator, or it will not show up in the list.
:::
-
+
### Viewing Native Logs
@@ -199,7 +199,7 @@ If running with Android Studio, native logs can be found in **Logcat**.
If the **Logcat** window is hidden, you can enable it in **View** » **Tool Windows** » **Logcat**.
:::
-
+
You can also access **Logcat** with [ADB](https://developer.android.com/studio/command-line/adb).
diff --git a/versioned_docs/version-v5/developing/ios.md b/versioned_docs/version-v5/developing/ios.md
index f9244962211..ff2b3129869 100644
--- a/versioned_docs/version-v5/developing/ios.md
+++ b/versioned_docs/version-v5/developing/ios.md
@@ -30,7 +30,7 @@ All iOS apps must be code signed, even for development. Luckily, Xcode makes thi
Open Xcode and navigate to **Xcode** » **Preferences** » **Accounts**. Add an Apple ID if none are listed. Once logged in, a Personal Team will appear in the team list of the Apple ID.
-
+
### Creating an iOS Simulator
@@ -38,7 +38,7 @@ The iOS simulator emulates iOS devices on Macs. The following documentation is a
Open Xcode and navigate to **Window** » **Devices and Simulators**. Create an **iPhone 11** simulator if one does not already exist.
-
+
## Cordova Setup
@@ -91,12 +91,12 @@ Before apps can be deployed to iOS simulators and devices, the native project mu
1. In Project navigator, select the project root to open the project editor. Under the **Identity** section, verify that the Package ID that was set matches the Bundle Identifier.
- 
+ 
1. In the same project editor, under the Signing section, ensure Automatically manage signing is enabled. Then, select a Development Team. Given a Development Team, Xcode will attempt to automatically prepare provisioning and signing.
- 
+ 
## Running with Xcode
@@ -120,7 +120,7 @@ In this workflow, Xcode can automatically fix common compilation and signing iss
1. In Xcode, select a target simulator or device and click the play button.
- 
+ 
## Running with the Ionic CLI
@@ -166,7 +166,7 @@ If the **Develop** menu is hidden, enable it in **Safari** » **Preferences
If the app isn't listed, the Web Inspector may need to be enabled on the device in **Settings** » **Safari** » **Advanced** » **Web Inspector**.
:::
-
+
### Viewing Native Logs
@@ -176,4 +176,4 @@ If running with Xcode, native logs can be found in the Xcode **Console**.
If the **Console** is hidden, enable it in **View** » **Debug Area** » **Activate Console**.
:::
-
+
diff --git a/versioned_docs/version-v5/developing/tips.md b/versioned_docs/version-v5/developing/tips.md
index f5155db1faf..2a43aa9c1c1 100644
--- a/versioned_docs/version-v5/developing/tips.md
+++ b/versioned_docs/version-v5/developing/tips.md
@@ -112,7 +112,7 @@ By default, when an app is viewed in the browser, Ionic will apply the `md` mode
This will not change which platform the browser sees being used. The platform is determined by device detection and inspecting the user-agent. To change the platform, the user-agent must be changed. To do this, open up Chrome DevTools with Ctrl+Shift+I(Cmd+Option+I on Mac), and then toggle device mode on with Ctrl+Shift+M(Cmd+Option+M on Mac).
:::
-
+
Selecting devices from the device dropdown will change the user-agent, as well as the dimensions of the viewport.
diff --git a/versioned_docs/version-v5/intro/cli.md b/versioned_docs/version-v5/intro/cli.md
index ba08c4bfba9..3457033b711 100644
--- a/versioned_docs/version-v5/intro/cli.md
+++ b/versioned_docs/version-v5/intro/cli.md
@@ -41,7 +41,7 @@ Create an Ionic app using one of the pre-made app templates, or a blank one to s
ionic start myApp tabs
```
-
+
To learn more about starting Ionic apps, see the [Starting Guide](../developing/starting.md).
diff --git a/versioned_docs/version-v5/native/facebook.md b/versioned_docs/version-v5/native/facebook.md
index 1ffde697cf2..f2f3912ede3 100644
--- a/versioned_docs/version-v5/native/facebook.md
+++ b/versioned_docs/version-v5/native/facebook.md
@@ -20,11 +20,11 @@ Requires Cordova plugin: `cordova-plugin-facebook-connect`. For more info, pleas
To use the FB plugin, you first have to create a new Facebook App inside of the Facebook developer portal at [https://developers.facebook.com/apps](https://developers.facebook.com/apps).
-[](https://developers.facebook.com/apps/)
+[](https://developers.facebook.com/apps/)
Retrieve the `App ID` and `App Name`.
-[](https://developers.facebook.com/apps/)
+[](https://developers.facebook.com/apps/)
Then type in the following command in your Terminal, where APP_ID and APP_NAME are the values from the Facebook Developer portal.
@@ -34,11 +34,11 @@ Then type in the following command in your Terminal, where APP_ID and APP_NAME a
After, you'll need to add the native platforms you'll be using to your app in the Facebook Developer portal under your app's Settings:
-[](https://developers.facebook.com/apps/)
+[](https://developers.facebook.com/apps/)
Click `'Add Platform'`.
-[](https://developers.facebook.com/apps/)
+[](https://developers.facebook.com/apps/)
At this point you'll need to open your project's [`config.xml`](https://cordova.apache.org/docs/en/latest/config_ref/index.html) file, found in the root directory of your project.
@@ -54,13 +54,13 @@ You can also edit the `id` to whatever you'd like it to be.
Under 'Bundle ID', add the `id` from your `config.xml` file:
-[](https://developers.facebook.com/apps/)
+[](https://developers.facebook.com/apps/)
#### Android Install
Under 'Google Play Package Name', add the `id` from your `config.xml` file:
-[](https://developers.facebook.com/apps/)
+[](https://developers.facebook.com/apps/)
And that's it! You can now make calls to Facebook using the plugin.
diff --git a/versioned_docs/version-v5/react/quickstart.md b/versioned_docs/version-v5/react/quickstart.md
index cb01d75a12a..976b2f85b70 100644
--- a/versioned_docs/version-v5/react/quickstart.md
+++ b/versioned_docs/version-v5/react/quickstart.md
@@ -120,7 +120,7 @@ Now the `App` does not really have a lot to modify here. It's a basic example of
Currently, the `Home` component looks like so:
-
+
```tsx
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
diff --git a/versioned_docs/version-v5/react/your-first-app.md b/versioned_docs/version-v5/react/your-first-app.md
index b6528ff1145..3ad5c20a441 100644
--- a/versioned_docs/version-v5/react/your-first-app.md
+++ b/versioned_docs/version-v5/react/your-first-app.md
@@ -119,7 +119,7 @@ And voilà! Your Ionic app is now running in a web browser. Most of your app can
There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately!
-
+
Open `/src/pages/Tab2.tsx`. We see:
diff --git a/versioned_docs/version-v5/react/your-first-app/2-taking-photos.md b/versioned_docs/version-v5/react/your-first-app/2-taking-photos.md
index a36a71e6863..15280a8f47f 100644
--- a/versioned_docs/version-v5/react/your-first-app/2-taking-photos.md
+++ b/versioned_docs/version-v5/react/your-first-app/2-taking-photos.md
@@ -65,7 +65,7 @@ const Tab2: React.FC = () => {
Save the file, and if you’re not already, restart the development server in your browser by running `ionic serve`. On the Photo Gallery tab, click the Camera button. If your computer has a webcam of any sort, a modal window appears. Take a selfie!
-
+
_(Your selfie is probably much better than mine)_
diff --git a/versioned_docs/version-v5/react/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v5/react/your-first-app/6-deploying-mobile.md
index 70b47820eb6..da780fa76ab 100644
--- a/versioned_docs/version-v5/react/your-first-app/6-deploying-mobile.md
+++ b/versioned_docs/version-v5/react/your-first-app/6-deploying-mobile.md
@@ -53,7 +53,7 @@ ionic cap open ios
In order for some native plugins to work, user permissions must be configured. In our photo gallery app, this includes the Camera plugin: iOS displays a modal dialog automatically after the first time that `Camera.getPhoto()` is called, prompting the user to allow the app to use the Camera. The permission that drives this is labeled “Privacy - Camera Usage.” To set it, the `Info.plist` file must be modified ([more details here](https://capacitorjs.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties."
-
+
Each setting in `Info.plist` has a low-level parameter name and a high-level name. By default, the property list editor shows the high-level names, but it's often useful to switch to showing the raw, low-level names. To do this, right-click anywhere in the property list editor and toggle "Raw Keys/Values."
@@ -63,15 +63,15 @@ Follow the same process to add the other two Keys required of the Camera plugin:
Next, click on `App` in the Project Navigator on the left-hand side, then within the `Signing & Capabilities` section, select your Development Team.
-
+
With permissions in place and Development Team selected, we are ready to try out the app on a real device! Connect an iOS device to your Mac computer, select it (`App -> Matthew’s iPhone` for me) then click the "Build" button to build, install, and launch the app on your device:
-
+
Upon tapping the Camera button on the Photo Gallery tab, the permission prompt will display. Tap OK, then take a picture with the Camera. Afterward, the photo shows in the app!
-
+
## Android
@@ -85,7 +85,7 @@ ionic cap open android
Similar to iOS, we must enable the correct permissions to use the Camera. Configure these in the `AndroidManifest.xml` file. Android Studio will likely open this file automatically, but in case it doesn't, locate it under `android/app/src/main/`.
-
+
Scroll to the `Permissions` section and ensure these entries are included:
@@ -96,11 +96,11 @@ Scroll to the `Permissions` section and ensure these entries are included:
Save the file. With permissions in place, we are ready to try out the app on a real device! Connect an Android device to your computer. Within Android Studio, click the "Run" button, select the attached Android device, then click OK to build, install, and launch the app on your device.
-
+
Once again, upon tapping the Camera button on the Photo Gallery tab, the permission prompt should be displayed. Tap OK, then take a picture with the Camera. Afterward, the photo should appear in the app.
-
+
Our Photo Gallery app has just been deployed to Android and iOS devices. 🎉
diff --git a/versioned_docs/version-v5/theming/dark-mode.md b/versioned_docs/version-v5/theming/dark-mode.md
index e93e895e990..d25629ad020 100644
--- a/versioned_docs/version-v5/theming/dark-mode.md
+++ b/versioned_docs/version-v5/theming/dark-mode.md
@@ -131,9 +131,9 @@ This allows the page to indicate which color scheme it is comfortable being rend
color-scheme: light dark;
```
-| Default scrollbar | Scrollbar with `color-scheme` |
-| ------------------------------------------------------------------------ | -------------------------------------------------------------------- |
-|  |  |
+| Default scrollbar | Scrollbar with `color-scheme` |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+|  |  |
For more information regarding `color-scheme` please see https://web.dev/color-scheme/.
diff --git a/versioned_docs/version-v5/troubleshooting/native.md b/versioned_docs/version-v5/troubleshooting/native.md
index eda83138bfe..7e418bb6e9d 100644
--- a/versioned_docs/version-v5/troubleshooting/native.md
+++ b/versioned_docs/version-v5/troubleshooting/native.md
@@ -29,13 +29,13 @@ Running an app on an iOS device requires a provisioning profile. If a provisioni
3. In Project navigator, select the project root to open the project editor. Under the **Identity** section,
verify that the Package ID that was set matches the Bundle Identifier.
- 
+ 
4. In the same project editor, under the Signing section, ensure Automatically manage signing is
enabled. Then, select a Development Team. Given a Development Team, Xcode will attempt to automatically prepare provisioning and signing.
- 
+ 
## Xcode build error 65
diff --git a/versioned_docs/version-v5/vue/quickstart.md b/versioned_docs/version-v5/vue/quickstart.md
index 015b505d2df..ea7ac565d75 100644
--- a/versioned_docs/version-v5/vue/quickstart.md
+++ b/versioned_docs/version-v5/vue/quickstart.md
@@ -202,7 +202,7 @@ Now the `App` component does not really have a lot to modify here. It is a basic
Currently, the `Home` component looks like so:
-
+
```html
diff --git a/versioned_docs/version-v5/vue/your-first-app.md b/versioned_docs/version-v5/vue/your-first-app.md
index 527b66a2b49..f952a9a1e46 100644
--- a/versioned_docs/version-v5/vue/your-first-app.md
+++ b/versioned_docs/version-v5/vue/your-first-app.md
@@ -118,7 +118,7 @@ And voilà! Your Ionic app is now running in a web browser. Most of your app can
There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately!
-
+
Open `/src/views/Tab2.vue`. We see:
diff --git a/versioned_docs/version-v5/vue/your-first-app/2-taking-photos.md b/versioned_docs/version-v5/vue/your-first-app/2-taking-photos.md
index 8fe97523339..87e4d0f62d3 100644
--- a/versioned_docs/version-v5/vue/your-first-app/2-taking-photos.md
+++ b/versioned_docs/version-v5/vue/your-first-app/2-taking-photos.md
@@ -80,7 +80,7 @@ export default {
Save the file, and if you’re not already, restart the development server in your browser by running `ionic serve`. On the Photo Gallery tab, click the Camera button. If your computer has a webcam of any sort, a modal window appears. Take a selfie!
-
+
_(Your selfie is probably much better than mine)_
diff --git a/versioned_docs/version-v5/vue/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v5/vue/your-first-app/6-deploying-mobile.md
index eb81d5c5e27..dad40e7637a 100644
--- a/versioned_docs/version-v5/vue/your-first-app/6-deploying-mobile.md
+++ b/versioned_docs/version-v5/vue/your-first-app/6-deploying-mobile.md
@@ -57,7 +57,7 @@ ionic cap open ios
In order for some native plugins to work, user permissions must be configured. In our photo gallery app, this includes the Camera plugin: iOS displays a modal dialog automatically after the first time that `Camera.getPhoto()` is called, prompting the user to allow the app to use the Camera. The permission that drives this is labeled "Privacy - Camera Usage." To set it, the `Info.plist` file must be modified ([more details here](https://capacitorjs.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties."
-
+
Each setting in `Info.plist` has a low-level parameter name and a high-level name. By default, the property list editor shows the high-level names, but it's often useful to switch to showing the raw, low-level names. To do this, right-click anywhere in the property list editor and toggle "Raw Keys/Values."
@@ -67,15 +67,15 @@ Follow the same process to add the other two Keys required of the Camera plugin:
Next, click on `App` in the Project Navigator on the left-hand side, then within the `Signing & Capabilities` section, select your Development Team.
-
+
With permissions in place and Development Team selected, we are ready to try out the app on a real device! Connect an iOS device to your Mac computer, select it (`App -> Matthew’s iPhone` for me) then click the "Build" button to build, install, and launch the app on your device:
-
+
Upon tapping the Camera button on the Photo Gallery tab, the permission prompt will display. Tap OK, then take a picture with the Camera. Afterward, the photo shows in the app!
-
+
## Android
@@ -89,7 +89,7 @@ ionic cap open android
Similar to iOS, we must enable the correct permissions to use the Camera. Configure these in the `AndroidManifest.xml` file. Android Studio will likely open this file automatically, but in case it doesn't, locate it under `android/app/src/main/`.
-
+
Scroll to the `Permissions` section and ensure these entries are included:
@@ -100,11 +100,11 @@ Scroll to the `Permissions` section and ensure these entries are included:
Save the file. With permissions in place, we are ready to try out the app on a real device! Connect an Android device to your computer. Within Android Studio, click the "Run" button, select the attached Android device, then click OK to build, install, and launch the app on your device.
-
+
Once again, upon tapping the Camera button on the Photo Gallery tab, the permission prompt should be displayed. Tap OK, then take a picture with the Camera. Afterward, the photo should appear in the app.
-
+
Our Photo Gallery app has just been deployed to Android and iOS devices. 🎉
diff --git a/versioned_docs/version-v6/angular/lifecycle.md b/versioned_docs/version-v6/angular/lifecycle.md
index 5bf7d113370..e301005a016 100644
--- a/versioned_docs/version-v6/angular/lifecycle.md
+++ b/versioned_docs/version-v6/angular/lifecycle.md
@@ -13,7 +13,7 @@ sidebar_label: Lifecycle
This guide covers how the page life cycle works in an app built with Ionic and Angular.
-
+
## Angular Life Cycle Events
@@ -47,7 +47,7 @@ The difference between `ionViewWillEnter` and `ionViewDidEnter` is when they fir
For `ionViewWillLeave` and `ionViewDidLeave`, `ionViewWillLeave` gets called directly before the transition away from the current page begins, and `ionViewDidLeave` does not get called until after the new page gets successfully transitioned into (after the new pages `ionViewDidEnter` fires).
-
+
## How Ionic Handles the Life of a Page
diff --git a/versioned_docs/version-v6/angular/your-first-app.md b/versioned_docs/version-v6/angular/your-first-app.md
index 03a3f94fb52..eab88969887 100644
--- a/versioned_docs/version-v6/angular/your-first-app.md
+++ b/versioned_docs/version-v6/angular/your-first-app.md
@@ -126,7 +126,7 @@ And voilà! Your Ionic app is now running in a web browser. Most of your app can
There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately!
-
+
Open the photo-gallery app folder in your code editor of choice, then navigate to `/src/app/tab2/tab2.page.html`. We see:
diff --git a/versioned_docs/version-v6/angular/your-first-app/2-taking-photos.md b/versioned_docs/version-v6/angular/your-first-app/2-taking-photos.md
index 73b6d20533f..98986f350db 100644
--- a/versioned_docs/version-v6/angular/your-first-app/2-taking-photos.md
+++ b/versioned_docs/version-v6/angular/your-first-app/2-taking-photos.md
@@ -70,7 +70,7 @@ Then, open `tab2.page.html` and call the `addPhotoToGallery()` function when the
Save the file, and if it's not running already, restart the development server in your browser by running `ionic serve`. On the Photo Gallery tab, click the Camera button. If your computer has a webcam of any sort, a modal window appears. Take a selfie!
-
+
_(Your selfie is probably much better than mine)_
diff --git a/versioned_docs/version-v6/angular/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v6/angular/your-first-app/6-deploying-mobile.md
index e30d8acd79d..e9637084b7b 100644
--- a/versioned_docs/version-v6/angular/your-first-app/6-deploying-mobile.md
+++ b/versioned_docs/version-v6/angular/your-first-app/6-deploying-mobile.md
@@ -60,7 +60,7 @@ ionic cap open ios
In order for some native plugins to work, user permissions must be configured. In our photo gallery app, this includes the Camera plugin: iOS displays a modal dialog automatically after the first time that `Camera.getPhoto()` is called, prompting the user to allow the app to use the Camera. The permission that drives this is labeled “Privacy - Camera Usage.” To set it, the `Info.plist` file must be modified ([more details here](https://capacitorjs.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties."
-
+
Each setting in `Info.plist` has a low-level parameter name and a high-level name. By default, the property list editor shows the high-level names, but it's often useful to switch to showing the raw, low-level names. To do this, right-click anywhere in the property list editor and toggle "Raw Keys/Values."
@@ -70,15 +70,15 @@ Follow the same process to add the other two Keys required of the Camera plugin:
Next, click on `App` in the Project Navigator on the left-hand side, then within the `Signing & Capabilities` section, select your Development Team.
-
+
With permissions in place and Development Team selected, we are ready to try out the app on a real device! Connect an iOS device to your Mac computer, select it (`App -> Matthew’s iPhone` for me) then click the "Build" button to build, install, and launch the app on your device:
-
+
Upon tapping the Camera button on the Photo Gallery tab, the permission prompt will display. Tap OK, then take a picture with the Camera. Afterward, the photo shows in the app!
-
+
## Android Deployment
@@ -92,7 +92,7 @@ ionic cap open android
Similar to iOS, we must enable the correct permissions to use the Camera. Configure these in the `AndroidManifest.xml` file. Android Studio will likely open this file automatically, but in case it doesn't, locate it under `android/app/src/main/`.
-
+
Scroll to the `Permissions` section and ensure these entries are included:
@@ -103,11 +103,11 @@ Scroll to the `Permissions` section and ensure these entries are included:
Save the file. With permissions in place, we are ready to try out the app on a real device! Connect an Android device to your computer. Within Android Studio, click the "Run" button, select the attached Android device, then click OK to build, install, and launch the app on your device.
-
+
Once again, upon tapping the Camera button on the Photo Gallery tab, the permission prompt should be displayed. Tap OK, then take a picture with the Camera. Afterward, the photo should appear in the app.
-
+
Our Photo Gallery app has just been deployed to Android and iOS devices. 🎉
diff --git a/versioned_docs/version-v6/core-concepts/webview.md b/versioned_docs/version-v6/core-concepts/webview.md
index a314d09f566..359ead6fae3 100644
--- a/versioned_docs/version-v6/core-concepts/webview.md
+++ b/versioned_docs/version-v6/core-concepts/webview.md
@@ -22,7 +22,7 @@ Ionic apps are built using [web technologies](../reference/glossary.md#web-stand
Modern Web Views offer many built-in HTML5 APIs for hardware functionality such as cameras, sensors, GPS, speakers, and Bluetooth, but sometimes it may also be necessary to access platform-specific hardware APIs. In Ionic apps, hardware APIs can be accessed through a bridge layer, typically by using native plugins which expose JavaScript APIs.
-
+
The Ionic Web View plugin is specialized for modern JavaScript apps. For both iOS and Android, app files are always hosted using the `http://` protocol with an optimized HTTP server that runs on the local device.
diff --git a/versioned_docs/version-v6/deployment/play-store.mdx b/versioned_docs/version-v6/deployment/play-store.mdx
index f871fe34963..ce2dd35317e 100644
--- a/versioned_docs/version-v6/deployment/play-store.mdx
+++ b/versioned_docs/version-v6/deployment/play-store.mdx
@@ -69,15 +69,15 @@ If you haven't made the switch to Android app bundles yet, you will need to opt
First, create a new app in the Google Play Console. In order to enable app signing, you'll need to navigate to the new release screen, on one of the Production, Open testing, closed testing, or internal testing pages.
Select the Create new release button as seen below (it doesn't matter which release type, since you don't have to actually go through with creating a new release right now):
-
+
Under the App integrity section, click the **Change app signing key** button:
-
+
Next, select the **Export and upload a key from Java Keystore** option. This is the only way in which you can retain the key and have Google Play use it for signing. If you're using Appflow to build Android apps in the cloud, this is also the required option so you can upload the keystore file to Appflow.
-
+
Follow the instructions on the screen to generate the Keystore and you can use the same Keystore file to sign your app in the Appflow dashboard as well. If you need any help generating the Keystore file, you can refer to our docs [here](https://ionic.io/docs/appflow/package/credentials#android-certificates).
Once the generated zip file has been uploaded, you're all set! Build an AAB binary signed with the keystore file then upload it to Google Play.
@@ -88,7 +88,7 @@ As of now, existing apps aren't required to use the AAB format, but you can stil
To opt into app signing, you'll need to upload the app signing key used to sign previous releases of the app. Navigate to Setup -> App integrity, then choose one of the two methods seen in the screenshot below. Once the key has been uploaded, you can enroll in Play App Signing.
-
+
:::tip
With smaller app sizes, improved performance, and enhanced security, the AAB binary format is a win for app developers and users alike. If you have an existing Android app using the APK format, consider migrating to AAB to take advantage of all the great features it provides.
@@ -140,7 +140,7 @@ Making a developer account with Google Play costs $25 USD.
Once a developer account has been created, go ahead and click the `Create an Application`
-
+
Be sure to fill out the description for the app along with providing screenshots and additional info.
When ready, upload the signed release AAB/APK that was generated and publish the app.
diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v3/intro.md b/versioned_docs/version-v6/developer-resources/guides/first-app-v3/intro.md
index 844aef86a7e..4d44434249f 100644
--- a/versioned_docs/version-v6/developer-resources/guides/first-app-v3/intro.md
+++ b/versioned_docs/version-v6/developer-resources/guides/first-app-v3/intro.md
@@ -2,7 +2,7 @@
The great thing about Ionic is that with one codebase, you can build for any platform using familiar web tools and languages. Follow along as we create a working Photo Gallery. Here’s the before and after:
-
+
It’s easy to get started. Reference code for this guide can be [found on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic3/).
@@ -76,7 +76,7 @@ And voilà! Your Ionic app is now running in a web browser. Most of your app can
There are three tabs: “Home”, “About”, and “Contact.” Click on the About tab. It’s a blank canvas, aka the perfect spot to add camera functionality. Let’s begin to transform the About page into a Photo Gallery. Ionic features LiveReload, so when you make changes and save them, the app is updated immediately!
-
+
Open the photo-gallery app folder in your favorite code editor of choice, then navigate to `/src/pages/about/about.html`. We see:
diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md b/versioned_docs/version-v6/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md
index da6f9462ecc..61d4605e865 100644
--- a/versioned_docs/version-v6/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md
+++ b/versioned_docs/version-v6/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md
@@ -17,7 +17,7 @@ $ ionic cordova plugin add cordova-plugin-ionic@latest --save
There are two unique values to provide: your app id and channel name. Sign into Appflow, then find the App Id on your app’s dashboard:
-
+
And we’ll just use “Master” as the channel name. Putting this together looks like:
@@ -168,7 +168,7 @@ $ git push ionic master
Log into the [Appflow dashboard](https://dashboard.ionicframework.com) and navigate to Deploy -> Builds. You’ll see this newest commit begin to build immediately. Since we assigned the Appflow plugin to the Master branch (the one we always Git Push to), the Channel label will also point to this commit, effectively auto-deploying this change to all app users:
-
+
A Channel points to a specific JavaScript Build or Snapshot of your app that will be shared with devices listening to that channel for updates. You can change which Build a Channel points to whenever you’d like.
@@ -180,7 +180,7 @@ What if you deploy a change, then realize that there is a bug? Or perhaps you’
On the Deploy Builds page, click the “Assign to Channel” button on the previous commit, then click “Deploy.” App users will be reverted to the previous version, and our “Photo Gallery” name has been restored.
-
+
This was just a taste of what you can do with Appflow Live Updates! You can also set up multiple deployment channels to send targeted updates to specific groups of users. Use it to run A/B tests, or target the distribution of updates by audience, geography, or test group.
diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v3/theming.md b/versioned_docs/version-v6/developer-resources/guides/first-app-v3/theming.md
index 19ef3364069..bc38fe59379 100644
--- a/versioned_docs/version-v6/developer-resources/guides/first-app-v3/theming.md
+++ b/versioned_docs/version-v6/developer-resources/guides/first-app-v3/theming.md
@@ -4,11 +4,11 @@ Previously, we converted our single use Camera app into an epic photo gallery. N
Ionic has five default colors, defined as Sass variables, that can be used to change the color of its UI components:
-
+
You can customize each color further by supplying a base and contract property. Base acts as the background color and contrast acts as the text color for most components. This provides much more flexible control over your styles:
-
+
You can find these colors defined in `src/theme/variables.scss`.
@@ -22,7 +22,7 @@ $colors: (
But wait, there’s more! Ionic automatically provides platform specific styles based on the device the application is running on, giving that native look and feel your users are used to:
-
+
In our app, this is clearly visible in how the header and the icons are styled.
@@ -40,7 +40,7 @@ imports: [
Now, the iOS version of our app has a Material Design skin!
-
+
Creating gorgeous-looking Ionic apps is easy with Sass variables and platform-specific styling. You now have everything you need to get started with Ionic. Go forth and build great apps!
diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md b/versioned_docs/version-v6/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md
index c4fac8c2871..0417b953de6 100644
--- a/versioned_docs/version-v6/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md
+++ b/versioned_docs/version-v6/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md
@@ -75,11 +75,11 @@ ionic serve
Tap on the Gallery tab, then the camera button. A runtime error should occur. In a browser, head over to the [Appflow dashboard](https://dashboard.ionicframework.com), then Monitor -> Monitoring. After a few minutes, the error should appear:
-
+
Clicking on the event gives us lots of details surrounding what happened, such as a full stack trace. In this instance, we see that the error occurred three times on Mac OS X in the Chrome web browser.
-
+
Given the proliferation of mobile devices and operating systems these days, this is immensely powerful. Armed with these details, we can hone in on the problem and fix it quickly.
diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v4/intro.md b/versioned_docs/version-v6/developer-resources/guides/first-app-v4/intro.md
index bffc7ea9c28..153afc5646f 100644
--- a/versioned_docs/version-v6/developer-resources/guides/first-app-v4/intro.md
+++ b/versioned_docs/version-v6/developer-resources/guides/first-app-v4/intro.md
@@ -2,7 +2,7 @@
The great thing about Ionic is that with one codebase, you can build for any platform using familiar web tools and languages. Follow along as we create a working Photo Gallery. Here’s the before and after:
-
+
It’s easy to get started. Note that all code referenced in this guide can be [found on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic4/).
@@ -65,7 +65,7 @@ And voilà! Your Ionic app is now running in a web browser. Most of your app can
There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to add camera functionality. Let’s begin to transform this page into a Photo Gallery. Ionic features LiveReload, so when you make changes and save them, the app is updated immediately!
-
+
Open the photo-gallery app folder in your favorite code editor of choice, then navigate to `/src/app/tab2/tab2.page.html`. We see:
diff --git a/versioned_docs/version-v6/developer-resources/guides/first-app-v4/theming.md b/versioned_docs/version-v6/developer-resources/guides/first-app-v4/theming.md
index 6170b2d673a..c185f6761c1 100644
--- a/versioned_docs/version-v6/developer-resources/guides/first-app-v4/theming.md
+++ b/versioned_docs/version-v6/developer-resources/guides/first-app-v4/theming.md
@@ -4,11 +4,11 @@ Previously, we converted our single use Camera app into an epic photo gallery. N
Ionic has nine default colors, defined as CSS variables, that can be used to change the color of its UI components:
-
+
You can customize each color further by supplying a base, contrast, shade, and tint properties. These provide flexible control over your styles:
-
+
You can find these colors defined in `src/theme/variables.scss`.
@@ -31,7 +31,7 @@ The easiest and most powerful way to create custom color palettes for your app
But wait, there’s more! Ionic automatically provides platform specific styles based on the device the application is running on, giving that native look and feel your users are used to:
-
+
In our app, this is clearly visible in how the header and the icons are styled.
@@ -49,7 +49,7 @@ imports: [
Now, the iOS version of our app has a Material Design skin!
-
+
Creating gorgeous-looking Ionic apps is easy with CSS variables and platform-specific styling. You now have everything you need to get started with Ionic.
diff --git a/versioned_docs/version-v6/developing/android.md b/versioned_docs/version-v6/developing/android.md
index e38e12e4a6a..2a6618158eb 100644
--- a/versioned_docs/version-v6/developing/android.md
+++ b/versioned_docs/version-v6/developing/android.md
@@ -31,12 +31,12 @@ Download Android Studio from the Android version history for information on Android versions.
@@ -153,7 +153,7 @@ Capacitor uses Android Studio to build and run apps to simulators and devices.
2. **In Android Studio, click the Run button and then select the target simulator or device.**
-
+
### Live reload
@@ -189,7 +189,7 @@ Chrome has web developer tool support for Android simulators and devices. Go to
Make sure your application is running on the device or simulator, or it will not show up in the list.
:::
-
+
### Viewing Native Logs
@@ -199,7 +199,7 @@ If running with Android Studio, native logs can be found in **Logcat**.
If the **Logcat** window is hidden, you can enable it in **View** » **Tool Windows** » **Logcat**.
:::
-
+
You can also access **Logcat** with [ADB](https://developer.android.com/studio/command-line/adb).
diff --git a/versioned_docs/version-v6/developing/ios.md b/versioned_docs/version-v6/developing/ios.md
index 16c88bf8aff..8d084816e67 100644
--- a/versioned_docs/version-v6/developing/ios.md
+++ b/versioned_docs/version-v6/developing/ios.md
@@ -37,7 +37,7 @@ All iOS apps must be code signed, even for development. Luckily, Xcode makes thi
Open Xcode and navigate to **Xcode** » **Preferences** » **Accounts**. Add an Apple ID if none are listed. Once logged in, a Personal Team will appear in the team list of the Apple ID.
-
+
### Creating an iOS Simulator
@@ -45,7 +45,7 @@ The iOS simulator emulates iOS devices on Macs. The following documentation is a
Open Xcode and navigate to **Window** » **Devices and Simulators**. Create an **iPhone 11** simulator if one does not already exist.
-
+
## Cordova Setup
@@ -96,11 +96,11 @@ Before apps can be deployed to iOS simulators and devices, the native project mu
1. **In Project navigator, select the project root to open the project editor. Under the **Identity** section, verify that the Package ID that was set matches the Bundle Identifier.**
- 
+ 
1. **In the same project editor, under the Signing section, ensure Automatically manage signing is enabled.** Then, select a Development Team. Given a Development Team, Xcode will attempt to automatically prepare provisioning and signing.
- 
+ 
## Running with Xcode
@@ -125,7 +125,7 @@ In this workflow, Xcode can automatically fix common compilation and signing iss
1. **In Xcode, select a target simulator or device and click the play button.**
- 
+ 
## Running with the Ionic CLI
@@ -171,7 +171,7 @@ If the **Develop** menu is hidden, enable it in **Safari** » **Preferences
If the app isn't listed, the Web Inspector may need to be enabled on the device in **Settings** » **Safari** » **Advanced** » **Web Inspector**.
:::
-
+
### Viewing Native Logs
@@ -181,4 +181,4 @@ If running with Xcode, native logs can be found in the Xcode **Console**.
If the **Console** is hidden, enable it in **View** » **Debug Area** » **Activate Console**.
:::
-
+
diff --git a/versioned_docs/version-v6/developing/tips.md b/versioned_docs/version-v6/developing/tips.md
index 2adf19ea58d..965665f9f00 100644
--- a/versioned_docs/version-v6/developing/tips.md
+++ b/versioned_docs/version-v6/developing/tips.md
@@ -122,7 +122,7 @@ By default, when an app is viewed in the browser, Ionic will apply the `md` mode
This will not change which platform the browser sees being used. The platform is determined by device detection and inspecting the user-agent. To change the platform, the user-agent must be changed. To do this, open up Chrome DevTools with Ctrl+Shift+I(Cmd+Option+I on Mac), and then toggle device mode on with Ctrl+Shift+M(Cmd+Option+M on Mac).
:::
-
+
Selecting devices from the device dropdown will change the user-agent, as well as the dimensions of the viewport.
diff --git a/versioned_docs/version-v6/intro/cli.md b/versioned_docs/version-v6/intro/cli.md
index 0ddf23169d3..38a8a37e4b8 100644
--- a/versioned_docs/version-v6/intro/cli.md
+++ b/versioned_docs/version-v6/intro/cli.md
@@ -48,7 +48,7 @@ Create an Ionic app using one of the pre-made app templates, or a blank one to s
ionic start
```
-
+
To learn more about starting Ionic apps, see the [Starting Guide](../developing/starting.md).
diff --git a/versioned_docs/version-v6/react/quickstart.md b/versioned_docs/version-v6/react/quickstart.md
index f6652a6b683..f571f212374 100644
--- a/versioned_docs/version-v6/react/quickstart.md
+++ b/versioned_docs/version-v6/react/quickstart.md
@@ -127,7 +127,7 @@ Now the `App` does not really have a lot to modify here. It's a basic example of
Currently, the `Home` component looks like so:
-
+
```tsx
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
diff --git a/versioned_docs/version-v6/react/your-first-app.md b/versioned_docs/version-v6/react/your-first-app.md
index 21e575e0908..00eea523811 100644
--- a/versioned_docs/version-v6/react/your-first-app.md
+++ b/versioned_docs/version-v6/react/your-first-app.md
@@ -124,7 +124,7 @@ And voilà! Your Ionic app is now running in a web browser. Most of your app can
There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately!
-
+
Open `/src/pages/Tab2.tsx`. We see:
diff --git a/versioned_docs/version-v6/react/your-first-app/2-taking-photos.md b/versioned_docs/version-v6/react/your-first-app/2-taking-photos.md
index 4c0b3dae2cd..c2f77911c00 100644
--- a/versioned_docs/version-v6/react/your-first-app/2-taking-photos.md
+++ b/versioned_docs/version-v6/react/your-first-app/2-taking-photos.md
@@ -72,7 +72,7 @@ const Tab2: React.FC = () => {
Save the file, and if you’re not already, restart the development server in your browser by running `ionic serve`. On the Photo Gallery tab, click the Camera button. If your computer has a webcam of any sort, a modal window appears. Take a selfie!
-
+
_(Your selfie is probably much better than mine)_
diff --git a/versioned_docs/version-v6/react/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v6/react/your-first-app/6-deploying-mobile.md
index 70b47820eb6..da780fa76ab 100644
--- a/versioned_docs/version-v6/react/your-first-app/6-deploying-mobile.md
+++ b/versioned_docs/version-v6/react/your-first-app/6-deploying-mobile.md
@@ -53,7 +53,7 @@ ionic cap open ios
In order for some native plugins to work, user permissions must be configured. In our photo gallery app, this includes the Camera plugin: iOS displays a modal dialog automatically after the first time that `Camera.getPhoto()` is called, prompting the user to allow the app to use the Camera. The permission that drives this is labeled “Privacy - Camera Usage.” To set it, the `Info.plist` file must be modified ([more details here](https://capacitorjs.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties."
-
+
Each setting in `Info.plist` has a low-level parameter name and a high-level name. By default, the property list editor shows the high-level names, but it's often useful to switch to showing the raw, low-level names. To do this, right-click anywhere in the property list editor and toggle "Raw Keys/Values."
@@ -63,15 +63,15 @@ Follow the same process to add the other two Keys required of the Camera plugin:
Next, click on `App` in the Project Navigator on the left-hand side, then within the `Signing & Capabilities` section, select your Development Team.
-
+
With permissions in place and Development Team selected, we are ready to try out the app on a real device! Connect an iOS device to your Mac computer, select it (`App -> Matthew’s iPhone` for me) then click the "Build" button to build, install, and launch the app on your device:
-
+
Upon tapping the Camera button on the Photo Gallery tab, the permission prompt will display. Tap OK, then take a picture with the Camera. Afterward, the photo shows in the app!
-
+
## Android
@@ -85,7 +85,7 @@ ionic cap open android
Similar to iOS, we must enable the correct permissions to use the Camera. Configure these in the `AndroidManifest.xml` file. Android Studio will likely open this file automatically, but in case it doesn't, locate it under `android/app/src/main/`.
-
+
Scroll to the `Permissions` section and ensure these entries are included:
@@ -96,11 +96,11 @@ Scroll to the `Permissions` section and ensure these entries are included:
Save the file. With permissions in place, we are ready to try out the app on a real device! Connect an Android device to your computer. Within Android Studio, click the "Run" button, select the attached Android device, then click OK to build, install, and launch the app on your device.
-
+
Once again, upon tapping the Camera button on the Photo Gallery tab, the permission prompt should be displayed. Tap OK, then take a picture with the Camera. Afterward, the photo should appear in the app.
-
+
Our Photo Gallery app has just been deployed to Android and iOS devices. 🎉
diff --git a/versioned_docs/version-v6/theming/advanced.md b/versioned_docs/version-v6/theming/advanced.md
index 632402e98b0..62dc40c6fef 100644
--- a/versioned_docs/version-v6/theming/advanced.md
+++ b/versioned_docs/version-v6/theming/advanced.md
@@ -32,9 +32,9 @@ The example below demonstrates how to use `theme-color` to style the browser int
```
-| Light Mode | Dark Mode |
-| -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
-|  |  |
+| Light Mode | Dark Mode |
+| ------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- |
+|  |  |
The `theme-color` meta can also be used to customize the toolbar in Safari on macOS Monterey or newer.
diff --git a/versioned_docs/version-v6/theming/dark-mode.md b/versioned_docs/version-v6/theming/dark-mode.md
index 707c4f92bb9..033d03c5127 100644
--- a/versioned_docs/version-v6/theming/dark-mode.md
+++ b/versioned_docs/version-v6/theming/dark-mode.md
@@ -137,9 +137,9 @@ This allows the page to indicate which color scheme it is comfortable being rend
color-scheme: light dark;
```
-| Default scrollbar | Scrollbar with `color-scheme` |
-| ------------------------------------------------------------------------ | -------------------------------------------------------------------- |
-|  |  |
+| Default scrollbar | Scrollbar with `color-scheme` |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+|  |  |
For more information regarding `color-scheme` please see https://web.dev/color-scheme/.
diff --git a/versioned_docs/version-v6/troubleshooting/native.md b/versioned_docs/version-v6/troubleshooting/native.md
index 2e38a5a977e..78d6a1f4ba3 100644
--- a/versioned_docs/version-v6/troubleshooting/native.md
+++ b/versioned_docs/version-v6/troubleshooting/native.md
@@ -38,13 +38,13 @@ Running an app on an iOS device requires a provisioning profile. If a provisioni
3. In Project navigator, select the project root to open the project editor. Under the **Identity** section, verify that the Package ID that was set matches the Bundle Identifier.
- 
+ 
4. In the same project editor, under the Signing section, ensure Automatically manage signing is enabled.
Then, select a Development Team. Given a Development Team, Xcode will attempt to automatically prepare provisioning and signing.
- 
+ 
## Xcode build error 65
diff --git a/versioned_docs/version-v6/vue/quickstart.md b/versioned_docs/version-v6/vue/quickstart.md
index 675f18476aa..3cfb7748106 100644
--- a/versioned_docs/version-v6/vue/quickstart.md
+++ b/versioned_docs/version-v6/vue/quickstart.md
@@ -185,7 +185,7 @@ Now the `App` component does not really have a lot to modify here. It is a basic
Currently, the `Home` component looks like so:
-
+
```html
diff --git a/versioned_docs/version-v6/vue/your-first-app.md b/versioned_docs/version-v6/vue/your-first-app.md
index df78db1f7d0..579c543d5f5 100644
--- a/versioned_docs/version-v6/vue/your-first-app.md
+++ b/versioned_docs/version-v6/vue/your-first-app.md
@@ -125,7 +125,7 @@ And voilà! Your Ionic app is now running in a web browser. Most of your app can
There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately!
-
+
Open `/src/views/Tab2.vue`. We see:
diff --git a/versioned_docs/version-v6/vue/your-first-app/2-taking-photos.md b/versioned_docs/version-v6/vue/your-first-app/2-taking-photos.md
index 74513752c2d..80d185e5cfe 100644
--- a/versioned_docs/version-v6/vue/your-first-app/2-taking-photos.md
+++ b/versioned_docs/version-v6/vue/your-first-app/2-taking-photos.md
@@ -80,7 +80,7 @@ export default {
Save the file, and if you’re not already, restart the development server in your browser by running `ionic serve`. On the Photo Gallery tab, click the Camera button. If your computer has a webcam of any sort, a modal window appears. Take a selfie!
-
+
_(Your selfie is probably much better than mine)_
diff --git a/versioned_docs/version-v6/vue/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v6/vue/your-first-app/6-deploying-mobile.md
index 08cab4a0596..7258d32bcfd 100644
--- a/versioned_docs/version-v6/vue/your-first-app/6-deploying-mobile.md
+++ b/versioned_docs/version-v6/vue/your-first-app/6-deploying-mobile.md
@@ -64,7 +64,7 @@ ionic cap open ios
In order for some native plugins to work, user permissions must be configured. In our photo gallery app, this includes the Camera plugin: iOS displays a modal dialog automatically after the first time that `Camera.getPhoto()` is called, prompting the user to allow the app to use the Camera. The permission that drives this is labeled "Privacy - Camera Usage." To set it, the `Info.plist` file must be modified ([more details here](https://capacitorjs.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties."
-
+
Each setting in `Info.plist` has a low-level parameter name and a high-level name. By default, the property list editor shows the high-level names, but it's often useful to switch to showing the raw, low-level names. To do this, right-click anywhere in the property list editor and toggle "Raw Keys/Values."
@@ -74,15 +74,15 @@ Follow the same process to add the other two Keys required of the Camera plugin:
Next, click on `App` in the Project Navigator on the left-hand side, then within the `Signing & Capabilities` section, select your Development Team.
-
+
With permissions in place and Development Team selected, we are ready to try out the app on a real device! Connect an iOS device to your Mac computer, select it (`App -> Matthew’s iPhone` for me) then click the "Build" button to build, install, and launch the app on your device:
-
+
Upon tapping the Camera button on the Photo Gallery tab, the permission prompt will display. Tap OK, then take a picture with the Camera. Afterward, the photo shows in the app!
-
+
## Android
@@ -96,7 +96,7 @@ ionic cap open android
Similar to iOS, we must enable the correct permissions to use the Camera. Configure these in the `AndroidManifest.xml` file. Android Studio will likely open this file automatically, but in case it doesn't, locate it under `android/app/src/main/`.
-
+
Scroll to the `Permissions` section and ensure these entries are included:
@@ -107,11 +107,11 @@ Scroll to the `Permissions` section and ensure these entries are included:
Save the file. With permissions in place, we are ready to try out the app on a real device! Connect an Android device to your computer. Within Android Studio, click the "Run" button, select the attached Android device, then click OK to build, install, and launch the app on your device.
-
+
Once again, upon tapping the Camera button on the Photo Gallery tab, the permission prompt should be displayed. Tap OK, then take a picture with the Camera. Afterward, the photo should appear in the app.
-
+
Our Photo Gallery app has just been deployed to Android and iOS devices. 🎉
diff --git a/versioned_docs/version-v7/angular/lifecycle.md b/versioned_docs/version-v7/angular/lifecycle.md
index 0f981e64dc3..21d40f06104 100644
--- a/versioned_docs/version-v7/angular/lifecycle.md
+++ b/versioned_docs/version-v7/angular/lifecycle.md
@@ -13,7 +13,7 @@ sidebar_label: Lifecycle
This guide covers how the page life cycle works in an app built with Ionic and Angular.
-
+
## Angular Life Cycle Events
@@ -47,7 +47,7 @@ The difference between `ionViewWillEnter` and `ionViewDidEnter` is when they fir
For `ionViewWillLeave` and `ionViewDidLeave`, `ionViewWillLeave` gets called directly before the transition away from the current page begins, and `ionViewDidLeave` does not get called until after the new page gets successfully transitioned into (after the new pages `ionViewDidEnter` fires).
-
+
## How Ionic Handles the Life of a Page
diff --git a/versioned_docs/version-v7/angular/your-first-app.md b/versioned_docs/version-v7/angular/your-first-app.md
index 06abbc374ee..bfc88a1c477 100644
--- a/versioned_docs/version-v7/angular/your-first-app.md
+++ b/versioned_docs/version-v7/angular/your-first-app.md
@@ -126,7 +126,7 @@ And voilà! Your Ionic app is now running in a web browser. Most of your app can
There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately!
-
+
Open the photo-gallery app folder in your code editor of choice, then navigate to `/src/app/tab2/tab2.page.html`. We see:
diff --git a/versioned_docs/version-v7/angular/your-first-app/2-taking-photos.md b/versioned_docs/version-v7/angular/your-first-app/2-taking-photos.md
index 2c94527390e..0e0cd078a70 100644
--- a/versioned_docs/version-v7/angular/your-first-app/2-taking-photos.md
+++ b/versioned_docs/version-v7/angular/your-first-app/2-taking-photos.md
@@ -70,7 +70,7 @@ Then, open `tab2.page.html` and call the `addPhotoToGallery()` function when the
Save the file, and if it's not running already, restart the development server in your browser by running `ionic serve`. On the Photo Gallery tab, click the Camera button. If your computer has a webcam of any sort, a modal window appears. Take a selfie!
-
+
_(Your selfie is probably much better than mine)_
diff --git a/versioned_docs/version-v7/angular/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v7/angular/your-first-app/6-deploying-mobile.md
index e30d8acd79d..e9637084b7b 100644
--- a/versioned_docs/version-v7/angular/your-first-app/6-deploying-mobile.md
+++ b/versioned_docs/version-v7/angular/your-first-app/6-deploying-mobile.md
@@ -60,7 +60,7 @@ ionic cap open ios
In order for some native plugins to work, user permissions must be configured. In our photo gallery app, this includes the Camera plugin: iOS displays a modal dialog automatically after the first time that `Camera.getPhoto()` is called, prompting the user to allow the app to use the Camera. The permission that drives this is labeled “Privacy - Camera Usage.” To set it, the `Info.plist` file must be modified ([more details here](https://capacitorjs.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties."
-
+
Each setting in `Info.plist` has a low-level parameter name and a high-level name. By default, the property list editor shows the high-level names, but it's often useful to switch to showing the raw, low-level names. To do this, right-click anywhere in the property list editor and toggle "Raw Keys/Values."
@@ -70,15 +70,15 @@ Follow the same process to add the other two Keys required of the Camera plugin:
Next, click on `App` in the Project Navigator on the left-hand side, then within the `Signing & Capabilities` section, select your Development Team.
-
+
With permissions in place and Development Team selected, we are ready to try out the app on a real device! Connect an iOS device to your Mac computer, select it (`App -> Matthew’s iPhone` for me) then click the "Build" button to build, install, and launch the app on your device:
-
+
Upon tapping the Camera button on the Photo Gallery tab, the permission prompt will display. Tap OK, then take a picture with the Camera. Afterward, the photo shows in the app!
-
+
## Android Deployment
@@ -92,7 +92,7 @@ ionic cap open android
Similar to iOS, we must enable the correct permissions to use the Camera. Configure these in the `AndroidManifest.xml` file. Android Studio will likely open this file automatically, but in case it doesn't, locate it under `android/app/src/main/`.
-
+
Scroll to the `Permissions` section and ensure these entries are included:
@@ -103,11 +103,11 @@ Scroll to the `Permissions` section and ensure these entries are included:
Save the file. With permissions in place, we are ready to try out the app on a real device! Connect an Android device to your computer. Within Android Studio, click the "Run" button, select the attached Android device, then click OK to build, install, and launch the app on your device.
-
+
Once again, upon tapping the Camera button on the Photo Gallery tab, the permission prompt should be displayed. Tap OK, then take a picture with the Camera. Afterward, the photo should appear in the app.
-
+
Our Photo Gallery app has just been deployed to Android and iOS devices. 🎉
diff --git a/versioned_docs/version-v7/core-concepts/webview.md b/versioned_docs/version-v7/core-concepts/webview.md
index a314d09f566..359ead6fae3 100644
--- a/versioned_docs/version-v7/core-concepts/webview.md
+++ b/versioned_docs/version-v7/core-concepts/webview.md
@@ -22,7 +22,7 @@ Ionic apps are built using [web technologies](../reference/glossary.md#web-stand
Modern Web Views offer many built-in HTML5 APIs for hardware functionality such as cameras, sensors, GPS, speakers, and Bluetooth, but sometimes it may also be necessary to access platform-specific hardware APIs. In Ionic apps, hardware APIs can be accessed through a bridge layer, typically by using native plugins which expose JavaScript APIs.
-
+
The Ionic Web View plugin is specialized for modern JavaScript apps. For both iOS and Android, app files are always hosted using the `http://` protocol with an optimized HTTP server that runs on the local device.
diff --git a/versioned_docs/version-v7/deployment/play-store.mdx b/versioned_docs/version-v7/deployment/play-store.mdx
index 4a68ada3389..4dfdb71268c 100644
--- a/versioned_docs/version-v7/deployment/play-store.mdx
+++ b/versioned_docs/version-v7/deployment/play-store.mdx
@@ -69,15 +69,15 @@ If you haven't made the switch to Android app bundles yet, you will need to opt
First, create a new app in the Google Play Console. In order to enable app signing, you'll need to navigate to the new release screen, on one of the Production, Open testing, closed testing, or internal testing pages.
Select the Create new release button as seen below (it doesn't matter which release type, since you don't have to actually go through with creating a new release right now):
-
+
Under the App integrity section, click the **Change app signing key** button:
-
+
Next, select the **Export and upload a key from Java Keystore** option. This is the only way in which you can retain the key and have Google Play use it for signing. If you're using Appflow to build Android apps in the cloud, this is also the required option so you can upload the keystore file to Appflow.
-
+
Follow the instructions on the screen to generate the Keystore and you can use the same Keystore file to sign your app in the Appflow dashboard as well. If you need any help generating the Keystore file, you can refer to our docs [here](https://ionic.io/docs/appflow/package/credentials#android-certificates).
Once the generated zip file has been uploaded, you're all set! Build an AAB binary signed with the keystore file then upload it to Google Play.
@@ -88,7 +88,7 @@ As of now, existing apps aren't required to use the AAB format, but you can stil
To opt into app signing, you'll need to upload the app signing key used to sign previous releases of the app. Navigate to Setup -> App integrity, then choose one of the two methods seen in the screenshot below. Once the key has been uploaded, you can enroll in Play App Signing.
-
+
:::tip
With smaller app sizes, improved performance, and enhanced security, the AAB binary format is a win for app developers and users alike. If you have an existing Android app using the APK format, consider migrating to AAB to take advantage of all the great features it provides.
@@ -140,7 +140,7 @@ Making a developer account with Google Play costs $25 USD.
Once a developer account has been created, go ahead and click the `Create an Application`
-
+
Be sure to fill out the description for the app along with providing screenshots and additional info.
When ready, upload the signed release AAB/APK that was generated and publish the app.
diff --git a/versioned_docs/version-v7/developer-resources/guides/first-app-v3/intro.md b/versioned_docs/version-v7/developer-resources/guides/first-app-v3/intro.md
index 844aef86a7e..4d44434249f 100644
--- a/versioned_docs/version-v7/developer-resources/guides/first-app-v3/intro.md
+++ b/versioned_docs/version-v7/developer-resources/guides/first-app-v3/intro.md
@@ -2,7 +2,7 @@
The great thing about Ionic is that with one codebase, you can build for any platform using familiar web tools and languages. Follow along as we create a working Photo Gallery. Here’s the before and after:
-
+
It’s easy to get started. Reference code for this guide can be [found on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic3/).
@@ -76,7 +76,7 @@ And voilà! Your Ionic app is now running in a web browser. Most of your app can
There are three tabs: “Home”, “About”, and “Contact.” Click on the About tab. It’s a blank canvas, aka the perfect spot to add camera functionality. Let’s begin to transform the About page into a Photo Gallery. Ionic features LiveReload, so when you make changes and save them, the app is updated immediately!
-
+
Open the photo-gallery app folder in your favorite code editor of choice, then navigate to `/src/pages/about/about.html`. We see:
diff --git a/versioned_docs/version-v7/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md b/versioned_docs/version-v7/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md
index b33fb66ea8a..a1e96838779 100644
--- a/versioned_docs/version-v7/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md
+++ b/versioned_docs/version-v7/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md
@@ -17,7 +17,7 @@ $ ionic cordova plugin add cordova-plugin-ionic@latest --save
There are two unique values to provide: your app id and channel name. Sign into Appflow, then find the App Id on your app’s dashboard:
-
+
And we’ll just use “Master” as the channel name. Putting this together looks like:
@@ -168,7 +168,7 @@ $ git push ionic master
Log into the [Appflow dashboard](https://dashboard.ionicframework.com) and navigate to Deploy -> Builds. You’ll see this newest commit begin to build immediately. Since we assigned the Appflow plugin to the Master branch (the one we always Git Push to), the Channel label will also point to this commit, effectively auto-deploying this change to all app users:
-
+
A Channel points to a specific JavaScript Build or Snapshot of your app that will be shared with devices listening to that channel for updates. You can change which Build a Channel points to whenever you’d like.
@@ -180,7 +180,7 @@ What if you deploy a change, then realize that there is a bug? Or perhaps you’
On the Deploy Builds page, click the “Assign to Channel” button on the previous commit, then click “Deploy.” App users will be reverted to the previous version, and our “Photo Gallery” name has been restored.
-
+
This was just a taste of what you can do with Appflow Live Updates! You can also set up multiple deployment channels to send targeted updates to specific groups of users. Use it to run A/B tests, or target the distribution of updates by audience, geography, or test group.
diff --git a/versioned_docs/version-v7/developer-resources/guides/first-app-v3/theming.md b/versioned_docs/version-v7/developer-resources/guides/first-app-v3/theming.md
index 19ef3364069..bc38fe59379 100644
--- a/versioned_docs/version-v7/developer-resources/guides/first-app-v3/theming.md
+++ b/versioned_docs/version-v7/developer-resources/guides/first-app-v3/theming.md
@@ -4,11 +4,11 @@ Previously, we converted our single use Camera app into an epic photo gallery. N
Ionic has five default colors, defined as Sass variables, that can be used to change the color of its UI components:
-
+
You can customize each color further by supplying a base and contract property. Base acts as the background color and contrast acts as the text color for most components. This provides much more flexible control over your styles:
-
+
You can find these colors defined in `src/theme/variables.scss`.
@@ -22,7 +22,7 @@ $colors: (
But wait, there’s more! Ionic automatically provides platform specific styles based on the device the application is running on, giving that native look and feel your users are used to:
-
+
In our app, this is clearly visible in how the header and the icons are styled.
@@ -40,7 +40,7 @@ imports: [
Now, the iOS version of our app has a Material Design skin!
-
+
Creating gorgeous-looking Ionic apps is easy with Sass variables and platform-specific styling. You now have everything you need to get started with Ionic. Go forth and build great apps!
diff --git a/versioned_docs/version-v7/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md b/versioned_docs/version-v7/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md
index c4fac8c2871..0417b953de6 100644
--- a/versioned_docs/version-v7/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md
+++ b/versioned_docs/version-v7/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md
@@ -75,11 +75,11 @@ ionic serve
Tap on the Gallery tab, then the camera button. A runtime error should occur. In a browser, head over to the [Appflow dashboard](https://dashboard.ionicframework.com), then Monitor -> Monitoring. After a few minutes, the error should appear:
-
+
Clicking on the event gives us lots of details surrounding what happened, such as a full stack trace. In this instance, we see that the error occurred three times on Mac OS X in the Chrome web browser.
-
+
Given the proliferation of mobile devices and operating systems these days, this is immensely powerful. Armed with these details, we can hone in on the problem and fix it quickly.
diff --git a/versioned_docs/version-v7/developer-resources/guides/first-app-v4/intro.md b/versioned_docs/version-v7/developer-resources/guides/first-app-v4/intro.md
index bffc7ea9c28..f66e6d09464 100644
--- a/versioned_docs/version-v7/developer-resources/guides/first-app-v4/intro.md
+++ b/versioned_docs/version-v7/developer-resources/guides/first-app-v4/intro.md
@@ -2,7 +2,7 @@
The great thing about Ionic is that with one codebase, you can build for any platform using familiar web tools and languages. Follow along as we create a working Photo Gallery. Here’s the before and after:
-
+
It’s easy to get started. Note that all code referenced in this guide can be [found on GitHub](https://github.com/ionic-team/photo-gallery-tutorial-ionic4/).
@@ -65,7 +65,7 @@ And voilà! Your Ionic app is now running in a web browser. Most of your app can
There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to add camera functionality. Let’s begin to transform this page into a Photo Gallery. Ionic features LiveReload, so when you make changes and save them, the app is updated immediately!
-
+
Open the photo-gallery app folder in your favorite code editor of choice, then navigate to `/src/app/tab2/tab2.page.html`. We see:
diff --git a/versioned_docs/version-v7/developer-resources/guides/first-app-v4/theming.md b/versioned_docs/version-v7/developer-resources/guides/first-app-v4/theming.md
index 6170b2d673a..c185f6761c1 100644
--- a/versioned_docs/version-v7/developer-resources/guides/first-app-v4/theming.md
+++ b/versioned_docs/version-v7/developer-resources/guides/first-app-v4/theming.md
@@ -4,11 +4,11 @@ Previously, we converted our single use Camera app into an epic photo gallery. N
Ionic has nine default colors, defined as CSS variables, that can be used to change the color of its UI components:
-
+
You can customize each color further by supplying a base, contrast, shade, and tint properties. These provide flexible control over your styles:
-
+
You can find these colors defined in `src/theme/variables.scss`.
@@ -31,7 +31,7 @@ The easiest and most powerful way to create custom color palettes for your app
But wait, there’s more! Ionic automatically provides platform specific styles based on the device the application is running on, giving that native look and feel your users are used to:
-
+
In our app, this is clearly visible in how the header and the icons are styled.
@@ -49,7 +49,7 @@ imports: [
Now, the iOS version of our app has a Material Design skin!
-
+
Creating gorgeous-looking Ionic apps is easy with CSS variables and platform-specific styling. You now have everything you need to get started with Ionic.
diff --git a/versioned_docs/version-v7/developing/tips.md b/versioned_docs/version-v7/developing/tips.md
index 2adf19ea58d..965665f9f00 100644
--- a/versioned_docs/version-v7/developing/tips.md
+++ b/versioned_docs/version-v7/developing/tips.md
@@ -122,7 +122,7 @@ By default, when an app is viewed in the browser, Ionic will apply the `md` mode
This will not change which platform the browser sees being used. The platform is determined by device detection and inspecting the user-agent. To change the platform, the user-agent must be changed. To do this, open up Chrome DevTools with Ctrl+Shift+I(Cmd+Option+I on Mac), and then toggle device mode on with Ctrl+Shift+M(Cmd+Option+M on Mac).
:::
-
+
Selecting devices from the device dropdown will change the user-agent, as well as the dimensions of the viewport.
diff --git a/versioned_docs/version-v7/intro/cli.md b/versioned_docs/version-v7/intro/cli.md
index 0ddf23169d3..38a8a37e4b8 100644
--- a/versioned_docs/version-v7/intro/cli.md
+++ b/versioned_docs/version-v7/intro/cli.md
@@ -48,7 +48,7 @@ Create an Ionic app using one of the pre-made app templates, or a blank one to s
ionic start
```
-
+
To learn more about starting Ionic apps, see the [Starting Guide](../developing/starting.md).
diff --git a/versioned_docs/version-v7/react/quickstart.md b/versioned_docs/version-v7/react/quickstart.md
index 188a030601d..7ed917c4292 100644
--- a/versioned_docs/version-v7/react/quickstart.md
+++ b/versioned_docs/version-v7/react/quickstart.md
@@ -127,7 +127,7 @@ Now the `App` does not really have a lot to modify here. It's a basic example of
Currently, the `Home` component looks like so:
-
+
```tsx
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
diff --git a/versioned_docs/version-v7/react/your-first-app.md b/versioned_docs/version-v7/react/your-first-app.md
index 5932c238b22..ca067a3cd3c 100644
--- a/versioned_docs/version-v7/react/your-first-app.md
+++ b/versioned_docs/version-v7/react/your-first-app.md
@@ -124,7 +124,7 @@ And voilà! Your Ionic app is now running in a web browser. Most of your app can
There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately!
-
+
Open `/src/pages/Tab2.tsx`. We see:
diff --git a/versioned_docs/version-v7/react/your-first-app/2-taking-photos.md b/versioned_docs/version-v7/react/your-first-app/2-taking-photos.md
index ac70c03c26c..23f63ef6166 100644
--- a/versioned_docs/version-v7/react/your-first-app/2-taking-photos.md
+++ b/versioned_docs/version-v7/react/your-first-app/2-taking-photos.md
@@ -72,7 +72,7 @@ const Tab2: React.FC = () => {
Save the file, and if you’re not already, restart the development server in your browser by running `ionic serve`. On the Photo Gallery tab, click the Camera button. If your computer has a webcam of any sort, a modal window appears. Take a selfie!
-
+
_(Your selfie is probably much better than mine)_
diff --git a/versioned_docs/version-v7/react/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v7/react/your-first-app/6-deploying-mobile.md
index 70b47820eb6..da780fa76ab 100644
--- a/versioned_docs/version-v7/react/your-first-app/6-deploying-mobile.md
+++ b/versioned_docs/version-v7/react/your-first-app/6-deploying-mobile.md
@@ -53,7 +53,7 @@ ionic cap open ios
In order for some native plugins to work, user permissions must be configured. In our photo gallery app, this includes the Camera plugin: iOS displays a modal dialog automatically after the first time that `Camera.getPhoto()` is called, prompting the user to allow the app to use the Camera. The permission that drives this is labeled “Privacy - Camera Usage.” To set it, the `Info.plist` file must be modified ([more details here](https://capacitorjs.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties."
-
+
Each setting in `Info.plist` has a low-level parameter name and a high-level name. By default, the property list editor shows the high-level names, but it's often useful to switch to showing the raw, low-level names. To do this, right-click anywhere in the property list editor and toggle "Raw Keys/Values."
@@ -63,15 +63,15 @@ Follow the same process to add the other two Keys required of the Camera plugin:
Next, click on `App` in the Project Navigator on the left-hand side, then within the `Signing & Capabilities` section, select your Development Team.
-
+
With permissions in place and Development Team selected, we are ready to try out the app on a real device! Connect an iOS device to your Mac computer, select it (`App -> Matthew’s iPhone` for me) then click the "Build" button to build, install, and launch the app on your device:
-
+
Upon tapping the Camera button on the Photo Gallery tab, the permission prompt will display. Tap OK, then take a picture with the Camera. Afterward, the photo shows in the app!
-
+
## Android
@@ -85,7 +85,7 @@ ionic cap open android
Similar to iOS, we must enable the correct permissions to use the Camera. Configure these in the `AndroidManifest.xml` file. Android Studio will likely open this file automatically, but in case it doesn't, locate it under `android/app/src/main/`.
-
+
Scroll to the `Permissions` section and ensure these entries are included:
@@ -96,11 +96,11 @@ Scroll to the `Permissions` section and ensure these entries are included:
Save the file. With permissions in place, we are ready to try out the app on a real device! Connect an Android device to your computer. Within Android Studio, click the "Run" button, select the attached Android device, then click OK to build, install, and launch the app on your device.
-
+
Once again, upon tapping the Camera button on the Photo Gallery tab, the permission prompt should be displayed. Tap OK, then take a picture with the Camera. Afterward, the photo should appear in the app.
-
+
Our Photo Gallery app has just been deployed to Android and iOS devices. 🎉
diff --git a/versioned_docs/version-v7/theming/advanced.md b/versioned_docs/version-v7/theming/advanced.md
index a0aad500796..bcf0b2b0747 100644
--- a/versioned_docs/version-v7/theming/advanced.md
+++ b/versioned_docs/version-v7/theming/advanced.md
@@ -34,9 +34,9 @@ The example below demonstrates how to use `theme-color` to style the browser int
```
-| Light Mode | Dark Mode |
-| -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
-|  |  |
+| Light Mode | Dark Mode |
+| ------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- |
+|  |  |
The `theme-color` meta can also be used to customize the toolbar in Safari on macOS Monterey or newer.
diff --git a/versioned_docs/version-v7/theming/dark-mode.md b/versioned_docs/version-v7/theming/dark-mode.md
index e4c36d9ecb8..2afd8578ddf 100644
--- a/versioned_docs/version-v7/theming/dark-mode.md
+++ b/versioned_docs/version-v7/theming/dark-mode.md
@@ -101,9 +101,9 @@ This allows the page to indicate which color scheme it is comfortable being rend
color-scheme: light dark;
```
-| Default scrollbar | Scrollbar with `color-scheme` |
-| ------------------------------------------------------------------------ | -------------------------------------------------------------------- |
-|  |  |
+| Default scrollbar | Scrollbar with `color-scheme` |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+|  |  |
For more information regarding `color-scheme` please see https://web.dev/color-scheme/.
diff --git a/versioned_docs/version-v7/troubleshooting/native.md b/versioned_docs/version-v7/troubleshooting/native.md
index b757c5d0d59..bdaf0c244eb 100644
--- a/versioned_docs/version-v7/troubleshooting/native.md
+++ b/versioned_docs/version-v7/troubleshooting/native.md
@@ -38,12 +38,12 @@ Running an app on an iOS device requires a provisioning profile. If a provisioni
3. In Project navigator, select the project root to open the project editor. Under the **Identity** section, verify that the Package ID that was set matches the Bundle Identifier.
- 
+ 
4. In the same project editor, under the Signing section, ensure Automatically manage signing is enabled. Then, select a Development Team. Given a Development Team, Xcode will attempt to automatically prepare provisioning and signing.
- 
+ 
## Xcode build error 65
diff --git a/versioned_docs/version-v7/vue/quickstart.md b/versioned_docs/version-v7/vue/quickstart.md
index 6f2e36942bb..d116f03b086 100644
--- a/versioned_docs/version-v7/vue/quickstart.md
+++ b/versioned_docs/version-v7/vue/quickstart.md
@@ -189,7 +189,7 @@ Now the `App` component does not really have a lot to modify here. It is a basic
Currently, the `Home` component looks like so:
-
+
```html
diff --git a/versioned_docs/version-v7/vue/your-first-app.md b/versioned_docs/version-v7/vue/your-first-app.md
index 048198d77e6..6c7055b19bd 100644
--- a/versioned_docs/version-v7/vue/your-first-app.md
+++ b/versioned_docs/version-v7/vue/your-first-app.md
@@ -123,7 +123,7 @@ And voilà! Your Ionic app is now running in a web browser. Most of your app can
There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately!
-
+
Open `/src/views/Tab2.vue`. We see:
diff --git a/versioned_docs/version-v7/vue/your-first-app/2-taking-photos.md b/versioned_docs/version-v7/vue/your-first-app/2-taking-photos.md
index ae8c706f550..859c3a4565a 100644
--- a/versioned_docs/version-v7/vue/your-first-app/2-taking-photos.md
+++ b/versioned_docs/version-v7/vue/your-first-app/2-taking-photos.md
@@ -78,7 +78,7 @@ const { takePhoto } = usePhotoGallery();
Save the file. Start the development server via `ionic serve` if it is not already running. In your browser, on the Photo Gallery tab, click the Camera button. If your computer has a webcam of any sort, a modal window appears. Take a selfie!
-
+
_(Your selfie is probably much better than mine)_
diff --git a/versioned_docs/version-v7/vue/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v7/vue/your-first-app/6-deploying-mobile.md
index 08cab4a0596..6a109ca180e 100644
--- a/versioned_docs/version-v7/vue/your-first-app/6-deploying-mobile.md
+++ b/versioned_docs/version-v7/vue/your-first-app/6-deploying-mobile.md
@@ -64,7 +64,7 @@ ionic cap open ios
In order for some native plugins to work, user permissions must be configured. In our photo gallery app, this includes the Camera plugin: iOS displays a modal dialog automatically after the first time that `Camera.getPhoto()` is called, prompting the user to allow the app to use the Camera. The permission that drives this is labeled "Privacy - Camera Usage." To set it, the `Info.plist` file must be modified ([more details here](https://capacitorjs.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties."
-
+
Each setting in `Info.plist` has a low-level parameter name and a high-level name. By default, the property list editor shows the high-level names, but it's often useful to switch to showing the raw, low-level names. To do this, right-click anywhere in the property list editor and toggle "Raw Keys/Values."
@@ -74,15 +74,15 @@ Follow the same process to add the other two Keys required of the Camera plugin:
Next, click on `App` in the Project Navigator on the left-hand side, then within the `Signing & Capabilities` section, select your Development Team.
-
+
With permissions in place and Development Team selected, we are ready to try out the app on a real device! Connect an iOS device to your Mac computer, select it (`App -> Matthew’s iPhone` for me) then click the "Build" button to build, install, and launch the app on your device:
-
+
Upon tapping the Camera button on the Photo Gallery tab, the permission prompt will display. Tap OK, then take a picture with the Camera. Afterward, the photo shows in the app!
-
+
## Android
@@ -96,7 +96,7 @@ ionic cap open android
Similar to iOS, we must enable the correct permissions to use the Camera. Configure these in the `AndroidManifest.xml` file. Android Studio will likely open this file automatically, but in case it doesn't, locate it under `android/app/src/main/`.
-
+
Scroll to the `Permissions` section and ensure these entries are included:
@@ -107,11 +107,11 @@ Scroll to the `Permissions` section and ensure these entries are included:
Save the file. With permissions in place, we are ready to try out the app on a real device! Connect an Android device to your computer. Within Android Studio, click the "Run" button, select the attached Android device, then click OK to build, install, and launch the app on your device.
-
+
Once again, upon tapping the Camera button on the Photo Gallery tab, the permission prompt should be displayed. Tap OK, then take a picture with the Camera. Afterward, the photo should appear in the app.
-
+
Our Photo Gallery app has just been deployed to Android and iOS devices. 🎉