diff --git a/docs/api/action-sheet.md b/docs/api/action-sheet.md index afbec37e566..767667ceae8 100644 --- a/docs/api/action-sheet.md +++ b/docs/api/action-sheet.md @@ -99,7 +99,7 @@ import CssCustomProperties from '@site/static/usage/v8/action-sheet/theming/css- ### Screen Readers -Action Sheets set aria properties in order to be [accessible](../reference/glossary#a11y) to screen readers, but these properties can be overridden if they aren't descriptive enough or don't align with how the action sheet is being used in an app. +Action Sheets set aria properties in order to be [accessible](../reference/glossary.mdx#a11y) to screen readers, but these properties can be overridden if they aren't descriptive enough or don't align with how the action sheet is being used in an app. #### Role diff --git a/docs/api/alert.md b/docs/api/alert.md index b35622c1faf..6a9d79dcc14 100644 --- a/docs/api/alert.md +++ b/docs/api/alert.md @@ -113,7 +113,7 @@ import Customization from '@site/static/usage/v8/alert/customization/index.md'; ### Screen Readers -Alerts set aria properties in order to be [accessible](../reference/glossary#a11y) to screen readers, but these properties can be overridden if they aren't descriptive enough or don't align with how the alert is being used in an app. +Alerts set aria properties in order to be [accessible](../reference/glossary.mdx#a11y) to screen readers, but these properties can be overridden if they aren't descriptive enough or don't align with how the alert is being used in an app. #### Role diff --git a/docs/api/col.md b/docs/api/col.md index ebc54b7f02f..0a201dfa091 100644 --- a/docs/api/col.md +++ b/docs/api/col.md @@ -25,7 +25,7 @@ See the [grid](./grid) documentation for more information. ## Column Alignment -By default, columns will stretch to fill the entire height of the row. Columns are [flex items](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item), so there are several [CSS classes](/docs/layout/css-utilities#flex-item-properties) that can be applied to a column to customize this behavior. +By default, columns will stretch to fill the entire height of the row. Columns are [flex items](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item), so there are several [CSS classes](/docs/layout/css-utilities.mdx#flex-item-properties) that can be applied to a column to customize this behavior. diff --git a/docs/api/content.md b/docs/api/content.md index 832e22cd9d1..10219dec0dd 100644 --- a/docs/api/content.md +++ b/docs/api/content.md @@ -22,7 +22,7 @@ The content component provides an easy to use content area with some useful meth to control the scrollable area. There should only be one content in a single view. -Content, along with many other Ionic components, can be customized to modify its padding, margin, and more using the global styles provided in the [CSS Utilities](/docs/layout/css-utilities) or by individually styling it using CSS and the available [CSS Custom Properties](#css-custom-properties). +Content, along with many other Ionic components, can be customized to modify its padding, margin, and more using the global styles provided in the [CSS Utilities](/docs/layout/css-utilities.mdx) or by individually styling it using CSS and the available [CSS Custom Properties](#css-custom-properties). ## Basic Usage @@ -97,7 +97,7 @@ import CSSProps from '@site/static/usage/v8/content/theming/css-properties/index ### Safe Area Padding -The content component will not automatically apply padding to any of its sides to account for the [safe area](/docs/theming/advanced#safe-area-padding). This is because the content component is often used in conjunction with other components that apply their own padding, such as [headers](./header) and [footers](./footer). However, if the content component is being used on its own, it may be desired to apply padding to the safe area. This can be done through CSS by using the `--ion-safe-area-(dir)` variables described in [Application Variables](../theming/advanced.md#application-variables). +The content component will not automatically apply padding to any of its sides to account for the [safe area](/docs/theming/advanced.mdx#safe-area-padding). This is because the content component is often used in conjunction with other components that apply their own padding, such as [headers](./header) and [footers](./footer). However, if the content component is being used on its own, it may be desired to apply padding to the safe area. This can be done through CSS by using the `--ion-safe-area-(dir)` variables described in [Application Variables](../theming/advanced.mdx#application-variables). The most common use case for this is to apply padding to the top of the content to account for the status bar. This can be done by setting the `padding-top` property to the value of the `--ion-safe-area-top` variable. diff --git a/docs/api/datetime.md b/docs/api/datetime.md index a820311f1b3..bb5f3546a5d 100644 --- a/docs/api/datetime.md +++ b/docs/api/datetime.md @@ -308,7 +308,7 @@ Developers can provide their own buttons for advanced custom behavior. Using the `highlightedDates` property, developers can style particular dates with custom text or background colors. This property can be defined as either an array of dates and their colors, or a callback that receives an ISO string and returns the colors to use. -When specifying colors, any valid CSS color format can be used. This includes hex codes, `rgba`, [color variables](../theming/colors), etc. +When specifying colors, any valid CSS color format can be used. This includes hex codes, `rgba`, [color variables](../theming/colors.mdx), etc. To maintain a consistent user experience, the style of selected date(s) will always override custom highlights. @@ -332,7 +332,7 @@ A callback is better when the highlighted dates are recurring, such as birthdays ### Global Theming -Ionic's powerful theming system can be used to easily change your entire app to match a certain theme. In this example, we used the [Color Creator](../theming/colors#new-color-creator) and the [Stepped Color Generator](../theming/themes#stepped-color-generator) to create a rose color palette that we can use for `ion-datetime`. +Ionic's powerful theming system can be used to easily change your entire app to match a certain theme. In this example, we used the [Color Creator](../theming/colors#new-color-creator) and the [Stepped Color Generator](../theming/themes.mdx#stepped-color-generator) to create a rose color palette that we can use for `ion-datetime`. The benefit of this approach is that every component, not just `ion-datetime`, can automatically take advantage of this theme. diff --git a/docs/api/fab.md b/docs/api/fab.md index 3e665ad8159..37ea87bbf90 100644 --- a/docs/api/fab.md +++ b/docs/api/fab.md @@ -43,7 +43,7 @@ import Positioning from '@site/static/usage/v8/fab/positioning/index.md'; ### Safe Area -If there is no `ion-header` or `ion-footer` component, the fab may be covered by a device's notch, status bar, or other device UI. In these cases, the [safe area](/docs/theming/advanced#safe-area-padding) on the top and bottom is not taken into account. This can be adjusted by using the [`--ion-safe-area-(dir)` variables](/docs/theming/advanced#application-variables). +If there is no `ion-header` or `ion-footer` component, the fab may be covered by a device's notch, status bar, or other device UI. In these cases, the [safe area](/docs/theming/advanced.mdx#safe-area-padding) on the top and bottom is not taken into account. This can be adjusted by using the [`--ion-safe-area-(dir)` variables](/docs/theming/advanced.mdx#application-variables). When using a fab with `vertical` set to `"top"` without an `ion-header`, the top margin needs to be set: diff --git a/docs/api/item.md b/docs/api/item.md index 5aaa4a16304..5ae1e104bcd 100644 --- a/docs/api/item.md +++ b/docs/api/item.md @@ -25,7 +25,7 @@ Items are elements that can contain text, icons, avatars, images, inputs, and an ## Basic Usage -Items left align text and wrap when the text is wider than the item. We can modify this behavior using the CSS Utilities provided by Ionic Framework, such as using `.ion-text-nowrap` in the below example. See the [CSS Utilities Documentation](/docs/layout/css-utilities) for more classes that can be added to an item to transform the text. +Items left align text and wrap when the text is wider than the item. We can modify this behavior using the CSS Utilities provided by Ionic Framework, such as using `.ion-text-nowrap` in the below example. See the [CSS Utilities Documentation](/docs/layout/css-utilities.mdx) for more classes that can be added to an item to transform the text. import Basic from '@site/static/usage/v8/item/basic/index.md'; @@ -189,7 +189,7 @@ This feature is not enabled by default on clickable items for the `md` mode, but --item-detail-push-show: true; ``` -See the [theming documentation](/docs/theming/css-variables) for more information. +See the [theming documentation](/docs/theming/css-variables.mdx) for more information. --> diff --git a/docs/api/nav.md b/docs/api/nav.md index 3cce798832c..be3670fca90 100644 --- a/docs/api/nav.md +++ b/docs/api/nav.md @@ -22,7 +22,7 @@ Nav is a standalone component for loading arbitrary components and pushing new c Unlike Router Outlet, Nav is not tied to a particular router. This means that if we load a Nav component, and push other components to the stack, they will not affect the app's overall router. For example, you should not push a new component to `ion-nav` and expect the URL to update. This fits use cases where you could have a modal, which needs its own sub-navigation, without making it tied to the apps URL. :::note -`ion-nav` is not meant to be used for routing. Instead, see the routing guides for [Angular](../angular/navigation), [React](../react/navigation), and [Vue](../vue/navigation), or [`ion-router`](./router) for vanilla JavaScript projects. +`ion-nav` is not meant to be used for routing. Instead, see the routing guides for [Angular](../angular/navigation.mdx), [React](../react/navigation.mdx), and [Vue](../vue/navigation.mdx), or [`ion-router`](./router) for vanilla JavaScript projects. ::: ## Using NavLink diff --git a/docs/api/router.md b/docs/api/router.md index 2d061c0f7a4..ca4ef164fcf 100644 --- a/docs/api/router.md +++ b/docs/api/router.md @@ -21,7 +21,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; The router is a component for handling routing inside vanilla and Stencil JavaScript projects. :::note - Note: This component should only be used with vanilla and Stencil JavaScript projects. See the routing guides for [Angular](../angular/navigation), [React](../react/navigation), and [Vue](../vue/navigation) for framework-specific routing solutions. + Note: This component should only be used with vanilla and Stencil JavaScript projects. See the routing guides for [Angular](../angular/navigation.mdx), [React](../react/navigation.mdx), and [Vue](../vue/navigation.mdx) for framework-specific routing solutions. ::: diff --git a/docs/api/row.md b/docs/api/row.md index 4172ef4a478..65c43586c3a 100644 --- a/docs/api/row.md +++ b/docs/api/row.md @@ -25,7 +25,7 @@ See the [grid](./grid) documentation for more information. ## Row Alignment -By default, columns will stretch to fill the entire height of the row and wrap when necessary. Rows are [flex containers](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Container), so there are several [CSS classes](/docs/layout/css-utilities#flex-container-properties) that can be applied to a row to customize this behavior. +By default, columns will stretch to fill the entire height of the row and wrap when necessary. Rows are [flex containers](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Container), so there are several [CSS classes](/docs/layout/css-utilities.mdx#flex-container-properties) that can be applied to a row to customize this behavior. diff --git a/docs/api/tabs.md b/docs/api/tabs.md index 84bda763b3e..5f929226274 100644 --- a/docs/api/tabs.md +++ b/docs/api/tabs.md @@ -42,7 +42,7 @@ import Router from '@site/static/usage/v8/tabs/router/index.md'; :::tip Best Practices -Ionic has guides on best practices for routing patterns with tabs. Check out the guides for [Angular](/angular/navigation#working-with-tabs), [React](/react/navigation#working-with-tabs), and [Vue](/vue/navigation#working-with-tabs) for additional information. +Ionic has guides on best practices for routing patterns with tabs. Check out the guides for [Angular](../angular/navigation.mdx#working-with-tabs), [React](../react/navigation.mdx#working-with-tabs), and [Vue](../vue/navigation.mdx#working-with-tabs) for additional information. ::: diff --git a/docs/api/toast.md b/docs/api/toast.md index 6468dd0af93..2e40f33b81a 100644 --- a/docs/api/toast.md +++ b/docs/api/toast.md @@ -110,7 +110,7 @@ Toasts are intended to be subtle notifications and are not intended to interrupt ### Screen Readers -Toasts set aria properties in order to be [accessible](../reference/glossary#a11y) to screen readers, but these properties can be overridden if they aren't descriptive enough or don't align with how the toast is being used in an app. +Toasts set aria properties in order to be [accessible](../reference/glossary.mdx#a11y) to screen readers, but these properties can be overridden if they aren't descriptive enough or don't align with how the toast is being used in an app. #### Role diff --git a/docs/cli.md b/docs/cli.md index a75302d0937..efdc21ff611 100644 --- a/docs/cli.md +++ b/docs/cli.md @@ -11,7 +11,7 @@ sidebar_label: Overview /> -The Ionic command-line interface ([CLI](/docs/reference/glossary#cli)) is the go-to tool for developing Ionic apps. +The Ionic command-line interface ([CLI](/docs/reference/glossary.mdx#cli)) is the go-to tool for developing Ionic apps. ## Installation @@ -41,14 +41,14 @@ For some commands, such as `ionic serve`, the help documentation is contextual t ## Architecture -The Ionic CLI is built with [TypeScript](/docs/reference/glossary#typescript) and [Node.js](/docs/reference/glossary#node). It supports Node 10.3+, but the latest Node LTS is always recommended. Follow development on the open source GitHub repository. +The Ionic CLI is built with [TypeScript](/docs/reference/glossary.mdx#typescript) and [Node.js](/docs/reference/glossary.mdx#node). It supports Node 10.3+, but the latest Node LTS is always recommended. Follow development on the open source GitHub repository. ## Troubleshooting To troubleshoot issues with the Ionic CLI, the following may be useful: - Make sure the latest version of the Ionic CLI is installed. Get the installed version by running `ionic --version`. -- Make sure the latest Node LTS is installed. See [Node & npm](/docs/intro/environment#node-npm) environment setup. +- Make sure the latest Node LTS is installed. See [Node & npm](/docs/intro/environment.mdx#node-npm) environment setup. - The `--verbose` flag prints debugging messages, which may narrow down the issue. - Connection issues may be due to improperly configured proxy settings. See [Using a Proxy](/docs/cli/using-a-proxy) to configure request proxying. - The global Ionic CLI configuration directory is `~/.ionic` on all platforms. It can safely be deleted and the Ionic CLI will repopulate it, but all configuration (including user sessions) will be lost. Configure this directory with [CLI environment variables](/docs/cli/configuration#environment-variables). diff --git a/docs/cli/configuration.md b/docs/cli/configuration.md index 9b3d7d31a95..39fc5b33a84 100644 --- a/docs/cli/configuration.md +++ b/docs/cli/configuration.md @@ -121,7 +121,7 @@ module.exports = function (ctx) { Available in CLI 6.2.0+ -The Ionic CLI supports a multi-app configuration setup, which involves multiple Ionic apps and shared code within a single repository, or [monorepo](../reference/glossary.md#monorepo). +The Ionic CLI supports a multi-app configuration setup, which involves multiple Ionic apps and shared code within a single repository, or [monorepo](../reference/glossary.mdx#monorepo). :::note These docs give an overview of the multi-app feature of the Ionic CLI, but don't really go into details for each framework. diff --git a/docs/core-concepts/webview.md b/docs/core-concepts/webview.md index a314d09f566..a93673097b5 100644 --- a/docs/core-concepts/webview.md +++ b/docs/core-concepts/webview.md @@ -12,13 +12,13 @@ title: Web View Web Views power web apps on native devices. -The Web View is automatically provided for apps integrated with [Capacitor](../reference/glossary.md#capacitor). +The Web View is automatically provided for apps integrated with [Capacitor](../reference/glossary.mdx#capacitor). -For [Cordova](../reference/glossary.md#cordova), Ionic maintains a Web View plugin. The plugin is provided by default when using the Ionic CLI. +For [Cordova](../reference/glossary.mdx#cordova), Ionic maintains a Web View plugin. The plugin is provided by default when using the Ionic CLI. ## What is a Web View? -Ionic apps are built using [web technologies](../reference/glossary.md#web-standards) and are rendered using Web Views, which are a full screen and full-powered web browser. +Ionic apps are built using [web technologies](../reference/glossary.mdx#web-standards) and are rendered using Web Views, which are a full screen and full-powered web browser. 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. @@ -28,7 +28,7 @@ The Ionic Web View plugin is specialized for modern JavaScript apps. For both iO ### CORS -Web Views enforce [CORS](../reference/glossary.md#cors), so it's important that external services properly handle cross-origin requests. See the [CORS FAQs](../troubleshooting/cors.md) for information on dealing with CORS in Ionic apps. +Web Views enforce [CORS](../reference/glossary.mdx#cors), so it's important that external services properly handle cross-origin requests. See the [CORS FAQs](../troubleshooting/cors.mdx) for information on dealing with CORS in Ionic apps. ### File Protocol diff --git a/docs/developer-resources/guides/first-app-v4/theming.md b/docs/developer-resources/guides/first-app-v4/theming.md index 6170b2d673a..3839bb9d451 100644 --- a/docs/developer-resources/guides/first-app-v4/theming.md +++ b/docs/developer-resources/guides/first-app-v4/theming.md @@ -27,7 +27,7 @@ By changing these variables here and there, you can easily update the entire the } ``` -The easiest and most powerful way to create custom color palettes for your app’s UI is Ionic's [Color Generator tool](../../../theming/color-generator.md). As you change a color’s hex values, the embedded demo app automatically reflects the new colors. When you've finished making changes, simply copy and paste the generated code directly into your Ionic project. +The easiest and most powerful way to create custom color palettes for your app’s UI is Ionic's [Color Generator tool](../../../theming/color-generator.mdx). As you change a color’s hex values, the embedded demo app automatically reflects the new colors. When you've finished making changes, simply copy and paste the generated code directly into your Ionic project. 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: diff --git a/docs/developer-resources/tools.md b/docs/developer-resources/tools.md index 0cd5ac7d7f3..aa1a7301ba9 100644 --- a/docs/developer-resources/tools.md +++ b/docs/developer-resources/tools.md @@ -12,7 +12,7 @@ Quickly get started with a new Ionic app entirely in the browser! Check out the features that make working with TypeScript amazing. -### [Glossary](../reference/glossary.md) +### [Glossary](../reference/glossary.mdx) A list of common terms you'll see while developing in Ionic. diff --git a/docs/developing/config.md b/docs/developing/config.md index 389033b4cca..9f272ecf9ca 100644 --- a/docs/developing/config.md +++ b/docs/developing/config.md @@ -186,7 +186,7 @@ Below are the config options that Ionic uses. | `navAnimation` | `AnimationBuilder` | Overrides the default "animation" of all `ion-nav` and `ion-router-outlet` across the whole application. | | `pickerEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-picker`, overriding the default "animation". | | `pickerLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-picker`, overriding the default "animation". | -| `platform` | [`PlatformConfig`](/docs/angular/platform#customizing-platform-detection-methods) | Overrides the default platform detection methods. | +| `platform` | [`PlatformConfig`](/docs/angular/platform.mdx#customizing-platform-detection-methods) | Overrides the default platform detection methods. | | `popoverEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-popover`, overriding the default "animation". | | `popoverLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-popover`, overriding the default "animation". | | `refreshingIcon` | `string` | Overrides the default icon in all `` components. | diff --git a/docs/intro/cdn.mdx b/docs/intro/cdn.mdx index 8d93cc4cde6..1f9696aa558 100644 --- a/docs/intro/cdn.mdx +++ b/docs/intro/cdn.mdx @@ -25,7 +25,7 @@ It's recommended to use [jsdelivr](https://www.jsdelivr.com/) to access the Fram ``` -With this it's possible to use all of the Ionic Framework core components without having to install a framework. The CSS bundle will include all of the Ionic [Global Stylesheets](../layout/global-stylesheets). +With this it's possible to use all of the Ionic Framework core components without having to install a framework. The CSS bundle will include all of the Ionic [Global Stylesheets](../layout/global-stylesheets.mdx). :::note This does not install Angular or any other frameworks. This allows use of the Ionic Framework core components without a framework. diff --git a/docs/layout/global-stylesheets.mdx b/docs/layout/global-stylesheets.mdx index fab959b4c2f..32fd0e0d5ba 100644 --- a/docs/layout/global-stylesheets.mdx +++ b/docs/layout/global-stylesheets.mdx @@ -32,7 +32,7 @@ Applies styles to `` and defaults `box-sizing` to `border-box`. It ensures #### typography.css -Typography changes the font-family of the entire document and modifies the font styles for heading elements. It also applies positioning styles to some native text elements. This file is necessary for [Dynamic Font Scaling](./dynamic-font-scaling) to work. +Typography changes the font-family of the entire document and modifies the font styles for heading elements. It also applies positioning styles to some native text elements. This file is necessary for [Dynamic Font Scaling](./dynamic-font-scaling.mdx) to work. #### normalize.css diff --git a/docs/react/adding-ionic-react-to-an-existing-react-project.mdx b/docs/react/adding-ionic-react-to-an-existing-react-project.mdx index 20bf7b3fcb7..f892a2b84bd 100644 --- a/docs/react/adding-ionic-react-to-an-existing-react-project.mdx +++ b/docs/react/adding-ionic-react-to-an-existing-react-project.mdx @@ -131,13 +131,13 @@ Now you can setup Ionic pages like so: ::: -For more information on routing and navigation in Ionic React, see [here](/docs/react/navigation). +For more information on routing and navigation in Ionic React, see [here](/docs/react/navigation.mdx). ### Customize the Theme To customize the look and feel of the components, Ionic has CSS variables you can [override](https://ionicframework.com/docs/theming/colors#modifying-colors) to provide a theme for your components. Set these in your main CSS file. -For more info on theming your Ionic app, see the guide [here](/docs/theming/themes). +For more info on theming your Ionic app, see the guide [here](/docs/theming/themes.mdx). ### Wrapping up diff --git a/docs/reference/glossary.mdx b/docs/reference/glossary.mdx index 110d5514beb..6a3d43814dd 100644 --- a/docs/reference/glossary.mdx +++ b/docs/reference/glossary.mdx @@ -92,7 +92,7 @@ title: Glossary

