diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 63686fc33de..83759a3f32b 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -99,17 +99,17 @@ npm run spellcheck - A **directory** or anything matching a **regular expression**, update the following file: `cspell.json` - For example, we don't want to flag anything inside of code ticks (`) or code blocks (```), so there are regular expressions added to ignore anything inside of these. - An **entire line**, add the following comment above it: - ```markdown - + ```mdx + {/* cspell:disable-next-line */} ``` - **Multiple lines**, add comments above and below the lines to be ignored: - ```markdown - + ```mdx + {/* cspell:disable */}

Everything inside of these comments will be ignored by the spell checkr. Proofread your own words carefully.

- + {/* cspell:enable */} ``` > [!IMPORTANT] diff --git a/_templates/README.md b/_templates/README.md index 943b6966594..dda6358c96d 100644 --- a/_templates/README.md +++ b/_templates/README.md @@ -21,7 +21,7 @@ If you need a component for multiple versions of Ionic Framework, you (currently ## Usage -Once you've generated your playground, you need to add it to the main markdown file in the docs (e.g. [docs/api/button.md](../docs/api/button.md)) by doing something similar to the following example: +Once you've generated your playground, you need to add it to the main markdown file in the docs (e.g. [docs/api/button.mdx](../docs/api/button.mdx)) by doing something similar to the following example: ``` ## Feature diff --git a/docs/updating/9-0.mdx b/docs/updating/9-0.mdx index 05381929287..a3e933edc46 100644 --- a/docs/updating/9-0.mdx +++ b/docs/updating/9-0.mdx @@ -558,18 +558,18 @@ The native `` element does not emit Ionic's custom events. Use the standard ### Input -#### `autocorrect` Property Type Changed to Boolean {#input-autocorrect-property-type-changed-to-boolean} +#### `autocorrect` Property Type Changed to Boolean {/* #input-autocorrect-property-type-changed-to-boolean */} The `autocorrect` property on `ion-input` is now a `boolean` (default `false`) instead of `'on' | 'off'`. Because the attribute coerces to `true` for any value other than the string `"false"`, `autocorrect="off"` now enables autocorrect. - Remove the attribute to keep autocorrect disabled (the default). - Use a property binding to enable it: `[autocorrect]="true"` (Angular), `autocorrect={true}` (React), or `:autocorrect="true"` (Vue). -#### Floating Label Behavior {#input-floating-label-behavior} +#### Floating Label Behavior {/* #input-floating-label-behavior */} Floating labels no longer automatically float when the input contains slotted content. Labels float only when the input is focused or has a value. -#### Internal DOM Structure Changes {#input-internal-dom-structure-changes} +#### Internal DOM Structure Changes {/* #input-internal-dom-structure-changes */} The internal DOM structure has been reorganized to support floating labels with slotted content. @@ -686,7 +686,7 @@ The `swipeBackEnabled` config option is still respected as the initial default a ### Searchbar -#### `autocorrect` Property Type Changed to Boolean {#searchbar-autocorrect-property-type-changed-to-boolean} +#### `autocorrect` Property Type Changed to Boolean {/* #searchbar-autocorrect-property-type-changed-to-boolean */} The `autocorrect` property on `ion-searchbar` is now a `boolean` (default `false`) instead of `'on' | 'off'`. Because the attribute coerces to `true` for any value other than the string `"false"`, `autocorrect="off"` now enables autocorrect. @@ -707,11 +707,11 @@ When using `interface="action-sheet"`, `ion-select` no longer assigns the `selec Previously, the `selected` role was assigned only to the option matching the select's current value. Because the dismiss role mirrors the tapped button, this surfaced in just one case: re-selecting the already-selected option dismissed the action sheet with `role: "selected"` in `ionActionSheetDidDismiss`. Tapping any other option changed the value and dismissed with `role: ""`. Now that the role is no longer assigned, both cases dismiss with `role: undefined`. Apps that inspected this role to detect that a value was chosen, such as reading `role` from the underlying action sheet's `onDidDismiss` result, should listen for `ion-select`'s `ionChange` event instead, which emits the selected value when the selection changes. -#### Floating Label Behavior {#select-floating-label-behavior} +#### Floating Label Behavior {/* #select-floating-label-behavior */} Floating labels no longer automatically float when the select contains slotted content. Labels float only when the select is focused or has a value. Additionally, when using a floating label, the placeholder is only visible when the select is focused. -#### Internal DOM Structure Changes {#select-internal-dom-structure-changes} +#### Internal DOM Structure Changes {/* #select-internal-dom-structure-changes */} The internal DOM structure has been reorganized to support floating labels with slotted content. This changes the structure and location of several exposed shadow parts. @@ -745,11 +745,11 @@ Use the new `part="start"`, `part="control"`, and `part="end"` parts to target t ### Textarea -#### Floating Label Behavior {#textarea-floating-label-behavior} +#### Floating Label Behavior {/* #textarea-floating-label-behavior */} Floating labels no longer automatically float when the textarea contains slotted content. Labels float only when the textarea is focused or has a value. -#### Internal DOM Structure Changes {#textarea-internal-dom-structure-changes} +#### Internal DOM Structure Changes {/* #textarea-internal-dom-structure-changes */} The internal DOM structure has been reorganized to support floating labels with slotted content. diff --git a/plugins/docusaurus-plugin-ionic-component-api/index.js b/plugins/docusaurus-plugin-ionic-component-api/index.js index 93a400479bd..93e40557be3 100644 --- a/plugins/docusaurus-plugin-ionic-component-api/index.js +++ b/plugins/docusaurus-plugin-ionic-component-api/index.js @@ -86,32 +86,6 @@ module.exports = function (context, options) { createData(`${basePath}/custom-props.mdx`, data.customProps), createData(`${basePath}/slots.mdx`, data.slots) ); - - /** - * TODO(FW-6456): Remove once all branches import the `.mdx` names instead of `.md`. - * Transitional: the `.md` names are still imported by pages this repo does not - * control on every branch at once. - * - * - `scripts/i18n.sh` copies the `translation/jp` branch's `docs/` tree into - * `i18n/ja` on every build, and those copies still import `.md`. - * - Major branches keep their own api pages. Until each is rewritten, a sync that - * brings this plugin over would otherwise leave them importing names it no longer - * emits. - * - * Emitted unconditionally on purpose. Guarding on locale only holds on a branch whose - * pages have already been rewritten, so it reintroduces exactly the coupling this - * avoids. These land in `.docusaurus`, not a docs content root, so they are never - * routed as pages and the duplicate basenames cannot collide. - * - * Remove once `translation/jp` and every live branch import the `.mdx` names. - */ - promises.push( - createData(`${basePath}/props.md`, data.props), - createData(`${basePath}/events.md`, data.events), - createData(`${basePath}/methods.md`, data.methods), - createData(`${basePath}/parts.md`, data.parts), - createData(`${basePath}/slots.md`, data.slots) - ); } await Promise.all(promises); @@ -127,21 +101,6 @@ module.exports = function (context, options) { alias: { '@ionic-internal/component-api': `${context.siteDir}/.docusaurus/docusaurus-plugin-ionic-component-api/default`, }, - /** - * TODO(FW-6456): Remove once every branch imports the `.mdx` names. - * - * Lets a `.md` import resolve to a `.mdx` file. The Japanese site is - * built from this branch's tree combined with prose pulled from - * `translation/jp`, so a rename here breaks those imports until that - * branch catches up. This has to merge first, and the translation - * branch can then follow at any interval. - * - * Applies to every `.md` import in the repo, so a stale `.mdx` next - * to a `.md` will shadow it. - */ - extensionAlias: { - '.md': ['.mdx', '.md'], - }, }, }; }, diff --git a/versioned_docs/version-v5/angular/performance.mdx b/versioned_docs/version-v5/angular/performance.mdx index 670aa5e33a5..4e2b552d922 100644 --- a/versioned_docs/version-v5/angular/performance.mdx +++ b/versioned_docs/version-v5/angular/performance.mdx @@ -50,7 +50,7 @@ For more information on how Angular manages change propagation with `ngFor` see ## From the Community - +{/* cspell:disable */} [High Performance Animations in Ionic](https://www.joshmorony.com/high-performance-animations-in-ionic/) - Josh Morony @@ -60,7 +60,7 @@ For more information on how Angular manages change propagation with `ngFor` see [Ionic Framework is Fast (But Your Code Might Not Be)](https://www.joshmorony.com/ionic-framework-is-fast-but-your-code-might-not-be/) - Josh Morony - +{/* cspell:enable */} :::note Do you have a guide you'd like to share? Click the _Edit this page_ button below. diff --git a/versioned_docs/version-v5/api/item.mdx b/versioned_docs/version-v5/api/item.mdx index 3ed4fd015c7..7c3c7fc8259 100644 --- a/versioned_docs/version-v5/api/item.mdx +++ b/versioned_docs/version-v5/api/item.mdx @@ -26,20 +26,6 @@ An item is considered "clickable" if it has an `href` or `button` property set. By default [clickable items](#clickable-items) will display a right arrow icon on `ios` mode. To hide the right arrow icon on clickable elements, set the `detail` property to `false`. To show the right arrow icon on an item that doesn't display it naturally, set the `detail` property to `true`. - - ## Item Placement Item uses named [slots](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) in order to position content. This logic makes it possible to write a complex item with simple, understandable markup without having to worry about styling and positioning the elements. diff --git a/versioned_docs/version-v5/cli.mdx b/versioned_docs/version-v5/cli.mdx index c0536705c77..0594d11c7b5 100644 --- a/versioned_docs/version-v5/cli.mdx +++ b/versioned_docs/version-v5/cli.mdx @@ -32,8 +32,6 @@ Be sure to run `ionic --help` in your project directory. For some commands, such as `ionic serve`, the help documentation is contextual to the type of your project, e.g. React vs Angular. ::: - - ## 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. diff --git a/versioned_docs/version-v5/components.mdx b/versioned_docs/version-v5/components.mdx index 8a9c8a10190..b7462e0711c 100644 --- a/versioned_docs/version-v5/components.mdx +++ b/versioned_docs/version-v5/components.mdx @@ -42,7 +42,7 @@ Ionic apps are made of high-level building blocks called Components, which allow - + {/* prettier-ignore */}

