From 1a77b2a95a5ea0f29a4b61f4a52000abfd7eadb2 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Tue, 8 Sep 2026 16:44:46 -0700 Subject: [PATCH 1/2] chore(i18n, mdx): adopt strict MDX syntax and remove the transitional shims --- _templates/README.md | 4 +-- docs/developer-resources/books.mdx | 22 +++++++------- docs/updating/9-0.mdx | 16 +++++----- .../index.js | 30 ++----------------- .../version-v5/angular/performance.mdx | 4 +-- versioned_docs/version-v5/api/item.mdx | 14 --------- versioned_docs/version-v5/cli.mdx | 2 -- versioned_docs/version-v5/components.mdx | 2 +- .../what-are-progressive-web-apps.mdx | 6 ++-- .../version-v5/developer-resources/books.mdx | 22 +++++++------- .../developer-resources/courses.mdx | 24 +++++++-------- .../version-v5/developing/android.mdx | 2 +- versioned_docs/version-v5/developing/ios.mdx | 6 ++-- versioned_docs/version-v5/index.mdx | 2 +- versioned_docs/version-v5/native.mdx | 4 +-- .../version-v5/react/navigation.mdx | 4 +-- .../version-v5/reference/glossary.mdx | 4 +-- .../version-v5/reference/versioning.mdx | 2 -- .../version-v5/theming/css-shadow-parts.mdx | 2 +- .../version-v5/theming/dark-mode.mdx | 4 +-- .../version-v5/troubleshooting/debugging.mdx | 6 ++-- .../version-v5/troubleshooting/native.mdx | 6 ++-- .../version-v5/utilities/animations.mdx | 6 ++-- .../version-v6/angular/performance.mdx | 4 +-- versioned_docs/version-v6/api/buttons.mdx | 2 +- .../version-v6/api/datetime-button.mdx | 14 --------- versioned_docs/version-v6/api/input.mdx | 4 +-- versioned_docs/version-v6/api/item.mdx | 14 --------- .../version-v6/api/progress-bar.mdx | 2 +- versioned_docs/version-v6/api/searchbar.mdx | 2 +- versioned_docs/version-v6/api/segment.mdx | 2 +- versioned_docs/version-v6/api/tabs.mdx | 4 +-- versioned_docs/version-v6/cli.mdx | 2 -- versioned_docs/version-v6/components.mdx | 2 +- .../what-are-progressive-web-apps.mdx | 6 ++-- .../version-v6/developer-resources/books.mdx | 22 +++++++------- .../developer-resources/courses.mdx | 24 +++++++-------- .../version-v6/developing/android.mdx | 2 +- versioned_docs/version-v6/index.mdx | 2 +- .../version-v6/react/navigation.mdx | 4 +-- .../version-v6/react/quickstart.mdx | 2 +- .../version-v6/reference/glossary.mdx | 4 +-- .../version-v6/reference/versioning.mdx | 2 -- .../version-v6/theming/css-shadow-parts.mdx | 2 +- .../version-v6/theming/dark-mode.mdx | 4 +-- .../version-v6/troubleshooting/native.mdx | 6 ++-- .../version-v6/utilities/animations.mdx | 6 ++-- versioned_docs/version-v6/vue/quickstart.mdx | 2 +- 48 files changed, 127 insertions(+), 207 deletions(-) diff --git a/_templates/README.md b/_templates/README.md index 7f5e1fe828a..dda6358c96d 100644 --- a/_templates/README.md +++ b/_templates/README.md @@ -21,12 +21,12 @@ 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 -import Feature from '@site/static/usage/v9/button/feature/index.md'; +import Feature from '@site/static/usage/v9/button/feature/index.mdx'; ``` diff --git a/docs/developer-resources/books.mdx b/docs/developer-resources/books.mdx index 40c2aea6cf4..4e0313a7b94 100644 --- a/docs/developer-resources/books.mdx +++ b/docs/developer-resources/books.mdx @@ -10,7 +10,7 @@ by [`rdlabo`](https://twitter.com/rdlabo) 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) @@ -18,19 +18,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) @@ -38,19 +38,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 @@ -58,24 +58,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/docs/updating/9-0.mdx b/docs/updating/9-0.mdx index 662ce01f211..969ec7a26b7 100644 --- a/docs/updating/9-0.mdx +++ b/docs/updating/9-0.mdx @@ -548,18 +548,18 @@ Ionic 9 は Capacitor 7 以降を公式にサポートします。ネイティ ### Input -#### `autocorrect` プロパティの型が Boolean に変更 {#input-autocorrect-property-type-changed-to-boolean} +#### `autocorrect` プロパティの型が Boolean に変更 {/* #input-autocorrect-property-type-changed-to-boolean */} `ion-input` の `autocorrect` プロパティは、`'on' | 'off'` ではなく `boolean`（デフォルト `false`）になりました。属性は文字列 `"false"` 以外の任意の値で `true` に強制されるため、`autocorrect="off"` はオートコレクトを有効にします。 - オートコレクトを無効のままにする（デフォルト）には、属性を削除してください。 - 有効にするにはプロパティバインディングを使用してください: `[autocorrect]="true"`（Angular）、`autocorrect={true}`（React）、または `:autocorrect="true"`（Vue）。 -#### フローティングラベルの動作 {#input-floating-label-behavior} +#### フローティングラベルの動作 {/* #input-floating-label-behavior */} フローティングラベルは、入力にスロット付きコンテンツが含まれていても自動ではフロートしなくなりました。ラベルは、入力にフォーカスがあるとき、または値があるときにのみフロートします。 -#### 内部 DOM 構造の変更 {#input-internal-dom-structure-changes} +#### 内部 DOM 構造の変更 {/* #input-internal-dom-structure-changes */} 内部 DOM 構造は、スロット付きコンテンツ付きのフローティングラベルをサポートするために再編成されました。 @@ -676,7 +676,7 @@ React と Vue では、`swipeBackEnabled` 設定オプションはアウトレ ### Searchbar -#### `autocorrect` プロパティの型が Boolean に変更 {#searchbar-autocorrect-property-type-changed-to-boolean} +#### `autocorrect` プロパティの型が Boolean に変更 {/* #searchbar-autocorrect-property-type-changed-to-boolean */} `ion-searchbar` の `autocorrect` プロパティは、`'on' | 'off'` ではなく `boolean`（デフォルト `false`）になりました。属性は文字列 `"false"` 以外の任意の値で `true` に強制されるため、`autocorrect="off"` はオートコレクトを有効にします。 @@ -697,11 +697,11 @@ React と Vue では、`swipeBackEnabled` 設定オプションはアウトレ 以前は、`selected` ロールはセレクトの現在値に一致するオプションにだけ割り当てられていました。dismiss ロールはタップしたボタンを反映するため、これは次の 1 ケースでのみ表面化していました。すでに選択済みのオプションを再選択すると、アクションシートは `ionActionSheetDidDismiss` で `role: "selected"` として閉じました。他のオプションをタップすると値が変わり、`role: ""` で閉じました。ロールが割り当てられなくなったため、どちらのケースも `role: undefined` で閉じます。値が選ばれたことを検出するためにこのロールを調べていたアプリ（たとえば、基になるアクションシートの `onDidDismiss` 結果から `role` を読む場合）は、代わりに `ion-select` の `ionChange` イベントをリッスンしてください。選択が変わると選択値が発行されます。 -#### フローティングラベルの動作 {#select-floating-label-behavior} +#### フローティングラベルの動作 {/* #select-floating-label-behavior */} フローティングラベルは、セレクトにスロット付きコンテンツが含まれていても自動ではフロートしなくなりました。ラベルは、セレクトにフォーカスがあるとき、または値があるときにのみフロートします。さらに、フローティングラベル使用時は、セレクトにフォーカスがあるときだけプレースホルダーが表示されます。 -#### 内部 DOM 構造の変更 {#select-internal-dom-structure-changes} +#### 内部 DOM 構造の変更 {/* #select-internal-dom-structure-changes */} 内部 DOM 構造は、スロット付きコンテンツ付きのフローティングラベルをサポートするために再編成されました。これにより、公開されているいくつかの shadow part の構造と位置が変わります。 @@ -735,11 +735,11 @@ React と Vue では、`swipeBackEnabled` 設定オプションはアウトレ ### Textarea -#### フローティングラベルの動作 {#textarea-floating-label-behavior} +#### フローティングラベルの動作 {/* #textarea-floating-label-behavior */} フローティングラベルは、テキストエリアにスロット付きコンテンツが含まれていても自動ではフロートしなくなりました。ラベルは、テキストエリアにフォーカスがあるとき、または値があるときにのみフロートします。 -#### 内部 DOM 構造の変更 {#textarea-internal-dom-structure-changes} +#### 内部 DOM 構造の変更 {/* #textarea-internal-dom-structure-changes */} 内部 DOM 構造は、スロット付きコンテンツ付きのフローティングラベルをサポートするために再編成されました。 diff --git a/plugins/docusaurus-plugin-ionic-component-api/index.js b/plugins/docusaurus-plugin-ionic-component-api/index.js index 3fa04e6fd59..731ebce27b3 100644 --- a/plugins/docusaurus-plugin-ionic-component-api/index.js +++ b/plugins/docusaurus-plugin-ionic-component-api/index.js @@ -97,21 +97,6 @@ module.exports = function (context, options) { createData(`${basePath}/custom-props.mdx`, data.customProps), createData(`${basePath}/slots.mdx`, data.slots) ); - - /** - * TODO(FW-6456): Remove once every page on this branch imports the `.mdx` names. - * - * Transitional: this branch's `docs/` pages and its `versioned_docs` copies still - * import the `.md` names. Those are rewritten separately, so the old names have to - * keep being emitted until they are. - */ - 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,17 +112,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 page on this branch imports the `.mdx` names. - * - * Lets a `.md` import resolve to a `.mdx` file, so pages can be moved over in - * batches rather than all at once. Matches the entry on `main`. - * - * Applies to every `.md` import, so a stale `.mdx` next to a `.md` will shadow it. - */ - extensionAlias: { - '.md': ['.mdx', '.md'], - }, }, }; }, @@ -248,7 +222,7 @@ ${properties } return ` -### ${prop.name} ${isDeprecated ? '(deprecated)' : ''} {#${propertyHeadingId(prop.name)}} +### ${prop.name} ${isDeprecated ? '(deprecated)' : ''} {/* #${propertyHeadingId(prop.name)} */} | | | | --- | --- | @@ -310,7 +284,7 @@ function renderMethods({ methods }) { ${methods .map( (method) => ` -### ${method.name} {#${methodHeadingId(method.name)}} +### ${method.name} {/* #${methodHeadingId(method.name)} */} | | | | --- | --- | 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/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. ::: From 5b72b219089b5bbece4f23341daed3f2cbf41b87 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 9 Sep 2026 14:59:08 -0700 Subject: [PATCH 2/2] docs(contributing): use MDX comments in the cspell examples --- CONTRIBUTING.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 534db3dd80a..648af64a279 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]