- +{/* cspell:disable */}
@@ -111,7 +111,7 @@ title: Glossary

- +{/* cspell:enable */}
diff --git a/docs/reference/support.mdx b/docs/reference/support.mdx index 9e5076c9251..979e8b04af0 100644 --- a/docs/reference/support.mdx +++ b/docs/reference/support.mdx @@ -58,7 +58,7 @@ The Ionic team has compiled a set of recommendations for using the Ionic Framewo Angular's support policy for iOS is the two most recent major versions. This means that changes to your Angular project may be necessary to use Ionic Angular v4-v6 on iOS 13. To support iOS 13, change the project `target` specified in `compilerOptions` in the tsconfig.json to `es5`. Without this change an error of `Unexpected token '.' in promiseReactionJob` will occur on app startup in iOS 13. -Note that later versions of Ionic do not support iOS 13; see [mobile support table here](./browser-support#mobile-browsers). +Note that later versions of Ionic do not support iOS 13; see [mobile support table here](./browser-support.mdx#mobile-browsers). #### Ionic React diff --git a/docs/reference/versioning.mdx b/docs/reference/versioning.mdx index 7c48549721e..9f17aa98877 100644 --- a/docs/reference/versioning.mdx +++ b/docs/reference/versioning.mdx @@ -1,6 +1,6 @@ # Versioning - +{/* TOC goes here */} Ionic Framework follows the Semantic Versioning (SemVer) convention: major.minor.patch. Incompatible API changes increment the major version, adding backwards-compatible functionality increments the minor version, and backwards-compatible bug fixes increment the patch version. diff --git a/docs/troubleshooting/native.mdx b/docs/troubleshooting/native.mdx index f6da2eced20..dfb3195c915 100644 --- a/docs/troubleshooting/native.mdx +++ b/docs/troubleshooting/native.mdx @@ -24,7 +24,7 @@ Running an app on an iOS device requires a provisioning profile. If a provisioni For Cordova, open the `config.xml` file and modify the `id` attribute of the root element, ``. See [the Cordova documentation](https://cordova.apache.org/docs/en/latest/config_ref/#widget) for more information. - +{/* prettier-ignore */} 2. Open the project in Xcode. For Capacitor, run the following to open the app in Xcode: @@ -35,12 +35,12 @@ Running an app on an iOS device requires a provisioning profile. If a provisioni For Cordova, open Xcode. Use **File** » **Open** and locate the app. Open the app's `platforms/ios` directory. - +{/* prettier-ignore */} 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. ![Xcode Identity Setup](/img/running/ios-xcode-identity-setup.png) - +{/* prettier-ignore */} 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 Signing Setup](/img/running/ios-xcode-signing-setup.png) diff --git a/docs/troubleshooting/runtime.mdx b/docs/troubleshooting/runtime.mdx index c0466b288f9..ba982763c07 100644 --- a/docs/troubleshooting/runtime.mdx +++ b/docs/troubleshooting/runtime.mdx @@ -208,7 +208,7 @@ class MyApp { } ``` - +{/* This is referenced in Ionic Framework component documentation so we explicitly define the anchor so it remains consistent. */} ## Accessing `this` in a function callback returns `undefined` {#accessing-this} diff --git a/docs/updating/5-0.mdx b/docs/updating/5-0.mdx index 6a5f621b4e9..074984ce181 100644 --- a/docs/updating/5-0.mdx +++ b/docs/updating/5-0.mdx @@ -7,7 +7,7 @@ title: Updating to v5 Migrating an app from Ionic 4 to 5 requires a few updates to the API properties, CSS utilities, and the installed package dependencies. :::note -This guide assumes that you have already updated your app to the latest version of Ionic 4. Make sure you have followed the [Updating to Ionic 4 Guide](./4-0) before starting this guide. +This guide assumes that you have already updated your app to the latest version of Ionic 4. Make sure you have followed the [Updating to Ionic 4 Guide](./4-0.mdx) before starting this guide. ::: :::info Breaking Changes diff --git a/docs/updating/6-0.mdx b/docs/updating/6-0.mdx index d9f7ef2cec6..90e5db36a89 100644 --- a/docs/updating/6-0.mdx +++ b/docs/updating/6-0.mdx @@ -5,7 +5,7 @@ title: Updating to v6 # Updating from Ionic 5 to 6 :::note -This guide assumes that you have already updated your app to the latest version of Ionic 5. Make sure you have followed the [Updating to Ionic 5 Guide](./5-0) before starting this guide. +This guide assumes that you have already updated your app to the latest version of Ionic 5. Make sure you have followed the [Updating to Ionic 5 Guide](./5-0.mdx) before starting this guide. ::: :::info Breaking Changes @@ -414,7 +414,7 @@ Ensure `null` is not passed in as a value to the `placeholder` property. We reco ### Browser Support -The list of browsers that Ionic supports has changed. Review the [Browser Support Guide](../reference/browser-support) to ensure you are deploying apps to supported browsers. +The list of browsers that Ionic supports has changed. Review the [Browser Support Guide](../reference/browser-support.mdx) to ensure you are deploying apps to supported browsers. If you have a `browserslist` or `.browserslistrc` file, update it with the following content: diff --git a/docs/updating/7-0.mdx b/docs/updating/7-0.mdx index b2301a246cc..c7fafe8b551 100644 --- a/docs/updating/7-0.mdx +++ b/docs/updating/7-0.mdx @@ -5,7 +5,7 @@ title: Updating to v7 # Updating from Ionic 6 to 7 :::note -This guide assumes that you have already updated your app to the latest version of Ionic 6. Make sure you have followed the [Upgrading to Ionic 6 Guide](./6-0) before starting this guide. +This guide assumes that you have already updated your app to the latest version of Ionic 6. Make sure you have followed the [Upgrading to Ionic 6 Guide](./6-0.mdx) before starting this guide. ::: :::info Breaking Changes @@ -77,7 +77,7 @@ npm install @ionic/core@7 ### Browser Support -The list of browsers that Ionic supports has changed. Review the [Browser Support Guide](../reference/browser-support) to ensure you are deploying apps to supported browsers. +The list of browsers that Ionic supports has changed. Review the [Browser Support Guide](../reference/browser-support.mdx) to ensure you are deploying apps to supported browsers. If you have a `browserslist` or `.browserslistrc` file, update it with the following content: diff --git a/docs/vue/navigation.mdx b/docs/vue/navigation.mdx index 1286ab01537..2ad8828ed53 100644 --- a/docs/vue/navigation.mdx +++ b/docs/vue/navigation.mdx @@ -140,7 +140,7 @@ The `router-link` attribute can be set on any Ionic Vue component, and the route The `router-direction` attribute accepts values of `forward`, `back`, or `none` and is used to control the direction of the page transition. -The `router-animation` attribute accepts an `AnimationBuilder` function and is used to provide a custom page transition that is only used when clicking the component it is provided on. The `AnimationBuilder` type is a function that returns an Ionic Animation instance. See the [Animations documentation](../utilities/animations) for more information on using animations in Ionic Vue. +The `router-animation` attribute accepts an `AnimationBuilder` function and is used to provide a custom page transition that is only used when clicking the component it is provided on. The `AnimationBuilder` type is a function that returns an Ionic Animation instance. See the [Animations documentation](../utilities/animations.mdx) for more information on using animations in Ionic Vue. ```html Click Me @@ -192,7 +192,7 @@ The example above has the app navigate to `/page2` with a custom animation that `useIonRouter` uses the Vue `inject()` function and should only be used inside of your `setup()` function. ::: -See the [useIonRouter documentation](./utility-functions#router) for more details as well as type information. +See the [useIonRouter documentation](./utility-functions.mdx#router) for more details as well as type information. ### Navigating using `router.go` @@ -574,11 +574,11 @@ Components presented via `IonModal` or `IonPopover` do not typically need an `Io ### useIonRouter -▸ **useIonRouter**(): [`UseIonRouterResult`](utility-functions#useionrouterresult) +▸ **useIonRouter**(): [`UseIonRouterResult`](utility-functions.mdx#useionrouterresult) Returns the Ionic router instance, containing API methods for navigating, customizing page transitions and routing context for native features. This function can be used in combination with the [`useRouter`](https://router.vuejs.org/api/index.html#userouter) function from Vue. -For example usages, please refer to our [Utility Functions](utility-functions#useionrouter). +For example usages, please refer to our [Utility Functions](utility-functions.mdx#useionrouter). ## URL Parameters diff --git a/docs/vue/utility-functions.mdx b/docs/vue/utility-functions.mdx index d5461a255a9..295ba5f545f 100644 --- a/docs/vue/utility-functions.mdx +++ b/docs/vue/utility-functions.mdx @@ -85,7 +85,7 @@ useIonRouter(): UseIonRouterResult; - The `replace` method is the equivalent of calling `ionRouter.navigate(location, 'root', 'replace', animation)`. -See the [Vue Navigation Documentation](./navigation#navigating-using-useionrouter) for more usage examples. +See the [Vue Navigation Documentation](./navigation.mdx#navigating-using-useionrouter) for more usage examples. ## Hardware Back Button @@ -181,4 +181,4 @@ export default defineComponent({ Pages in your app need to be using the `IonPage` component in order for lifecycle methods and hooks to fire properly. ::: -See the [Vue Lifecycle Documentation](./lifecycle) for more information and usage examples. +See the [Vue Lifecycle Documentation](./lifecycle.mdx) for more information and usage examples. diff --git a/versioned_docs/version-v5/api/col.md b/versioned_docs/version-v5/api/col.md index 5885753ccb1..aa31f8eaafd 100644 --- a/versioned_docs/version-v5/api/col.md +++ b/versioned_docs/version-v5/api/col.md @@ -17,11 +17,11 @@ import Slots from '@ionic-internal/component-api/v5/col/slots.md'; Columns are cellular components of the [grid](grid.md) system and go inside of a [row](row.md). They will expand to fill their row. All content within a grid should go inside of a column. -See [Grid Layout](../layout/grid.md) for more information. +See [Grid Layout](../layout/grid.mdx) for more information. ## Column Alignment -By default, columns will stretch to fill the entire height of the row. Columns are [flex items](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item), so there are several [CSS classes](../layout/css-utilities.md#flex-item-properties) that can be applied to a column to customize this behavior. +By default, columns will stretch to fill the entire height of the row. Columns are [flex items](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item), so there are several [CSS classes](../layout/css-utilities.mdx#flex-item-properties) that can be applied to a column to customize this behavior. ## Properties diff --git a/versioned_docs/version-v5/api/item.md b/versioned_docs/version-v5/api/item.md index 7e2c7205d1c..d3d71a24ec4 100644 --- a/versioned_docs/version-v5/api/item.md +++ b/versioned_docs/version-v5/api/item.md @@ -36,7 +36,7 @@ This feature is not enabled by default on clickable items for the `md` mode, but --item-detail-push-show: true; ``` -See the [theming documentation](../theming/css-variables.md) for more information. +See the [theming documentation](../theming/css-variables.mdx) for more information. --> @@ -54,7 +54,7 @@ The below chart details the item slots and where it will place the element insid ### Text Alignment -Items left align text and add an ellipsis when the text is wider than the item. See the [CSS Utilities Documentation](../layout/css-utilities.md) for classes that can be added to `` to transform the text. +Items left align text and add an ellipsis when the text is wider than the item. See the [CSS Utilities Documentation](../layout/css-utilities.mdx) for classes that can be added to `` to transform the text. ## Input Highlight diff --git a/versioned_docs/version-v5/api/row.md b/versioned_docs/version-v5/api/row.md index 0b655a677eb..ec6c6ded8ba 100644 --- a/versioned_docs/version-v5/api/row.md +++ b/versioned_docs/version-v5/api/row.md @@ -17,11 +17,11 @@ import Slots from '@ionic-internal/component-api/v5/row/slots.md'; Rows are horizontal components of the [grid](grid.md) system and contain varying numbers of [columns](col.md). They ensure the columns are positioned properly. -See [Grid Layout](../layout/grid.md) for more information. +See [Grid Layout](../layout/grid.mdx) for more information. ## Row Alignment -By default, columns will stretch to fill the entire height of the row and wrap when necessary. Rows are [flex containers](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Container), so there are several [CSS classes](../layout/css-utilities.md#flex-container-properties) that can be applied to a row to customize this behavior. +By default, columns will stretch to fill the entire height of the row and wrap when necessary. Rows are [flex containers](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Container), so there are several [CSS classes](../layout/css-utilities.mdx#flex-container-properties) that can be applied to a row to customize this behavior. ## Properties diff --git a/versioned_docs/version-v5/cli.md b/versioned_docs/version-v5/cli.md index c0536705c77..bd813e68848 100644 --- a/versioned_docs/version-v5/cli.md +++ b/versioned_docs/version-v5/cli.md @@ -36,7 +36,7 @@ For some commands, such as `ionic serve`, the help documentation is contextual t ## Architecture -The Ionic CLI is built with [TypeScript](/docs/reference/glossary#typescript) and [Node.js](/docs/reference/glossary#node). It supports Node 10.3+, but the latest Node LTS is always recommended. Follow development on the open source GitHub repository. +The Ionic CLI is built with [TypeScript](/docs/reference/glossary#typescript) and [Node.js](/docs/reference/glossary.mdx#node). It supports Node 10.3+, but the latest Node LTS is always recommended. Follow development on the open source GitHub repository. ## Troubleshooting diff --git a/versioned_docs/version-v5/cli/configuration.md b/versioned_docs/version-v5/cli/configuration.md index 63d6ca786af..7fe73537e0d 100644 --- a/versioned_docs/version-v5/cli/configuration.md +++ b/versioned_docs/version-v5/cli/configuration.md @@ -111,7 +111,7 @@ module.exports = function (ctx) { Available in CLI 6.2.0+ -The Ionic CLI supports a multi-app configuration setup, which involves multiple Ionic apps and shared code within a single repository, or [monorepo](../reference/glossary.md#monorepo). +The Ionic CLI supports a multi-app configuration setup, which involves multiple Ionic apps and shared code within a single repository, or [monorepo](../reference/glossary.mdx#monorepo). :::note These docs give an overview of the multi-app feature of the Ionic CLI, but don't really go into details for each framework. diff --git a/versioned_docs/version-v5/core-concepts/fundamentals.md b/versioned_docs/version-v5/core-concepts/fundamentals.md index 23d8f728e8c..c84c63c9504 100644 --- a/versioned_docs/version-v5/core-concepts/fundamentals.md +++ b/versioned_docs/version-v5/core-concepts/fundamentals.md @@ -8,13 +8,13 @@ For those completely new to Ionic app development, it can be helpful to get a hi ## UI Components -Ionic Framework is a library of UI Components, which are reusable elements that serve as the building blocks for an application. Ionic Components are built with [web standards](../reference/glossary.md#web-standards) using HTML, CSS, and JavaScript. Though the components are pre-built, they're designed from the ground up to be highly customizable so apps can make each component their own, allowing each app to have its own look and feel. More specifically, Ionic components can be easily themed to globally change appearance across an entire app. For more information about customizing the look, please see [Theming](../theming/basics.md). +Ionic Framework is a library of UI Components, which are reusable elements that serve as the building blocks for an application. Ionic Components are built with [web standards](../reference/glossary.mdx#web-standards) using HTML, CSS, and JavaScript. Though the components are pre-built, they're designed from the ground up to be highly customizable so apps can make each component their own, allowing each app to have its own look and feel. More specifically, Ionic components can be easily themed to globally change appearance across an entire app. For more information about customizing the look, please see [Theming](../theming/basics.mdx). ## Adaptive Styling Adaptive Styling is a built-in feature of Ionic Framework which allows app developers to use the same code base for multiple platforms. Every Ionic component adapts its look to the platform on which the app is running on. For example, Apple devices, such as the iPhone and iPad, use Apple's own iOS design language. Similarly, Android devices use Google's design language called Material Design. -By making subtle design changes between the platforms, users are provided with a familiar app experience. An Ionic app downloaded from Apple's App Store will get the iOS theme, while an Ionic app downloaded from Android's Play Store will get the Material Design theme. For the apps that are viewed as a Progressive Web App (PWA) from a browser, Ionic will default to using the Material Design theme. Additionally, deciding which platform to use in certain scenarios is entirely configurable. More information about adaptive styling can be found in [Theming](../theming/basics.md). +By making subtle design changes between the platforms, users are provided with a familiar app experience. An Ionic app downloaded from Apple's App Store will get the iOS theme, while an Ionic app downloaded from Android's Play Store will get the Material Design theme. For the apps that are viewed as a Progressive Web App (PWA) from a browser, Ionic will default to using the Material Design theme. Additionally, deciding which platform to use in certain scenarios is entirely configurable. More information about adaptive styling can be found in [Theming](../theming/basics.mdx). ## Navigation diff --git a/versioned_docs/version-v5/core-concepts/webview.md b/versioned_docs/version-v5/core-concepts/webview.md index 3a2b7628586..5e44273563a 100644 --- a/versioned_docs/version-v5/core-concepts/webview.md +++ b/versioned_docs/version-v5/core-concepts/webview.md @@ -2,13 +2,13 @@ Web Views power web apps on native devices. -The Web View is automatically provided for apps integrated with [Capacitor](../reference/glossary.md#capacitor). +The Web View is automatically provided for apps integrated with [Capacitor](../reference/glossary.mdx#capacitor). -For [Cordova](../reference/glossary.md#cordova), Ionic maintains a Web View plugin. The plugin is provided by default when using the Ionic CLI. +For [Cordova](../reference/glossary.mdx#cordova), Ionic maintains a Web View plugin. The plugin is provided by default when using the Ionic CLI. ## What is a Web View? -Ionic apps are built using [web technologies](../reference/glossary.md#web-standards) and are rendered using Web Views, which are a full screen and full-powered web browser. +Ionic apps are built using [web technologies](../reference/glossary.mdx#web-standards) and are rendered using Web Views, which are a full screen and full-powered web browser. 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. @@ -18,7 +18,7 @@ The Ionic Web View plugin is specialized for modern JavaScript apps. For both iO ### CORS -Web Views enforce [CORS](../reference/glossary.md#cors), so it's important that external services properly handle cross-origin requests. See the [CORS FAQs](../troubleshooting/cors.md) for information on dealing with CORS in Ionic apps. +Web Views enforce [CORS](../reference/glossary.mdx#cors), so it's important that external services properly handle cross-origin requests. See the [CORS FAQs](../troubleshooting/cors.mdx) for information on dealing with CORS in Ionic apps. ### File Protocol 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..3839bb9d451 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 @@ -27,7 +27,7 @@ By changing these variables here and there, you can easily update the entire the } ``` -The easiest and most powerful way to create custom color palettes for your app’s UI is Ionic's [Color Generator tool](../../../theming/color-generator.md). As you change a color’s hex values, the embedded demo app automatically reflects the new colors. When you've finished making changes, simply copy and paste the generated code directly into your Ionic project. +The easiest and most powerful way to create custom color palettes for your app’s UI is Ionic's [Color Generator tool](../../../theming/color-generator.mdx). As you change a color’s hex values, the embedded demo app automatically reflects the new colors. When you've finished making changes, simply copy and paste the generated code directly into your Ionic project. 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: diff --git a/versioned_docs/version-v5/developer-resources/tools.md b/versioned_docs/version-v5/developer-resources/tools.md index 0cd5ac7d7f3..aa1a7301ba9 100644 --- a/versioned_docs/version-v5/developer-resources/tools.md +++ b/versioned_docs/version-v5/developer-resources/tools.md @@ -12,7 +12,7 @@ Quickly get started with a new Ionic app entirely in the browser! Check out the features that make working with TypeScript amazing. -### [Glossary](../reference/glossary.md) +### [Glossary](../reference/glossary.mdx) A list of common terms you'll see while developing in Ionic. diff --git a/versioned_docs/version-v5/developing/android.md b/versioned_docs/version-v5/developing/android.md index ebcfdd3e2de..52fcfb075cb 100644 --- a/versioned_docs/version-v5/developing/android.md +++ b/versioned_docs/version-v5/developing/android.md @@ -4,11 +4,11 @@ sidebar_label: Developing for Android # Android Development -This guide covers how to run and debug Ionic apps on Android emulators and devices using [Capacitor](../reference/glossary.md#capacitor) or [Cordova](../reference/glossary.md#cordova). Android apps can be developed on Windows, macOS, and Linux. +This guide covers how to run and debug Ionic apps on Android emulators and devices using [Capacitor](../reference/glossary.mdx#capacitor) or [Cordova](../reference/glossary.mdx#cordova). Android apps can be developed on Windows, macOS, and Linux. ## Android Studio -[Android Studio](https://developer.android.com/studio/) is the IDE for creating native Android apps. It includes the [Android SDK](../reference/glossary.md#android-sdk), which +[Android Studio](https://developer.android.com/studio/) is the IDE for creating native Android apps. It includes the [Android SDK](../reference/glossary.mdx#android-sdk), which will need to be configured for use in the command line. Android Studio is also used to [create Android virtual devices](android.md#creating-an-android-virtual-device), which are required for the Android emulator. Ionic apps can also be [launched to a device](android.md#set-up-an-android-device). @@ -133,7 +133,7 @@ Before apps can be deployed to Android simulators and devices, the native projec $ ionic cordova prepare android ``` -2. **Set the [Package ID](../reference/glossary.md#package-id).** +2. **Set the [Package ID](../reference/glossary.mdx#package-id).** For Capacitor, open the `capacitor.config.json` file and modify the `appId` property. @@ -167,7 +167,7 @@ When running on a device make sure the device and your development machine are c ## Running with Cordova -The Ionic CLI can build, copy, and deploy Ionic apps to Android simulators and devices with a single command. It can also spin up a development server, like the one used in `ionic serve`, to provide [live-reload](../reference/glossary.md#livereload) functionality. +The Ionic CLI can build, copy, and deploy Ionic apps to Android simulators and devices with a single command. It can also spin up a development server, like the one used in `ionic serve`, to provide [live-reload](../reference/glossary.mdx#livereload) functionality. Run the following to start a long-running CLI process that boots up a live-reload server: diff --git a/versioned_docs/version-v5/developing/ios.md b/versioned_docs/version-v5/developing/ios.md index f9244962211..1ff3ecb74bf 100644 --- a/versioned_docs/version-v5/developing/ios.md +++ b/versioned_docs/version-v5/developing/ios.md @@ -5,14 +5,14 @@ skipIntros: true # iOS Development -This guide covers how to run and debug Ionic apps on iOS simulators and devices using [Capacitor](../reference/glossary.md#capacitor) or [Cordova](../reference/glossary.md#cordova). iOS apps can only be developed on macOS with Xcode installed. +This guide covers how to run and debug Ionic apps on iOS simulators and devices using [Capacitor](../reference/glossary.mdx#capacitor) or [Cordova](../reference/glossary.mdx#cordova). iOS apps can only be developed on macOS with Xcode installed. There are two workflows for running Ionic apps on iOS: - [Running with Xcode](#running-with-xcode) - [Running with the Ionic CLI](#running-with-the-ionic-cli) -The Xcode approach is generally more stable, but the Ionic CLI approach offers [live-reload](../reference/glossary.md#livereload) functionality. +The Xcode approach is generally more stable, but the Ionic CLI approach offers [live-reload](../reference/glossary.mdx#livereload) functionality. ## Xcode Setup @@ -46,7 +46,7 @@ Additional setup is required for Cordova to support programmatic builds. This se ### ios-sim & ios-deploy -The [`ios-sim`](https://github.com/ios-control/ios-sim) and [`ios-deploy`](https://github.com/ios-control/ios-deploy) are utilities that deploy apps to the iOS simulator and iOS devices during development. They can be installed globally with [npm](../reference/glossary.md#npm). +The [`ios-sim`](https://github.com/ios-control/ios-sim) and [`ios-deploy`](https://github.com/ios-control/ios-deploy) are utilities that deploy apps to the iOS simulator and iOS devices during development. They can be installed globally with [npm](../reference/glossary.mdx#npm). ```shell $ npm install -g ios-sim @@ -71,7 +71,7 @@ Before apps can be deployed to iOS simulators and devices, the native project mu $ ionic cordova prepare ios ``` -1. Set the [Package ID](../reference/glossary.md#package-id). +1. Set the [Package ID](../reference/glossary.mdx#package-id). For Capacitor, open the `capacitor.config.json` file and modify the `appId` property. @@ -124,7 +124,7 @@ In this workflow, Xcode can automatically fix common compilation and signing iss ## Running with the Ionic CLI -The Ionic CLI can build, copy, and deploy Ionic apps to iOS simulators and devices with a single command. It can also spin up a development server, like the one used in `ionic serve`, to provide [live-reload](../reference/glossary.md#livereload) functionality. +The Ionic CLI can build, copy, and deploy Ionic apps to iOS simulators and devices with a single command. It can also spin up a development server, like the one used in `ionic serve`, to provide [live-reload](../reference/glossary.mdx#livereload) functionality. With live-reload, changes made to the app's source files trigger a rebuild of web assets and the changes are reflected on the simulator or device without having to deploy again. diff --git a/versioned_docs/version-v5/index.md b/versioned_docs/version-v5/index.md index ed15be7cffa..451291d3bd8 100644 --- a/versioned_docs/version-v5/index.md +++ b/versioned_docs/version-v5/index.md @@ -49,7 +49,7 @@ Get started building by [installing Ionic](intro/cli.mdx) or following our [Firs ## Overview -Ionic Framework focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as [Angular](angular/overview.mdx), [React](react.mdx), or [Vue](vue/overview.mdx). Alternatively, it can be used standalone without any frontend framework using a simple [script include](intro/cdn.md). If you’d like to learn more about Ionic Framework before diving in, we created a video to walk you through the basics. +Ionic Framework focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as [Angular](angular/overview.mdx), [React](react.mdx), or [Vue](vue/overview.mdx). Alternatively, it can be used standalone without any frontend framework using a simple [script include](intro/cdn.mdx). If you’d like to learn more about Ionic Framework before diving in, we created a video to walk you through the basics. ### One codebase, running everywhere diff --git a/versioned_docs/version-v5/intro/cdn.mdx b/versioned_docs/version-v5/intro/cdn.mdx index 20eb3f1c5fc..a50ed1df70c 100644 --- a/versioned_docs/version-v5/intro/cdn.mdx +++ b/versioned_docs/version-v5/intro/cdn.mdx @@ -18,7 +18,7 @@ It's recommended to use [jsdelivr](https://www.jsdelivr.com/) to access the Fram ``` -With this it's possible to use all of the Ionic Framework core components without having to install a framework. The CSS bundle will include all of the Ionic [Global Stylesheets](../layout/global-stylesheets). +With this it's possible to use all of the Ionic Framework core components without having to install a framework. The CSS bundle will include all of the Ionic [Global Stylesheets](../layout/global-stylesheets.mdx). :::note This does not install Angular or any other frameworks. This allows use of the Ionic Framework core components without a framework. diff --git a/versioned_docs/version-v5/reference/glossary.mdx b/versioned_docs/version-v5/reference/glossary.mdx index e17e08704f2..99277d6f5bb 100644 --- a/versioned_docs/version-v5/reference/glossary.mdx +++ b/versioned_docs/version-v5/reference/glossary.mdx @@ -68,7 +68,7 @@

- +{/* cspell:disable */}
@@ -87,7 +87,7 @@

- +{/* cspell:enable */}
diff --git a/versioned_docs/version-v5/reference/versioning.mdx b/versioned_docs/version-v5/reference/versioning.mdx index c7e746da92b..b7f89e2879b 100644 --- a/versioned_docs/version-v5/reference/versioning.mdx +++ b/versioned_docs/version-v5/reference/versioning.mdx @@ -1,6 +1,6 @@ # Versioning - +{/* TOC goes here */} Ionic Framework follows the Semantic Versioning (SemVer) convention: major.minor.patch. Incompatible API changes increment the major version, adding backwards-compatible functionality increments the minor version, and backwards-compatible bug fixes increment the patch version. diff --git a/versioned_docs/version-v5/theming/css-shadow-parts.mdx b/versioned_docs/version-v5/theming/css-shadow-parts.mdx index c9eeb9d204c..18fee43f983 100644 --- a/versioned_docs/version-v5/theming/css-shadow-parts.mdx +++ b/versioned_docs/version-v5/theming/css-shadow-parts.mdx @@ -113,7 +113,7 @@ CSS Shadow Parts are supported in the recent versions of all of the major browse ### Vendor Prefixed Pseudo-Elements - +{/* prettier-ignore */} Vendor prefixed pseudo-elements are not supported at this time. An example of this would be any of the `::-webkit-scrollbar` pseudo-elements: ```css diff --git a/versioned_docs/version-v5/theming/dark-mode.mdx b/versioned_docs/version-v5/theming/dark-mode.mdx index 318e2f0c239..6351385d714 100644 --- a/versioned_docs/version-v5/theming/dark-mode.mdx +++ b/versioned_docs/version-v5/theming/dark-mode.mdx @@ -78,7 +78,7 @@ function toggleDarkTheme(shouldAdd) { Tip: make sure to view the Codepen below in a [supported browser](https://caniuse.com/#feat=prefers-color-scheme) and then try changing the system preferences on your device between light & dark mode. Here's [how to enable dark mode on Windows 10](https://blogs.windows.com/windowsexperience/2016/08/08/windows-10-tip-personalize-your-pc-by-enabling-the-dark-theme/) and [how to enable it on a Mac](https://support.apple.com/en-us/HT208976). ::: - +{/* Codepen https://codepen.io/ionic/pen/jONzJpG */} @@ -111,7 +111,7 @@ function checkToggle(shouldCheck) { } ``` - +{/* Codepen https://codepen.io/ionic/pen/zYOpQLj */} diff --git a/versioned_docs/version-v5/troubleshooting/debugging.mdx b/versioned_docs/version-v5/troubleshooting/debugging.mdx index 56c1c98ad14..59991f3f326 100644 --- a/versioned_docs/version-v5/troubleshooting/debugging.mdx +++ b/versioned_docs/version-v5/troubleshooting/debugging.mdx @@ -45,7 +45,7 @@ The app preview may not automatically appear when you open Chrome Developer Tool ## Debugging with Visual Studio locally in Chrome (both Android & iOS) - +{/* prettier-ignore */} Visual Studio Code can also be used to debug an Ionic app running in the Chrome web browser.{' '} To do this, run your app in the browser using `ionic serve`. Take note of the port that your app is running on. Next, open your Ionic project using Visual Studio Code. @@ -58,10 +58,10 @@ In the debug target dropdown menu, select **Launch against Chrome**, then click ## Debugging with Visual Studio Code in Android - +{/* prettier-ignore */} Visual Studio Code has a dedicated plugin for debugging apps that run in an Android WebView. - +{/* prettier-ignore */} The plugin creates a bridge between the device and the Visual Studio Code developer tools and permits debugging right from the editor. diff --git a/versioned_docs/version-v5/troubleshooting/native.mdx b/versioned_docs/version-v5/troubleshooting/native.mdx index 270a94d7a13..badfea21a5f 100644 --- a/versioned_docs/version-v5/troubleshooting/native.mdx +++ b/versioned_docs/version-v5/troubleshooting/native.mdx @@ -14,7 +14,7 @@ Running an app on an iOS device requires a provisioning profile. If a provisioni For Cordova, open the `config.xml` file and modify the `id` attribute of the root element, ``. See [the Cordova documentation](https://cordova.apache.org/docs/en/latest/config_ref/#widget) for more information. - +{/* prettier-ignore */} 2. Open the project in Xcode. For Capacitor, run the following to open the app in Xcode: @@ -25,13 +25,13 @@ Running an app on an iOS device requires a provisioning profile. If a provisioni For Cordova, open Xcode. Use **File** » **Open** and locate the app. Open the app's `platforms/ios` directory. - +{/* prettier-ignore */} 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. ![Xcode Identity Setup](/img/running/ios-xcode-identity-setup.png) - +{/* prettier-ignore */} 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. diff --git a/versioned_docs/version-v5/utilities/animations.mdx b/versioned_docs/version-v5/utilities/animations.mdx index 4f48176ce33..5224990b0a8 100644 --- a/versioned_docs/version-v5/utilities/animations.mdx +++ b/versioned_docs/version-v5/utilities/animations.mdx @@ -507,7 +507,7 @@ const parent = createAnimation() This example shows 3 child animations controlled by a single parent animation. Animations `squareA` and `squareB` inherit the parent animation's duration of 2000ms, but animation `squareC` has a duration of 5000ms since it was explicitly set. - +{/* cspell:disable-next-line */} @@ -626,7 +626,7 @@ In this example, an inline opacity of 0.2 is set on the `.square` element prior See [Methods](#methods) for a complete list of hooks. - +{/* cspell:disable-next-line */} @@ -1494,7 +1494,7 @@ export default defineComponent({ ```` - +{/* cspell:disable-next-line */} diff --git a/versioned_docs/version-v6/api/col.md b/versioned_docs/version-v6/api/col.md index 5a19f67b49b..ee86eb54846 100644 --- a/versioned_docs/version-v6/api/col.md +++ b/versioned_docs/version-v6/api/col.md @@ -27,7 +27,7 @@ See the [grid](./grid) documentation for more information. ## Column Alignment -By default, columns will stretch to fill the entire height of the row. Columns are [flex items](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item), so there are several [CSS classes](/docs/layout/css-utilities#flex-item-properties) that can be applied to a column to customize this behavior. +By default, columns will stretch to fill the entire height of the row. Columns are [flex items](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item), so there are several [CSS classes](/docs/layout/css-utilities.mdx#flex-item-properties) that can be applied to a column to customize this behavior. ## Properties diff --git a/versioned_docs/version-v6/api/datetime.md b/versioned_docs/version-v6/api/datetime.md index a4abc8d33a6..4d8830f85df 100644 --- a/versioned_docs/version-v6/api/datetime.md +++ b/versioned_docs/version-v6/api/datetime.md @@ -315,7 +315,7 @@ A callback is better when the highlighted dates are recurring, such as birthdays ## Theming -Ionic's powerful theming system can be used to easily change your entire app to match a certain theme. In this example, we used the [Color Creator](../theming/colors#new-color-creator) and the [Stepped Color Generator](../theming/themes#stepped-color-generator) to create a rose color palette that we can use for `ion-datetime`. +Ionic's powerful theming system can be used to easily change your entire app to match a certain theme. In this example, we used the [Color Creator](../theming/colors.mdx#new-color-creator) and the [Stepped Color Generator](../theming/themes.mdx#stepped-color-generator) to create a rose color palette that we can use for `ion-datetime`. The benefit of this approach is that every component, not just `ion-datetime`, can automatically take advantage of this theme. diff --git a/versioned_docs/version-v6/api/item.md b/versioned_docs/version-v6/api/item.md index cb318d9fb04..272b10c033f 100644 --- a/versioned_docs/version-v6/api/item.md +++ b/versioned_docs/version-v6/api/item.md @@ -57,7 +57,7 @@ This feature is not enabled by default on clickable items for the `md` mode, but --item-detail-push-show: true; ``` -See the [theming documentation](/docs/theming/css-variables) for more information. +See the [theming documentation](/docs/theming/css-variables.mdx) for more information. --> diff --git a/versioned_docs/version-v6/api/nav.md b/versioned_docs/version-v6/api/nav.md index e16ec9c0ae9..7df10e693f2 100644 --- a/versioned_docs/version-v6/api/nav.md +++ b/versioned_docs/version-v6/api/nav.md @@ -26,7 +26,7 @@ Nav is a standalone component for loading arbitrary components and pushing new c Unlike Router Outlet, Nav is not tied to a particular router. This means that if we load a Nav component, and push other components to the stack, they will not affect the app's overall router. For example, you should not push a new component to `ion-nav` and expect the URL to update. This fits use cases where you could have a modal, which needs its own sub-navigation, without making it tied to the apps URL. :::note -`ion-nav` is not meant to be used for routing. Instead, see the routing guides for [Angular](../angular/navigation), [React](../react/navigation), and [Vue](../vue/navigation), or [`ion-router`](./router) for vanilla JavaScript projects. +`ion-nav` is not meant to be used for routing. Instead, see the routing guides for [Angular](../angular/navigation.mdx), [React](../react/navigation.mdx), and [Vue](../vue/navigation.mdx), or [`ion-router`](./router) for vanilla JavaScript projects. ::: ## Using NavLink diff --git a/versioned_docs/version-v6/api/router.md b/versioned_docs/version-v6/api/router.md index 32c31f6d4e9..f220d301f65 100644 --- a/versioned_docs/version-v6/api/router.md +++ b/versioned_docs/version-v6/api/router.md @@ -22,7 +22,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; The router is a component for handling routing inside vanilla and Stencil JavaScript projects. :::note -Note: This component should only be used with vanilla and Stencil JavaScript projects. See the routing guides for [Angular](../angular/navigation), [React](../react/navigation), and [Vue](../vue/navigation) for framework-specific routing solutions. +Note: This component should only be used with vanilla and Stencil JavaScript projects. See the routing guides for [Angular](../angular/navigation.mdx), [React](../react/navigation.mdx), and [Vue](../vue/navigation.mdx) for framework-specific routing solutions. ::: Apps should have a single `ion-router` component in the codebase. diff --git a/versioned_docs/version-v6/api/row.md b/versioned_docs/version-v6/api/row.md index 4a01eb80f00..774f02c535b 100644 --- a/versioned_docs/version-v6/api/row.md +++ b/versioned_docs/version-v6/api/row.md @@ -28,7 +28,7 @@ See the [grid](./grid) documentation for more information. ## Row Alignment -By default, columns will stretch to fill the entire height of the row and wrap when necessary. Rows are [flex containers](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Container), so there are several [CSS classes](/docs/layout/css-utilities#flex-container-properties) that can be applied to a row to customize this behavior. +By default, columns will stretch to fill the entire height of the row and wrap when necessary. Rows are [flex containers](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Container), so there are several [CSS classes](/docs/layout/css-utilities.mdx#flex-container-properties) that can be applied to a row to customize this behavior. ## Properties diff --git a/versioned_docs/version-v6/api/tabs.md b/versioned_docs/version-v6/api/tabs.md index 8c200d9a226..8cbf6662140 100644 --- a/versioned_docs/version-v6/api/tabs.md +++ b/versioned_docs/version-v6/api/tabs.md @@ -46,7 +46,7 @@ import Router from '@site/static/usage/v6/tabs/router/index.md'; :::tip Best Practices -Ionic has guides on best practices for routing patterns with tabs. Check out the guides for [Angular](/angular/navigation#working-with-tabs), [React](/react/navigation#working-with-tabs), and [Vue](/vue/navigation#working-with-tabs) for additional information. +Ionic has guides on best practices for routing patterns with tabs. Check out the guides for [Angular](../angular/navigation.mdx#working-with-tabs), [React](../react/navigation.mdx#working-with-tabs), and [Vue](../vue/navigation.mdx#working-with-tabs) for additional information. ::: diff --git a/versioned_docs/version-v6/cli.md b/versioned_docs/version-v6/cli.md index a75302d0937..f2ab8411900 100644 --- a/versioned_docs/version-v6/cli.md +++ b/versioned_docs/version-v6/cli.md @@ -41,7 +41,7 @@ For some commands, such as `ionic serve`, the help documentation is contextual t ## Architecture -The Ionic CLI is built with [TypeScript](/docs/reference/glossary#typescript) and [Node.js](/docs/reference/glossary#node). It supports Node 10.3+, but the latest Node LTS is always recommended. Follow development on the open source GitHub repository. +The Ionic CLI is built with [TypeScript](/docs/reference/glossary#typescript) and [Node.js](/docs/reference/glossary.mdx#node). It supports Node 10.3+, but the latest Node LTS is always recommended. Follow development on the open source GitHub repository. ## Troubleshooting diff --git a/versioned_docs/version-v6/cli/configuration.md b/versioned_docs/version-v6/cli/configuration.md index 9b3d7d31a95..39fc5b33a84 100644 --- a/versioned_docs/version-v6/cli/configuration.md +++ b/versioned_docs/version-v6/cli/configuration.md @@ -121,7 +121,7 @@ module.exports = function (ctx) { Available in CLI 6.2.0+ -The Ionic CLI supports a multi-app configuration setup, which involves multiple Ionic apps and shared code within a single repository, or [monorepo](../reference/glossary.md#monorepo). +The Ionic CLI supports a multi-app configuration setup, which involves multiple Ionic apps and shared code within a single repository, or [monorepo](../reference/glossary.mdx#monorepo). :::note These docs give an overview of the multi-app feature of the Ionic CLI, but don't really go into details for each framework. diff --git a/versioned_docs/version-v6/core-concepts/fundamentals.md b/versioned_docs/version-v6/core-concepts/fundamentals.md index 97a09499934..c801d3b5e11 100644 --- a/versioned_docs/version-v6/core-concepts/fundamentals.md +++ b/versioned_docs/version-v6/core-concepts/fundamentals.md @@ -15,13 +15,13 @@ For those completely new to Ionic app development, it can be helpful to get a hi ## UI Components -Ionic Framework is a library of UI Components, which are reusable elements that serve as the building blocks for an application. Ionic Components are built with [web standards](../reference/glossary.md#web-standards) using HTML, CSS, and JavaScript. Though the components are pre-built, they're designed from the ground up to be highly customizable so apps can make each component their own, allowing each app to have its own look and feel. More specifically, Ionic components can be easily themed to globally change appearance across an entire app. For more information about customizing the look, please see [Theming](../theming/basics.md). +Ionic Framework is a library of UI Components, which are reusable elements that serve as the building blocks for an application. Ionic Components are built with [web standards](../reference/glossary.mdx#web-standards) using HTML, CSS, and JavaScript. Though the components are pre-built, they're designed from the ground up to be highly customizable so apps can make each component their own, allowing each app to have its own look and feel. More specifically, Ionic components can be easily themed to globally change appearance across an entire app. For more information about customizing the look, please see [Theming](../theming/basics.mdx). ## Adaptive Styling Adaptive Styling is a built-in feature of Ionic Framework which allows app developers to use the same code base for multiple platforms. Every Ionic component adapts its look to the platform on which the app is running on. For example, Apple devices, such as the iPhone and iPad, use Apple's own iOS design language. Similarly, Android devices use Google's design language called Material Design. -By making subtle design changes between the platforms, users are provided with a familiar app experience. An Ionic app downloaded from Apple's App Store will get the iOS theme, while an Ionic app downloaded from Android's Play Store will get the Material Design theme. For the apps that are viewed as a Progressive Web App (PWA) from a browser, Ionic will default to using the Material Design theme. Additionally, deciding which platform to use in certain scenarios is entirely configurable. More information about adaptive styling can be found in [Theming](../theming/basics.md). +By making subtle design changes between the platforms, users are provided with a familiar app experience. An Ionic app downloaded from Apple's App Store will get the iOS theme, while an Ionic app downloaded from Android's Play Store will get the Material Design theme. For the apps that are viewed as a Progressive Web App (PWA) from a browser, Ionic will default to using the Material Design theme. Additionally, deciding which platform to use in certain scenarios is entirely configurable. More information about adaptive styling can be found in [Theming](../theming/basics.mdx). ## Navigation @@ -44,4 +44,4 @@ Projects such as CapacitorCSS which allows us to take advantage of the flexibility that CSS properties (variables) provide. This makes it incredibly easy to design an app that looks great while following the web standard. We provide a set of colors so developers can have some great defaults, but we encourage overriding them to create designs that match a brand, company or a desired color palette. Everything from the background color of an application to the text color is fully customizable. More information on app theming can be found in [Theming](../theming/basics.md). +At the core, Ionic Framework is built using CSS which allows us to take advantage of the flexibility that CSS properties (variables) provide. This makes it incredibly easy to design an app that looks great while following the web standard. We provide a set of colors so developers can have some great defaults, but we encourage overriding them to create designs that match a brand, company or a desired color palette. Everything from the background color of an application to the text color is fully customizable. More information on app theming can be found in [Theming](../theming/basics.mdx). 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..3839bb9d451 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 @@ -27,7 +27,7 @@ By changing these variables here and there, you can easily update the entire the } ``` -The easiest and most powerful way to create custom color palettes for your app’s UI is Ionic's [Color Generator tool](../../../theming/color-generator.md). As you change a color’s hex values, the embedded demo app automatically reflects the new colors. When you've finished making changes, simply copy and paste the generated code directly into your Ionic project. +The easiest and most powerful way to create custom color palettes for your app’s UI is Ionic's [Color Generator tool](../../../theming/color-generator.mdx). As you change a color’s hex values, the embedded demo app automatically reflects the new colors. When you've finished making changes, simply copy and paste the generated code directly into your Ionic project. 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: diff --git a/versioned_docs/version-v6/developer-resources/tools.md b/versioned_docs/version-v6/developer-resources/tools.md index 0cd5ac7d7f3..aa1a7301ba9 100644 --- a/versioned_docs/version-v6/developer-resources/tools.md +++ b/versioned_docs/version-v6/developer-resources/tools.md @@ -12,7 +12,7 @@ Quickly get started with a new Ionic app entirely in the browser! Check out the features that make working with TypeScript amazing. -### [Glossary](../reference/glossary.md) +### [Glossary](../reference/glossary.mdx) A list of common terms you'll see while developing in Ionic. diff --git a/versioned_docs/version-v6/developing/android.md b/versioned_docs/version-v6/developing/android.md index e38e12e4a6a..16cc88ad7ad 100644 --- a/versioned_docs/version-v6/developing/android.md +++ b/versioned_docs/version-v6/developing/android.md @@ -11,11 +11,11 @@ sidebar_label: Developing for Android /> -This guide covers how to run and debug Ionic apps on Android emulators and devices using [Capacitor](../reference/glossary.md#capacitor) or [Cordova](../reference/glossary.md#cordova). Android apps can be developed on Windows, macOS, and Linux. +This guide covers how to run and debug Ionic apps on Android emulators and devices using [Capacitor](../reference/glossary.mdx#capacitor) or [Cordova](../reference/glossary.mdx#cordova). Android apps can be developed on Windows, macOS, and Linux. ## Android Studio -[Android Studio](https://developer.android.com/studio/) is the IDE for creating native Android apps. It includes the [Android SDK](../reference/glossary.md#android-sdk), which will need to be configured for use in the command line. +[Android Studio](https://developer.android.com/studio/) is the IDE for creating native Android apps. It includes the [Android SDK](../reference/glossary.mdx#android-sdk), which will need to be configured for use in the command line. Android Studio is also used to [create Android virtual devices](android.md#creating-an-android-virtual-device), which are required for the Android emulator. Ionic apps can also be [launched to a device](android.md#set-up-an-android-device). @@ -133,7 +133,7 @@ Before apps can be deployed to Android simulators and devices, the native projec $ ionic cordova prepare android ``` -2. **Set the [Package ID](../reference/glossary.md#package-id).** +2. **Set the [Package ID](../reference/glossary.mdx#package-id).** For Capacitor, open the `capacitor.config.json` file and modify the `appId` property. @@ -167,7 +167,7 @@ When running on a device make sure the device and your development machine are c ## Running with Cordova -The Ionic CLI can build, copy, and deploy Ionic apps to Android simulators and devices with a single command. It can also spin up a development server, like the one used in `ionic serve`, to provide [live-reload](../reference/glossary.md#livereload) functionality. +The Ionic CLI can build, copy, and deploy Ionic apps to Android simulators and devices with a single command. It can also spin up a development server, like the one used in `ionic serve`, to provide [live-reload](../reference/glossary.mdx#livereload) functionality. Run the following to start a long-running CLI process that boots up a live-reload server: diff --git a/versioned_docs/version-v6/developing/config.md b/versioned_docs/version-v6/developing/config.md index f73ce133123..b89147dac5a 100644 --- a/versioned_docs/version-v6/developing/config.md +++ b/versioned_docs/version-v6/developing/config.md @@ -129,7 +129,7 @@ Below are the config options that Ionic uses. | `navAnimation` | `AnimationBuilder` | Overrides the default "animation" of all `ion-nav` and `ion-router-outlet` across the whole application. | | `pickerEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-picker`, overriding the default "animation". | | `pickerLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-picker`, overriding the default "animation". | -| `platform` | [`PlatformConfig`](/docs/angular/platform#customizing-platform-detection-methods) | Overrides the default platform detection methods. | +| `platform` | [`PlatformConfig`](/docs/angular/platform.mdx#customizing-platform-detection-methods) | Overrides the default platform detection methods. | | `popoverEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-popover`, overriding the default "animation". | | `popoverLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-popover`, overriding the default "animation". | | `refreshingIcon` | `string` | Overrides the default icon in all `` components. | diff --git a/versioned_docs/version-v6/developing/ios.md b/versioned_docs/version-v6/developing/ios.md index 16c88bf8aff..0ff652b2db4 100644 --- a/versioned_docs/version-v6/developing/ios.md +++ b/versioned_docs/version-v6/developing/ios.md @@ -12,14 +12,14 @@ skipIntros: true /> -This guide covers how to run and debug Ionic apps on iOS simulators and devices using [Capacitor](../reference/glossary.md#capacitor) or [Cordova](../reference/glossary.md#cordova). iOS apps can only be developed on macOS with Xcode installed. +This guide covers how to run and debug Ionic apps on iOS simulators and devices using [Capacitor](../reference/glossary.mdx#capacitor) or [Cordova](../reference/glossary.mdx#cordova). iOS apps can only be developed on macOS with Xcode installed. There are two workflows for running Ionic apps on iOS: - [Running with Xcode](#running-with-xcode) - [Running with the Ionic CLI](#running-with-the-ionic-cli) -The Xcode approach is generally more stable, but the Ionic CLI approach offers [live-reload](../reference/glossary.md#livereload) functionality. +The Xcode approach is generally more stable, but the Ionic CLI approach offers [live-reload](../reference/glossary.mdx#livereload) functionality. ## Xcode Setup @@ -53,7 +53,7 @@ Additional setup is required for Cordova to support programmatic builds. This se ### ios-sim & ios-deploy -The [`ios-sim`](https://github.com/ios-control/ios-sim) and [`ios-deploy`](https://github.com/ios-control/ios-deploy) are utilities that deploy apps to the iOS simulator and iOS devices during development. They can be installed globally with [npm](../reference/glossary.md#npm). +The [`ios-sim`](https://github.com/ios-control/ios-sim) and [`ios-deploy`](https://github.com/ios-control/ios-deploy) are utilities that deploy apps to the iOS simulator and iOS devices during development. They can be installed globally with [npm](../reference/glossary.mdx#npm). ```shell $ npm install -g ios-sim @@ -78,7 +78,7 @@ Before apps can be deployed to iOS simulators and devices, the native project mu $ ionic cordova prepare ios ``` -1. **Set the [Package ID](/reference/glossary.md#package-id).** +1. **Set the [Package ID](/reference/glossary.mdx#package-id).** For Capacitor, open the `capacitor.config.json` file and modify the `appId` property. @@ -129,7 +129,7 @@ In this workflow, Xcode can automatically fix common compilation and signing iss ## Running with the Ionic CLI -The Ionic CLI can build, copy, and deploy Ionic apps to iOS simulators and devices with a single command. It can also spin up a development server, like the one used in `ionic serve`, to provide [live-reload](../reference/glossary.md#livereload) functionality. +The Ionic CLI can build, copy, and deploy Ionic apps to iOS simulators and devices with a single command. It can also spin up a development server, like the one used in `ionic serve`, to provide [live-reload](../reference/glossary.mdx#livereload) functionality. With live-reload, changes made to the app's source files trigger a rebuild of web assets and the changes are reflected on the simulator or device without having to deploy again. diff --git a/versioned_docs/version-v6/index.md b/versioned_docs/version-v6/index.md index 51f7e919ca9..13ff4b889a9 100644 --- a/versioned_docs/version-v6/index.md +++ b/versioned_docs/version-v6/index.md @@ -58,7 +58,7 @@ Get started building by [installing Ionic](intro/cli.mdx) or following our [Firs ## Overview -Ionic focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as [Angular](angular/overview.mdx), [React](react.mdx), or [Vue](vue/overview.mdx). Alternatively, it can be used standalone without any frontend framework using a simple [script include](intro/cdn.md). If you’d like to learn more about Ionic before diving in, we created a video to walk you through the basics. +Ionic focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as [Angular](angular/overview.mdx), [React](react.mdx), or [Vue](vue/overview.mdx). Alternatively, it can be used standalone without any frontend framework using a simple [script include](intro/cdn.mdx). If you’d like to learn more about Ionic before diving in, we created a video to walk you through the basics. ### One codebase, running everywhere diff --git a/versioned_docs/version-v6/intro/cdn.mdx b/versioned_docs/version-v6/intro/cdn.mdx index 8d93cc4cde6..1f9696aa558 100644 --- a/versioned_docs/version-v6/intro/cdn.mdx +++ b/versioned_docs/version-v6/intro/cdn.mdx @@ -25,7 +25,7 @@ It's recommended to use [jsdelivr](https://www.jsdelivr.com/) to access the Fram ``` -With this it's possible to use all of the Ionic Framework core components without having to install a framework. The CSS bundle will include all of the Ionic [Global Stylesheets](../layout/global-stylesheets). +With this it's possible to use all of the Ionic Framework core components without having to install a framework. The CSS bundle will include all of the Ionic [Global Stylesheets](../layout/global-stylesheets.mdx). :::note This does not install Angular or any other frameworks. This allows use of the Ionic Framework core components without a framework. diff --git a/versioned_docs/version-v6/intro/upgrading-to-ionic-6.mdx b/versioned_docs/version-v6/intro/upgrading-to-ionic-6.mdx index 011970e1d64..9d547486027 100644 --- a/versioned_docs/version-v6/intro/upgrading-to-ionic-6.mdx +++ b/versioned_docs/version-v6/intro/upgrading-to-ionic-6.mdx @@ -404,7 +404,7 @@ Ensure `null` is not passed in as a value to the `placeholder` property. We reco ### Browser Support -The list of browsers that Ionic supports has changed. Review the [Browser Support Guide](../reference/browser-support) to ensure you are deploying apps to supported browsers. +The list of browsers that Ionic supports has changed. Review the [Browser Support Guide](../reference/browser-support.mdx) to ensure you are deploying apps to supported browsers. If you have a `browserslist` or `.browserslistrc` file, update it with the following content: diff --git a/versioned_docs/version-v6/reference/glossary.mdx b/versioned_docs/version-v6/reference/glossary.mdx index e61088621c0..02df343abf4 100644 --- a/versioned_docs/version-v6/reference/glossary.mdx +++ b/versioned_docs/version-v6/reference/glossary.mdx @@ -78,7 +78,7 @@ title: Glossary

- +{/* cspell:disable */}
@@ -97,7 +97,7 @@ title: Glossary

- +{/* cspell:enable */}
diff --git a/versioned_docs/version-v6/reference/versioning.mdx b/versioned_docs/version-v6/reference/versioning.mdx index c7e746da92b..b7f89e2879b 100644 --- a/versioned_docs/version-v6/reference/versioning.mdx +++ b/versioned_docs/version-v6/reference/versioning.mdx @@ -1,6 +1,6 @@ # Versioning - +{/* TOC goes here */} Ionic Framework follows the Semantic Versioning (SemVer) convention: major.minor.patch. Incompatible API changes increment the major version, adding backwards-compatible functionality increments the minor version, and backwards-compatible bug fixes increment the patch version. diff --git a/versioned_docs/version-v6/theming/css-shadow-parts.mdx b/versioned_docs/version-v6/theming/css-shadow-parts.mdx index e54afaa205f..6ac72ee7ee4 100644 --- a/versioned_docs/version-v6/theming/css-shadow-parts.mdx +++ b/versioned_docs/version-v6/theming/css-shadow-parts.mdx @@ -123,7 +123,7 @@ CSS Shadow Parts are supported in the recent versions of all of the major browse ### Vendor Prefixed Pseudo-Elements - +{/* prettier-ignore */} Vendor prefixed pseudo-elements are not supported at this time. An example of this would be any of the `::-webkit-scrollbar` pseudo-elements: ```css diff --git a/versioned_docs/version-v6/theming/dark-mode.mdx b/versioned_docs/version-v6/theming/dark-mode.mdx index fa3befa3606..847bef0aa26 100644 --- a/versioned_docs/version-v6/theming/dark-mode.mdx +++ b/versioned_docs/version-v6/theming/dark-mode.mdx @@ -84,7 +84,7 @@ function toggleDarkTheme(shouldAdd) { Tip: make sure to view the Codepen below in a [supported browser](https://caniuse.com/#feat=prefers-color-scheme) and then try changing the system preferences on your device between light & dark mode. Here's [how to enable dark mode on Windows 10](https://blogs.windows.com/windowsexperience/2016/08/08/windows-10-tip-personalize-your-pc-by-enabling-the-dark-theme/) and [how to enable it on a Mac](https://support.apple.com/en-us/HT208976). ::: - +{/* Codepen https://codepen.io/ionic/pen/jONzJpG */} @@ -117,7 +117,7 @@ function checkToggle(shouldCheck) { } ``` - +{/* Codepen https://codepen.io/ionic/pen/zYOpQLj */} diff --git a/versioned_docs/version-v6/troubleshooting/native.mdx b/versioned_docs/version-v6/troubleshooting/native.mdx index 0ccd3740891..a20617fc1ac 100644 --- a/versioned_docs/version-v6/troubleshooting/native.mdx +++ b/versioned_docs/version-v6/troubleshooting/native.mdx @@ -24,7 +24,7 @@ Running an app on an iOS device requires a provisioning profile. If a provisioni For Cordova, open the `config.xml` file and modify the `id` attribute of the root element, ``. See [the Cordova documentation](https://cordova.apache.org/docs/en/latest/config_ref/#widget) for more information. - +{/* prettier-ignore */} 2. Open the project in Xcode. For Capacitor, run the following to open the app in Xcode: @@ -35,12 +35,12 @@ Running an app on an iOS device requires a provisioning profile. If a provisioni For Cordova, open Xcode. Use **File** » **Open** and locate the app. Open the app's `platforms/ios` directory. - +{/* prettier-ignore */} 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. ![Xcode Identity Setup](/img/running/ios-xcode-identity-setup.png) - +{/* prettier-ignore */} 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. diff --git a/versioned_docs/version-v6/utilities/animations.mdx b/versioned_docs/version-v6/utilities/animations.mdx index ea0b128d6d6..0fd410bf22f 100644 --- a/versioned_docs/version-v6/utilities/animations.mdx +++ b/versioned_docs/version-v6/utilities/animations.mdx @@ -517,7 +517,7 @@ const parent = createAnimation() This example shows 3 child animations controlled by a single parent animation. Animations `squareA` and `squareB` inherit the parent animation's duration of 2000ms, but animation `squareC` has a duration of 5000ms since it was explicitly set. - +{/* cspell:disable-next-line */} @@ -636,7 +636,7 @@ In this example, an inline opacity of 0.2 is set on the `.square` element prior See [Methods](#methods) for a complete list of hooks. - +{/* cspell:disable-next-line */} @@ -1512,7 +1512,7 @@ export default defineComponent({ ```` - +{/* cspell:disable-next-line */} diff --git a/versioned_docs/version-v6/vue/navigation.mdx b/versioned_docs/version-v6/vue/navigation.mdx index d264a062d0e..339eaef08b2 100644 --- a/versioned_docs/version-v6/vue/navigation.mdx +++ b/versioned_docs/version-v6/vue/navigation.mdx @@ -140,7 +140,7 @@ The `router-link` attribute can be set on any Ionic Vue component, and the route The `router-direction` attribute accepts values of `forward`, `back`, or `none` and is used to control the direction of the page transition. -The `router-animation` attribute accepts an `AnimationBuilder` function and is used to provide a custom page transition that is only used when clicking the component it is provided on. The `AnimationBuilder` type is a function that returns an Ionic Animation instance. See the [Animations documentation](../utilities/animations) for more information on using animations in Ionic Vue. +The `router-animation` attribute accepts an `AnimationBuilder` function and is used to provide a custom page transition that is only used when clicking the component it is provided on. The `AnimationBuilder` type is a function that returns an Ionic Animation instance. See the [Animations documentation](../utilities/animations.mdx) for more information on using animations in Ionic Vue. ```html Click Me @@ -192,7 +192,7 @@ The example above has the app navigate to `/page2` with a custom animation that `useIonRouter` uses the Vue `inject()` function and should only be used inside of your `setup()` function. ::: -See the [useIonRouter documentation](./utility-functions#router) for more details as well as type information. +See the [useIonRouter documentation](./utility-functions.mdx#router) for more details as well as type information. ### Navigating using `router.go` @@ -586,7 +586,7 @@ Components presented via `IonModal` or `IonPopover` do not typically need an `Io ### useIonRouter -▸ **useIonRouter**(): [`UseIonRouterResult`](utility-functions#useionrouterresult) +▸ **useIonRouter**(): [`UseIonRouterResult`](utility-functions.mdx#useionrouterresult) Returns the Ionic router instance, containing API methods for navigating, customizing page transitions and routing context for native features. This function can be used in combination with the [`useRouter`](https://router.vuejs.org/api/index.html#userouter) function from Vue. diff --git a/versioned_docs/version-v6/vue/utility-functions.mdx b/versioned_docs/version-v6/vue/utility-functions.mdx index d5461a255a9..295ba5f545f 100644 --- a/versioned_docs/version-v6/vue/utility-functions.mdx +++ b/versioned_docs/version-v6/vue/utility-functions.mdx @@ -85,7 +85,7 @@ useIonRouter(): UseIonRouterResult; - The `replace` method is the equivalent of calling `ionRouter.navigate(location, 'root', 'replace', animation)`. -See the [Vue Navigation Documentation](./navigation#navigating-using-useionrouter) for more usage examples. +See the [Vue Navigation Documentation](./navigation.mdx#navigating-using-useionrouter) for more usage examples. ## Hardware Back Button @@ -181,4 +181,4 @@ export default defineComponent({ Pages in your app need to be using the `IonPage` component in order for lifecycle methods and hooks to fire properly. ::: -See the [Vue Lifecycle Documentation](./lifecycle) for more information and usage examples. +See the [Vue Lifecycle Documentation](./lifecycle.mdx) for more information and usage examples.