Cards are a great way to display an important piece of content, and can contain images, buttons, text, and more.

 diff --git a/versioned_docs/version-v5/core-concepts/what-are-progressive-web-apps.mdx b/versioned_docs/version-v5/core-concepts/what-are-progressive-web-apps.mdx index 4663faec695..17b8e493903 100644 --- a/versioned_docs/version-v5/core-concepts/what-are-progressive-web-apps.mdx +++ b/versioned_docs/version-v5/core-concepts/what-are-progressive-web-apps.mdx @@ -4,8 +4,6 @@ sidebar_label: What are PWAs? # Progressive Web Apps - - ### The web...but better A Progressive Web App (PWA) is a web app that uses modern web capabilities to deliver an app-like experience to users. @@ -40,7 +38,7 @@ To be considered a Progressive Web App, your app must be: - Linkable - Easily share via URL and not require complex installation. - +{/* cspell:disable */} @@ -48,7 +46,7 @@ To be considered a Progressive Web App, your app must be: - +{/* cspell:enable */} There is a lot here, but it boils down to a few points for Ionic apps. diff --git a/versioned_docs/version-v5/developer-resources/books.mdx b/versioned_docs/version-v5/developer-resources/books.mdx index 4553ac800c3..e3eae671a5a 100644 --- a/versioned_docs/version-v5/developer-resources/books.mdx +++ b/versioned_docs/version-v5/developer-resources/books.mdx @@ -4,7 +4,7 @@ Angular. Vue. React. Vanilla JavaScript. All of these tools can be used to create awesome applications with Ionic, thanks to the new Stencil compiler. This book is aimed at beginners that are looking to create amazing web, mobile and desktop applications using Ionic with examples across all of the popular frameworks. - +{/* cspell:disable-next-line */} by [Paul Halliday](https://developer.school) @@ -12,19 +12,19 @@ by [Paul Halliday](https://developer.school) As well as being a powerful tool for generating reuseable web components, StencilJS provides the tools needed to build an entire application out of web components. Combined with the Ionic web components, StencilJS gives us everything we need to build high-quality production mobile applications - no framework required. - +{/* cspell:disable-next-line */} by [Joshua Morony](https://www.joshmorony.com/blog) ### [Mobile App Development with Ionic: Cross-Platform Apps with Ionic 2, Angular 2, and Cordova](https://www.amazon.com/Mobile-App-Development-Ionic-Cross-Platform/dp/1491937785/ref=sr_1_2?ie=UTF8&qid=1464183332&sr=8-2&keywords=ionic+2) - +{/* cspell:disable-next-line */} by Chris Griffith ### [Building Mobile Apps with Ionic & Angular](https://www.joshmorony.com/building-mobile-apps-with-ionic-2/) - +{/* cspell:disable-next-line */} by [Joshua Morony](https://www.joshmorony.com/blog) @@ -32,19 +32,19 @@ Building Mobile Apps with Ionic & Angular is an all-in-one resource for learning ### [Ionic 2 From Zero to App Store](https://devdactic.com/zero-to-app) - +{/* cspell:disable-next-line */} by Simon Reimler ### [Ionic Framework By Example](https://www.packtpub.com/application-development/ionic-framework-example) - +{/* cspell:disable-next-line */} by Sani Yusuf ### [Building Firestore Powered Ionic Apps](https://javebratt.com/ionic-firebase-book/) - +{/* cspell:disable-next-line */} by Jorge Vergara @@ -52,24 +52,24 @@ This book will help you go from not knowing what Firebase is to be able to use t ### [Ionic 2 Cookbook - Second Edition](https://www.amazon.com/Ionic-Cookbook-Second-Hoc-Phan-ebook/dp/B01C4D9VWS?ie=UTF8&keywords=ionic%202&qid=1464183332&ref_=sr_1_3&sr=8-3) - +{/* cspell:disable-next-line */} by Hoc Phan ### [Mastering Ionic 2](https://www.leanpub.com/masteringionic2) - +{/* cspell:disable-next-line */} by James Griffiths ### [Learning Ionic](https://www.packtpub.com/in/application-development/learning-ionic) (Ionic 1) - +{/* cspell:disable-next-line */} by Arvind Ravulavaru ### [Learning Ionic - Second Edition](https://www.packtpub.com/in/web-development/learning-ionic-second-edition) (Ionic 2/3) - +{/* cspell:disable-next-line */} by Arvind Ravulavaru diff --git a/versioned_docs/version-v5/developer-resources/courses.mdx b/versioned_docs/version-v5/developer-resources/courses.mdx index 900a2c51084..568f0fc05a4 100644 --- a/versioned_docs/version-v5/developer-resources/courses.mdx +++ b/versioned_docs/version-v5/developer-resources/courses.mdx @@ -2,7 +2,7 @@ ### [Elite Ionic](https://www.joshmorony.com/elite/) - +{/* cspell:disable-next-line */} by Josh Morony @@ -10,7 +10,7 @@ Elite Ionic is an online course for Ionic developers who want to move past the b ### [Ionic Academy](https://ionicacademy.com/) - +{/* cspell:disable-next-line */} by Simon Grimm @@ -18,7 +18,7 @@ Learn Ionic with step-by-step video courses & quick wins from one of the Ionic c ### [Ionic Framework: Tips, Tricks & Techniques](https://www.packtpub.com/mobile/ionic-framework-tips-tricks-and-techniques-video) - +{/* cspell:disable-next-line */} by Charles Muzonzini @@ -26,7 +26,7 @@ In this course, you will master tips and best practices for Ionic 4 & Ionic 5 th ### [Building Desktop Apps with Ionic and Electron](https://pluralsight.pxf.io/VeMXO) - +{/* cspell:disable-next-line */} by Michael Callaghan at Pluralsight @@ -41,7 +41,7 @@ Windows and macOS users. ### [Building Progressive Web Apps with Ionic](https://pluralsight.pxf.io/Ly2EY) - +{/* cspell:disable-next-line */} by Michael Callaghan at Pluralsight @@ -58,7 +58,7 @@ Progressive Web Application anywhere you desire. ### [Ionic CLI](https://pluralsight.pxf.io/ionic-cli) - +{/* cspell:disable-next-line */} by Michael Callaghan at Pluralsight @@ -72,36 +72,36 @@ the confidence to use the Ionic CLI as part of your everyday Ionic development. ### [Wordpress Rest API and Ionic 4 (Angular) App With Auth](https://www.udemy.com/course/wordpress-rest-api-and-ionic-3-crud/) - +{/* cspell:disable-next-line */} by Baljeet Singh at Udemy ### [Building Mobile Apps with Ionic 2, Angular 2, and TypeScript](https://app.pluralsight.com/library/courses/ionic2-angular2-typescript-mobile-apps/table-of-contents) - +{/* cspell:disable-next-line */} by Pluralsight ### [Introducing Ionic 2](http://shop.oreilly.com/product/0636920050353.do) - +{/* cspell:disable-next-line */} by Mathieu Chauvinc ### [Ionic 2 Master Course](https://www.udemy.com/ionic-2-tutorial/) - +{/* cspell:disable-next-line */} by Udemy ### [Introducing Ionic 2](https://www.udemy.com/introducing-ionic-2/) - +{/* cspell:disable-next-line */} by Udemy ### [Ionic 2 Solutions](https://www.packtpub.com/web-development/ionic-2-solutions-video) - +{/* cspell:disable-next-line */} by Hoc Phan diff --git a/versioned_docs/version-v5/developing/android.mdx b/versioned_docs/version-v5/developing/android.mdx index 03dbe7ba7c3..cf0ab4fa9c7 100644 --- a/versioned_docs/version-v5/developing/android.mdx +++ b/versioned_docs/version-v5/developing/android.mdx @@ -112,7 +112,7 @@ If you are using any version of **`cordova-android`** below `10.0.0`, install th ### Gradle - +{/* prettier-ignore */} Gradle is the build tool used in Android apps and must be installed separately. See the install page for details. ## Project Setup diff --git a/versioned_docs/version-v5/developing/ios.mdx b/versioned_docs/version-v5/developing/ios.mdx index ef0c33addfb..fac3bdb95c2 100644 --- a/versioned_docs/version-v5/developing/ios.mdx +++ b/versioned_docs/version-v5/developing/ios.mdx @@ -77,7 +77,7 @@ Before apps can be deployed to iOS simulators and devices, the native project mu 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 */} 1. Open the project in Xcode. For Capacitor, run the following to open the app in Xcode: @@ -88,12 +88,12 @@ Before apps can be deployed to iOS simulators and devices, the native project mu For Cordova, open Xcode. Use **File** » **Open** and locate the app. Open the app's `platforms/ios` directory. - +{/* prettier-ignore */} 1. In Project navigator, select the project root to open the project editor. Under the **Identity** section, verify that the Package ID that was set matches the Bundle Identifier. ![Xcode showing the Identity section for an iOS app with fields for Display Name, Bundle Identifier, Version, and Build.](/img/running/ios-xcode-identity-setup.png "Xcode Identity Section") - +{/* prettier-ignore */} 1. In the same project editor, under the Signing section, ensure Automatically manage signing is enabled. Then, select a Development Team. Given a Development Team, Xcode will attempt to automatically prepare provisioning and signing. ![Xcode showing the Signing section with 'Automatically manage signing' enabled and a Development Team selected.](/img/running/ios-xcode-signing-setup.png "Xcode Signing Section") diff --git a/versioned_docs/version-v5/index.mdx b/versioned_docs/version-v5/index.mdx index 451291d3bd8..607bf8ce35f 100644 --- a/versioned_docs/version-v5/index.mdx +++ b/versioned_docs/version-v5/index.mdx @@ -130,7 +130,7 @@ Ionic Framework is actively developed and maintained full-time by a core team, a There are millions of Ionic developers in o ver 200 countries worldwide. Here are some ways to join: - +{/* prettier-ignore */} - Forum: A great place for asking questions and sharing ideas. - Twitter: Where we post updates and share content from the Ionic community. - GitHub: For reporting bugs or requesting new features, create an issue here. PRs welcome! diff --git a/versioned_docs/version-v5/native.mdx b/versioned_docs/version-v5/native.mdx index 7d2c5e52b89..4a6e958660c 100644 --- a/versioned_docs/version-v5/native.mdx +++ b/versioned_docs/version-v5/native.mdx @@ -33,11 +33,11 @@ Build native-powered app experiences with a collection of open source and premiu - + {/* prettier-ignore */}

A modern, open source native runtime built and maintained by the Ionic team and the Capacitor community. Our recommended native solution.

 - + {/* prettier-ignore */}

A collection of free Cordova plugins, built and maintained by the community, with TypeScript wrappers and a consistent API and naming convention.

 diff --git a/versioned_docs/version-v5/react/navigation.mdx b/versioned_docs/version-v5/react/navigation.mdx index 6405fae835d..2ae09b01ca4 100644 --- a/versioned_docs/version-v5/react/navigation.mdx +++ b/versioned_docs/version-v5/react/navigation.mdx @@ -281,8 +281,8 @@ For more info on routing in React using React Router, check out their docs at [h ## From the Community - +{/* cspell:disable */} [Ionic 4 and React: Navigation](https://alligator.io/ionic/ionic-4-react-navigation) - Paul Halliday - +{/* cspell:enable */} 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..3785b472ba0 100644 --- a/versioned_docs/version-v5/reference/versioning.mdx +++ b/versioned_docs/version-v5/reference/versioning.mdx @@ -1,7 +1,5 @@ # Versioning - - 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. ## Release Schedule diff --git a/versioned_docs/version-v5/theming/css-shadow-parts.mdx b/versioned_docs/version-v5/theming/css-shadow-parts.mdx index 1dad4e4a7d3..389cd6d42ca 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 e57874f8b45..b7f04b78e4c 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 1b1ed0d7a68..51a1ce73a19 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 fc8328c837f..17cf512496e 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 showing the Identity section for an iOS app with fields for Display Name, Bundle Identifier, Version, and Build.](/img/running/ios-xcode-identity-setup.png "Xcode Identity Section") - +{/* 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/angular/performance.mdx b/versioned_docs/version-v6/angular/performance.mdx index 62877e6e4dd..c4f7760e318 100644 --- a/versioned_docs/version-v6/angular/performance.mdx +++ b/versioned_docs/version-v6/angular/performance.mdx @@ -56,7 +56,7 @@ For more information on how Angular manages change propagation with `ngFor` see ## From the Community - +{/* cspell:disable */} [High Performance Animations in Ionic](https://www.joshmorony.com/high-performance-animations-in-ionic/) - Josh Morony @@ -66,7 +66,7 @@ For more information on how Angular manages change propagation with `ngFor` see [Ionic Framework is Fast (But Your Code Might Not Be)](https://www.joshmorony.com/ionic-framework-is-fast-but-your-code-might-not-be/) - Josh Morony - +{/* cspell:enable */} :::note Do you have a guide you'd like to share? Click the _Edit this page_ button below. diff --git a/versioned_docs/version-v6/api/buttons.mdx b/versioned_docs/version-v6/api/buttons.mdx index 70a3a5d99d4..90fe4f6994e 100644 --- a/versioned_docs/version-v6/api/buttons.mdx +++ b/versioned_docs/version-v6/api/buttons.mdx @@ -62,7 +62,7 @@ This feature is only available for iOS. ::: - +{/* Reuse the playground from the Title directory */} import CollapsibleLargeTitleButtons from '@site/static/usage/v6/title/collapsible-large-title/buttons/index.mdx'; diff --git a/versioned_docs/version-v6/api/datetime-button.mdx b/versioned_docs/version-v6/api/datetime-button.mdx index 533af33315c..667009f2577 100644 --- a/versioned_docs/version-v6/api/datetime-button.mdx +++ b/versioned_docs/version-v6/api/datetime-button.mdx @@ -43,20 +43,6 @@ The localized text on `ion-datetime-button` is determined by the `locale` proper `ion-datetime-button` must be associated with a mounted `ion-datetime` instance. As a result, [Inline Modals](./modal#inline-modals-recommended) and [Inline Popovers](./popover#inline-popovers) with the `keepContentsMounted` property set to `true` must be used. - - ## Properties diff --git a/versioned_docs/version-v6/api/input.mdx b/versioned_docs/version-v6/api/input.mdx index e5b7d003a80..c2da4371ab0 100644 --- a/versioned_docs/version-v6/api/input.mdx +++ b/versioned_docs/version-v6/api/input.mdx @@ -65,7 +65,7 @@ import Fill from '@site/static/usage/v6/input/fill/index.mdx'; Helper & error text can be used inside of an item with an input by slotting a note in the `"helper"` and `"error"` slots. The error slot will not be displayed unless the `ion-invalid` class is added to the `ion-item`. In Angular, this is done automatically through form validation. In JavaScript, React and Vue, the class needs to be manually added based on your own validation. - +{/* Reuse the playground from the Item directory */} import HelperError from '@site/static/usage/v6/item/helper-error/index.mdx'; @@ -75,7 +75,7 @@ import HelperError from '@site/static/usage/v6/item/helper-error/index.mdx'; The item counter is helper text that displays under an input to notify the user of how many characters have been entered out of the total that the input will accept. When adding counter, the default behavior is to format the value that gets displayed as `inputLength` / `maxLength`. This behavior can be customized by passing in a formatter function to the `counterFormatter` property. - +{/* Reuse the playground from the Item directory */} import Counter from '@site/static/usage/v6/item/counter/index.mdx'; diff --git a/versioned_docs/version-v6/api/item.mdx b/versioned_docs/version-v6/api/item.mdx index 16b19490904..77074b42926 100644 --- a/versioned_docs/version-v6/api/item.mdx +++ b/versioned_docs/version-v6/api/item.mdx @@ -47,20 +47,6 @@ import DetailArrows from '@site/static/usage/v6/item/detail-arrows/index.mdx'; - - ## Item Lines Items show an inset bottom border by default. The border has padding on the left and does not appear under any content that is slotted in the `"start"` slot. The `lines` property can be modified to `"full"` or `"none"` which will show a full width border or no border, respectively. diff --git a/versioned_docs/version-v6/api/progress-bar.mdx b/versioned_docs/version-v6/api/progress-bar.mdx index 6ac455e9146..5a20f64f2d1 100644 --- a/versioned_docs/version-v6/api/progress-bar.mdx +++ b/versioned_docs/version-v6/api/progress-bar.mdx @@ -49,7 +49,7 @@ import Indeterminate from '@site/static/usage/v6/progress-bar/indeterminate/inde ## Progress Bars in Toolbars - +{/* Reuse the playground from the Toolbar directory */} import Toolbar from '@site/static/usage/v6/toolbar/progress-bars/index.mdx'; diff --git a/versioned_docs/version-v6/api/searchbar.mdx b/versioned_docs/version-v6/api/searchbar.mdx index 88d86ef77ad..a632b8ac63f 100644 --- a/versioned_docs/version-v6/api/searchbar.mdx +++ b/versioned_docs/version-v6/api/searchbar.mdx @@ -57,7 +57,7 @@ import CancelButton from '@site/static/usage/v6/searchbar/cancel-button/index.md Searchbars are styled to look native when placed inside of a toolbar. In iOS, searchbars should be placed in their own toolbar, under a toolbar that contains the page title. In Material Design, searchbars are either persistently displayed in their own toolbar, or expand over a toolbar containing the page title. - +{/* Reuse the playground from the Toolbar directory */} import Toolbar from '@site/static/usage/v6/toolbar/searchbars/index.mdx'; diff --git a/versioned_docs/version-v6/api/segment.mdx b/versioned_docs/version-v6/api/segment.mdx index cf1dd30db2b..75a2dda5aef 100644 --- a/versioned_docs/version-v6/api/segment.mdx +++ b/versioned_docs/version-v6/api/segment.mdx @@ -43,7 +43,7 @@ import Scrollable from '@site/static/usage/v6/segment/scrollable/index.mdx'; ## Segments in Toolbars - +{/* Reuse the playground from the Toolbar directory */} import Toolbar from '@site/static/usage/v6/toolbar/segments/index.mdx'; diff --git a/versioned_docs/version-v6/api/tabs.mdx b/versioned_docs/version-v6/api/tabs.mdx index 314064be9aa..850650cb0eb 100644 --- a/versioned_docs/version-v6/api/tabs.mdx +++ b/versioned_docs/version-v6/api/tabs.mdx @@ -30,7 +30,7 @@ Both `ion-tabs` and `ion-tab-bar` can be used as standalone elements. They don The `ion-tab-bar` needs a slot defined in order to be projected to the right place in an `ion-tabs` component. -:::note Framework Support +:::note[Framework Support] Using `ion-tabs` within Angular, React or Vue requires the use of the `ion-router-outlet` or `ion-nav` components. @@ -44,7 +44,7 @@ import Router from '@site/static/usage/v6/tabs/router/index.mdx'; -:::tip Best Practices +:::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. diff --git a/versioned_docs/version-v6/cli.mdx b/versioned_docs/version-v6/cli.mdx index a75302d0937..fe10210fbc4 100644 --- a/versioned_docs/version-v6/cli.mdx +++ b/versioned_docs/version-v6/cli.mdx @@ -37,8 +37,6 @@ Be sure to run `ionic --help` in your project directory. For some commands, such as `ionic serve`, the help documentation is contextual to the type of your project, e.g. React vs Angular. ::: - - ## 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. diff --git a/versioned_docs/version-v6/components.mdx b/versioned_docs/version-v6/components.mdx index 17d61f0ebb8..8a863cc6ef4 100644 --- a/versioned_docs/version-v6/components.mdx +++ b/versioned_docs/version-v6/components.mdx @@ -41,7 +41,7 @@ Ionic apps are made of high-level building blocks called Components, which allow - + {/* prettier-ignore */}

Cards are a great way to display an important piece of content, and can contain images, buttons, text, and more.

 diff --git a/versioned_docs/version-v6/core-concepts/what-are-progressive-web-apps.mdx b/versioned_docs/version-v6/core-concepts/what-are-progressive-web-apps.mdx index 2310a451f01..46b425a49bc 100644 --- a/versioned_docs/version-v6/core-concepts/what-are-progressive-web-apps.mdx +++ b/versioned_docs/version-v6/core-concepts/what-are-progressive-web-apps.mdx @@ -11,8 +11,6 @@ title: Progressive Web Apps /> - - ### The web...but better A Progressive Web App (PWA) is a web app that uses modern web capabilities to deliver an app-like experience to users. @@ -47,7 +45,7 @@ To be considered a Progressive Web App, your app must be: - Linkable - Easily share via URL and not require complex installation. - +{/* cspell:disable */} @@ -55,7 +53,7 @@ To be considered a Progressive Web App, your app must be: - +{/* cspell:enable */} There is a lot here, but it boils down to a few points for Ionic apps. diff --git a/versioned_docs/version-v6/developer-resources/books.mdx b/versioned_docs/version-v6/developer-resources/books.mdx index 4553ac800c3..e3eae671a5a 100644 --- a/versioned_docs/version-v6/developer-resources/books.mdx +++ b/versioned_docs/version-v6/developer-resources/books.mdx @@ -4,7 +4,7 @@ Angular. Vue. React. Vanilla JavaScript. All of these tools can be used to create awesome applications with Ionic, thanks to the new Stencil compiler. This book is aimed at beginners that are looking to create amazing web, mobile and desktop applications using Ionic with examples across all of the popular frameworks. - +{/* cspell:disable-next-line */} by [Paul Halliday](https://developer.school) @@ -12,19 +12,19 @@ by [Paul Halliday](https://developer.school) As well as being a powerful tool for generating reuseable web components, StencilJS provides the tools needed to build an entire application out of web components. Combined with the Ionic web components, StencilJS gives us everything we need to build high-quality production mobile applications - no framework required. - +{/* cspell:disable-next-line */} by [Joshua Morony](https://www.joshmorony.com/blog) ### [Mobile App Development with Ionic: Cross-Platform Apps with Ionic 2, Angular 2, and Cordova](https://www.amazon.com/Mobile-App-Development-Ionic-Cross-Platform/dp/1491937785/ref=sr_1_2?ie=UTF8&qid=1464183332&sr=8-2&keywords=ionic+2) - +{/* cspell:disable-next-line */} by Chris Griffith ### [Building Mobile Apps with Ionic & Angular](https://www.joshmorony.com/building-mobile-apps-with-ionic-2/) - +{/* cspell:disable-next-line */} by [Joshua Morony](https://www.joshmorony.com/blog) @@ -32,19 +32,19 @@ Building Mobile Apps with Ionic & Angular is an all-in-one resource for learning ### [Ionic 2 From Zero to App Store](https://devdactic.com/zero-to-app) - +{/* cspell:disable-next-line */} by Simon Reimler ### [Ionic Framework By Example](https://www.packtpub.com/application-development/ionic-framework-example) - +{/* cspell:disable-next-line */} by Sani Yusuf ### [Building Firestore Powered Ionic Apps](https://javebratt.com/ionic-firebase-book/) - +{/* cspell:disable-next-line */} by Jorge Vergara @@ -52,24 +52,24 @@ This book will help you go from not knowing what Firebase is to be able to use t ### [Ionic 2 Cookbook - Second Edition](https://www.amazon.com/Ionic-Cookbook-Second-Hoc-Phan-ebook/dp/B01C4D9VWS?ie=UTF8&keywords=ionic%202&qid=1464183332&ref_=sr_1_3&sr=8-3) - +{/* cspell:disable-next-line */} by Hoc Phan ### [Mastering Ionic 2](https://www.leanpub.com/masteringionic2) - +{/* cspell:disable-next-line */} by James Griffiths ### [Learning Ionic](https://www.packtpub.com/in/application-development/learning-ionic) (Ionic 1) - +{/* cspell:disable-next-line */} by Arvind Ravulavaru ### [Learning Ionic - Second Edition](https://www.packtpub.com/in/web-development/learning-ionic-second-edition) (Ionic 2/3) - +{/* cspell:disable-next-line */} by Arvind Ravulavaru diff --git a/versioned_docs/version-v6/developer-resources/courses.mdx b/versioned_docs/version-v6/developer-resources/courses.mdx index 900a2c51084..568f0fc05a4 100644 --- a/versioned_docs/version-v6/developer-resources/courses.mdx +++ b/versioned_docs/version-v6/developer-resources/courses.mdx @@ -2,7 +2,7 @@ ### [Elite Ionic](https://www.joshmorony.com/elite/) - +{/* cspell:disable-next-line */} by Josh Morony @@ -10,7 +10,7 @@ Elite Ionic is an online course for Ionic developers who want to move past the b ### [Ionic Academy](https://ionicacademy.com/) - +{/* cspell:disable-next-line */} by Simon Grimm @@ -18,7 +18,7 @@ Learn Ionic with step-by-step video courses & quick wins from one of the Ionic c ### [Ionic Framework: Tips, Tricks & Techniques](https://www.packtpub.com/mobile/ionic-framework-tips-tricks-and-techniques-video) - +{/* cspell:disable-next-line */} by Charles Muzonzini @@ -26,7 +26,7 @@ In this course, you will master tips and best practices for Ionic 4 & Ionic 5 th ### [Building Desktop Apps with Ionic and Electron](https://pluralsight.pxf.io/VeMXO) - +{/* cspell:disable-next-line */} by Michael Callaghan at Pluralsight @@ -41,7 +41,7 @@ Windows and macOS users. ### [Building Progressive Web Apps with Ionic](https://pluralsight.pxf.io/Ly2EY) - +{/* cspell:disable-next-line */} by Michael Callaghan at Pluralsight @@ -58,7 +58,7 @@ Progressive Web Application anywhere you desire. ### [Ionic CLI](https://pluralsight.pxf.io/ionic-cli) - +{/* cspell:disable-next-line */} by Michael Callaghan at Pluralsight @@ -72,36 +72,36 @@ the confidence to use the Ionic CLI as part of your everyday Ionic development. ### [Wordpress Rest API and Ionic 4 (Angular) App With Auth](https://www.udemy.com/course/wordpress-rest-api-and-ionic-3-crud/) - +{/* cspell:disable-next-line */} by Baljeet Singh at Udemy ### [Building Mobile Apps with Ionic 2, Angular 2, and TypeScript](https://app.pluralsight.com/library/courses/ionic2-angular2-typescript-mobile-apps/table-of-contents) - +{/* cspell:disable-next-line */} by Pluralsight ### [Introducing Ionic 2](http://shop.oreilly.com/product/0636920050353.do) - +{/* cspell:disable-next-line */} by Mathieu Chauvinc ### [Ionic 2 Master Course](https://www.udemy.com/ionic-2-tutorial/) - +{/* cspell:disable-next-line */} by Udemy ### [Introducing Ionic 2](https://www.udemy.com/introducing-ionic-2/) - +{/* cspell:disable-next-line */} by Udemy ### [Ionic 2 Solutions](https://www.packtpub.com/web-development/ionic-2-solutions-video) - +{/* cspell:disable-next-line */} by Hoc Phan diff --git a/versioned_docs/version-v6/developing/android.mdx b/versioned_docs/version-v6/developing/android.mdx index 76416a833b4..8c91f246bfc 100644 --- a/versioned_docs/version-v6/developing/android.mdx +++ b/versioned_docs/version-v6/developing/android.mdx @@ -112,7 +112,7 @@ If you are using any version of **`cordova-android`** below `10.0.0`, install th ### Gradle - +{/* prettier-ignore */} Gradle is the build tool used in Android apps and must be installed separately. See the install page for details. ## Project Setup diff --git a/versioned_docs/version-v6/developing/config.mdx b/versioned_docs/version-v6/developing/config.mdx index f73ce133123..0d4dacdf251 100644 --- a/versioned_docs/version-v6/developing/config.mdx +++ b/versioned_docs/version-v6/developing/config.mdx @@ -10,7 +10,7 @@ The available config keys can be found in the [`IonicConfig`](#ionicconfig) inte The following example disables ripple effects and default the mode to Material Design: -import GlobalExample from './config/global/index.md'; +import GlobalExample from './config/global/index.mdx'; @@ -18,7 +18,7 @@ import GlobalExample from './config/global/index.md'; Ionic Config is not reactive. Updating the config's value after the component has rendered will result in the previous value. It is recommended to use a component's properties instead of updating the config, when you require reactive values. -import PerComponentExample from './config/per-component/index.md'; +import PerComponentExample from './config/per-component/index.mdx'; @@ -28,7 +28,7 @@ Ionic Config can also be set on a per-platform basis. For example, this allows y In the following example, we are disabling all animations in our Ionic app only if the app is running in a mobile web browser. -import PerPlatformExample from './config/per-platform/index.md'; +import PerPlatformExample from './config/per-platform/index.mdx'; @@ -36,7 +36,7 @@ import PerPlatformExample from './config/per-platform/index.md'; The next example allows you to set an entirely different configuration based upon the platform, falling back to a default config if no platforms match: -import PerPlatformFallbackExample from './config/per-platform-overrides/index.md'; +import PerPlatformFallbackExample from './config/per-platform-overrides/index.mdx'; @@ -44,7 +44,7 @@ import PerPlatformFallbackExample from './config/per-platform-overrides/index.md This final example allows you to accumulate a config object based upon different platform requirements. -import PerPlatformOverridesExample from './config/per-platform-fallback/index.md'; +import PerPlatformOverridesExample from './config/per-platform-fallback/index.mdx'; diff --git a/versioned_docs/version-v6/index.mdx b/versioned_docs/version-v6/index.mdx index 12e94f33c46..02471ee43ce 100644 --- a/versioned_docs/version-v6/index.mdx +++ b/versioned_docs/version-v6/index.mdx @@ -139,7 +139,7 @@ Ionic is actively developed and maintained full-time by a core team, and its eco There are millions of Ionic developers in over 200 countries worldwide. Here are some ways to join: - +{/* prettier-ignore */} - Forum: A great place for asking questions and sharing ideas. - Twitter: Where we post updates and share content from the Ionic community. - GitHub: For reporting bugs or requesting new features, create an issue here. PRs welcome! diff --git a/versioned_docs/version-v6/react/navigation.mdx b/versioned_docs/version-v6/react/navigation.mdx index fe12dc6bdf3..bbcb4aef6bf 100644 --- a/versioned_docs/version-v6/react/navigation.mdx +++ b/versioned_docs/version-v6/react/navigation.mdx @@ -590,8 +590,8 @@ For more info on routing in React using React Router, check out their docs at [h ## From the Community - +{/* cspell:disable */} [Ionic 4 and React: Navigation](https://alligator.io/ionic/ionic-4-react-navigation) - Paul Halliday - +{/* cspell:enable */} diff --git a/versioned_docs/version-v6/react/quickstart.mdx b/versioned_docs/version-v6/react/quickstart.mdx index 1b209bd0e15..0809bfb10f7 100644 --- a/versioned_docs/version-v6/react/quickstart.mdx +++ b/versioned_docs/version-v6/react/quickstart.mdx @@ -158,7 +158,7 @@ export default Home; This creates a page with a header and scrollable content area. The `IonPage` component provides the basic page structure and must be used on every page. The second header shows a [collapsible large title](/docs/api/title.mdx#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down. -:::tip Learn More +:::tip[Learn More] For detailed information about Ionic layout components, see the [Header](/docs/api/header.mdx), [Toolbar](/docs/api/toolbar.mdx), [Title](/docs/api/title.mdx), and [Content](/docs/api/content.mdx) documentation. ::: 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..3785b472ba0 100644 --- a/versioned_docs/version-v6/reference/versioning.mdx +++ b/versioned_docs/version-v6/reference/versioning.mdx @@ -1,7 +1,5 @@ # Versioning - - 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. ## Release Schedule diff --git a/versioned_docs/version-v6/theming/css-shadow-parts.mdx b/versioned_docs/version-v6/theming/css-shadow-parts.mdx index 19b6a7b6e0b..f0d5804b568 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 cd24c6296c8..0aff767a822 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 f291f7626e1..8ffc9cbb764 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 showing the Identity section for an iOS app with fields for Display Name, Bundle Identifier, Version, and Build.](/img/running/ios-xcode-identity-setup.png "Xcode Identity Section") - +{/* 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/quickstart.mdx b/versioned_docs/version-v6/vue/quickstart.mdx index 597f527d88b..f6f87a69b5c 100644 --- a/versioned_docs/version-v6/vue/quickstart.mdx +++ b/versioned_docs/version-v6/vue/quickstart.mdx @@ -162,7 +162,7 @@ import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.mdx#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down. -:::tip Learn More +:::tip[Learn More] For detailed information about Ionic layout components, see the [Header](/docs/api/header.mdx), [Toolbar](/docs/api/toolbar.mdx), [Title](/docs/api/title.mdx), and [Content](/docs/api/content.mdx) documentation. :::