diff --git a/.prettierignore b/.prettierignore index 1c90550de8f..0075dc0417d 100644 --- a/.prettierignore +++ b/.prettierignore @@ -20,8 +20,8 @@ docs/cli/commands # Prettier's mdx parser reflows those children and moves link text onto its own # line, which MDX then wraps in a paragraph, rendering invalid HTML such as #

Android SDK

. Formatting these files reintroduces that markup. -docs/reference/glossary.md -versioned_docs/version-v*/reference/glossary.md +docs/reference/glossary.mdx +versioned_docs/version-v*/reference/glossary.md* # Archived versions versioned_docs/version-v5 diff --git a/cspell.json b/cspell.json index ab8b25ef41b..77ea0b734e9 100644 --- a/cspell.json +++ b/cspell.json @@ -10,7 +10,8 @@ "ignoreRegExpList": [ "/(```+)[\\s\\S]+?\\1/g", "`([^`]*)`", - "/:[a-zA-Z0-9-_\\+]+:/g" + "/:[a-zA-Z0-9-_\\+]+:/g", + "/\\]\\([^)]*\\)/g" ], "ignorePaths": [ "docs/cli", diff --git a/docs/angular/add-to-existing.md b/docs/angular/add-to-existing.mdx similarity index 92% rename from docs/angular/add-to-existing.md rename to docs/angular/add-to-existing.mdx index 8a551abfd4e..bf2ab3d2ef1 100644 --- a/docs/angular/add-to-existing.md +++ b/docs/angular/add-to-existing.mdx @@ -14,7 +14,7 @@ import DocsCards from '@components/global/DocsCards'; /> -This guide covers how to add Ionic Angular to an existing Angular project. If you're looking to start a new project from scratch, check out the [Ionic Angular Quickstart](/docs/angular/quickstart.md) guide. For an overview of how Ionic Angular works with Angular, including version support and tooling, check out the [Ionic Angular Overview](/docs/angular/overview.md). +This guide covers how to add Ionic Angular to an existing Angular project. If you're looking to start a new project from scratch, check out the [Ionic Angular Quickstart](/docs/angular/quickstart.mdx) guide. For an overview of how Ionic Angular works with Angular, including version support and tooling, check out the [Ionic Angular Overview](/docs/angular/overview.mdx). :::tip @@ -76,7 +76,7 @@ Replace the existing `styles` array in `angular.json` with the following: :::info -While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to [Global Stylesheets](/docs/layout/global-stylesheets.md). +While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to [Global Stylesheets](/docs/layout/global-stylesheets.mdx). ::: @@ -96,7 +96,7 @@ export const appConfig: ApplicationConfig = { }; ``` -This reflects the Angular 21 and 22 scaffold, which is zoneless by default. If your existing app is on Angular 18 through 20, it still has `provideZoneChangeDetection({ eventCoalescing: true })`; keep that provider and add `provideIonicAngular({})` alongside it. Refer to [Zoneless Change Detection](/docs/angular/zoneless.md) for details. +This reflects the Angular 21 and 22 scaffold, which is zoneless by default. If your existing app is on Angular 18 through 20, it still has `provideZoneChangeDetection({ eventCoalescing: true })`; keep that provider and add `provideIonicAngular({})` alongside it. Refer to [Zoneless Change Detection](/docs/angular/zoneless.mdx) for details. ## Using Individual Components @@ -123,7 +123,7 @@ import { IonButton, IonDatetime } from '@ionic/angular'; export class App {} ``` -Visit the [components](/docs/components.md) page for all of the available Ionic components. +Visit the [components](/docs/components.mdx) page for all of the available Ionic components. ## Using Ionic Pages @@ -172,7 +172,7 @@ Replace the existing `styles` array in `angular.json` with the following: ] ``` -These stylesheets set up the overall page structure and provide [CSS utilities](/docs/layout/css-utilities.md) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/docs/layout/global-stylesheets.md). +These stylesheets set up the overall page structure and provide [CSS utilities](/docs/layout/css-utilities.mdx) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/docs/layout/global-stylesheets.mdx). #### 2. Set up Theming @@ -191,7 +191,7 @@ Create a `src/theme/variables.css` file with the following content: @import '@ionic/angular/css/palettes/dark.system.css'; ``` -This file enables [dark mode support](/docs/theming/dark-mode.md) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables. +This file enables [dark mode support](/docs/theming/dark-mode.mdx) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables. #### 3. Update the App Component diff --git a/docs/angular/build-options.md b/docs/angular/build-options.mdx similarity index 100% rename from docs/angular/build-options.md rename to docs/angular/build-options.mdx diff --git a/docs/angular/injection-tokens.md b/docs/angular/injection-tokens.mdx similarity index 100% rename from docs/angular/injection-tokens.md rename to docs/angular/injection-tokens.mdx diff --git a/docs/angular/lifecycle.md b/docs/angular/lifecycle.mdx similarity index 100% rename from docs/angular/lifecycle.md rename to docs/angular/lifecycle.mdx diff --git a/docs/angular/navigation.md b/docs/angular/navigation.mdx similarity index 99% rename from docs/angular/navigation.md rename to docs/angular/navigation.mdx index 95f48542124..d6011d24ade 100644 --- a/docs/angular/navigation.md +++ b/docs/angular/navigation.mdx @@ -194,7 +194,7 @@ export class AppRoutingModule {} ``` :::tip -If you are using `routerLink`, `routerDirection`, or `routerAction` be sure to also import the `IonRouterLink` directive for Ionic components or the `IonRouterLinkWithHref` directive for `` elements. An example of this is available in the [Ionic Angular Build Options docs](./build-options.md#migrating-from-modules-to-standalone). +If you are using `routerLink`, `routerDirection`, or `routerAction` be sure to also import the `IonRouterLink` directive for Ionic components or the `IonRouterLinkWithHref` directive for `` elements. An example of this is available in the [Ionic Angular Build Options docs](./build-options.mdx#migrating-from-modules-to-standalone). ::: To get started with standalone components [visit Angular's official docs](https://angular.io/guide/standalone-components). diff --git a/docs/angular/overlays.md b/docs/angular/overlays.mdx similarity index 100% rename from docs/angular/overlays.md rename to docs/angular/overlays.mdx diff --git a/docs/angular/overview.md b/docs/angular/overview.mdx similarity index 100% rename from docs/angular/overview.md rename to docs/angular/overview.mdx diff --git a/docs/angular/performance.md b/docs/angular/performance.mdx similarity index 100% rename from docs/angular/performance.md rename to docs/angular/performance.mdx diff --git a/docs/angular/platform.md b/docs/angular/platform.mdx similarity index 100% rename from docs/angular/platform.md rename to docs/angular/platform.mdx diff --git a/docs/angular/pwa.md b/docs/angular/pwa.mdx similarity index 100% rename from docs/angular/pwa.md rename to docs/angular/pwa.mdx diff --git a/docs/angular/quickstart.md b/docs/angular/quickstart.mdx similarity index 94% rename from docs/angular/quickstart.md rename to docs/angular/quickstart.mdx index dff5cfe1c36..6f14cd86eef 100644 --- a/docs/angular/quickstart.md +++ b/docs/angular/quickstart.mdx @@ -172,15 +172,15 @@ And the template, in the `home.page.html` file, uses those components: ``` -これにより、ヘッダーとスクロール可能なコンテンツエリアを持つページが作成されます。2 つ目のヘッダーは、コンテンツの先頭にあるときに iOS デバイスで表示される[折りたたみ可能な大きなタイトル](/docs/api/title.md#collapsible-large-titles)を示し、その後スクロールすると最初のヘッダーに小さいタイトルを表示するように縮小されます。 +これにより、ヘッダーとスクロール可能なコンテンツエリアを持つページが作成されます。2 つ目のヘッダーは、コンテンツの先頭にあるときに iOS デバイスで表示される[折りたたみ可能な大きなタイトル](/docs/api/title.mdx#collapsible-large-titles)を示し、その後スクロールすると最初のヘッダーに小さいタイトルを表示するように縮小されます。 :::tip[詳細を学ぶ] -Ionic のレイアウトコンポーネントに関する詳細情報は、[Header](/docs/api/header.md)、[Toolbar](/docs/api/toolbar.md)、[Title](/docs/api/title.md)、および[Content](/docs/api/content.md)のドキュメントを参照してください。 +Ionic のレイアウトコンポーネントに関する詳細情報は、[Header](/docs/api/header.mdx)、[Toolbar](/docs/api/toolbar.mdx)、[Title](/docs/api/title.mdx)、および[Content](/docs/api/content.mdx)のドキュメントを参照してください。 ::: ## Ionic コンポーネントを追加 -より多くの Ionic UI コンポーネントで Home ページを強化できます。たとえば、`ion-content`の最後に[Button](/docs/api/button.md)を追加します： +より多くの Ionic UI コンポーネントで Home ページを強化できます。たとえば、`ion-content`の最後に[Button](/docs/api/button.mdx)を追加します： ```html title="src/app/home/home.page.html" @@ -211,7 +211,7 @@ ionic generate page new A route will be automatically added to `app.routes.ts`. -In `new.page.html`, you can add a [Back Button](/docs/api/back-button.md) to the [Toolbar](/docs/api/toolbar.md): +In `new.page.html`, you can add a [Back Button](/docs/api/back-button.mdx) to the [Toolbar](/docs/api/toolbar.mdx): ```html title="src/app/new/new.page.html" @@ -257,7 +257,7 @@ import { RouterLink } from '@angular/router'; ``` :::info -ナビゲーションは、Angular の Router サービスを使用して行うこともできます。詳細については、[Angular ナビゲーションのドキュメント](/docs/angular/navigation.md#navigating-to-different-routes)を参照してください。 +ナビゲーションは、Angular の Router サービスを使用して行うこともできます。詳細については、[Angular ナビゲーションのドキュメント](/docs/angular/navigation.mdx#navigating-to-different-routes)を参照してください。 ::: ## 新しいページにアイコンを追加 @@ -301,7 +301,7 @@ export class NewPage implements OnInit { または、`app.component.ts`でアイコンを登録して、アプリ全体で使用することもできます。 -詳細については、[Icon のドキュメント](/docs/api/icon.md)および[Ionicons のドキュメント](https://ionic.io/ionicons/)を参照してください。 +詳細については、[Icon のドキュメント](/docs/api/icon.mdx)および[Ionicons のドキュメント](https://ionic.io/ionicons/)を参照してください。 ## コンポーネントメソッドを呼び出す @@ -387,7 +387,7 @@ Ionic コンポーネントのメソッドを呼び出すには： 1. コンポーネントの`ViewChild`参照を作成します 2. コンポーネントインスタンスでメソッドを直接呼び出します -各コンポーネントの利用可能なメソッドは、API ドキュメントの[Methods](/docs/api/content.md#methods)セクションで見つけることができます。 +各コンポーネントの利用可能なメソッドは、API ドキュメントの[Methods](/docs/api/content.mdx#methods)セクションで見つけることができます。 ## デバイスで実行 diff --git a/docs/angular/slides.md b/docs/angular/slides.mdx similarity index 100% rename from docs/angular/slides.md rename to docs/angular/slides.mdx diff --git a/docs/angular/storage.md b/docs/angular/storage.mdx similarity index 100% rename from docs/angular/storage.md rename to docs/angular/storage.mdx diff --git a/docs/angular/testing.md b/docs/angular/testing.mdx similarity index 100% rename from docs/angular/testing.md rename to docs/angular/testing.mdx diff --git a/docs/angular/virtual-scroll.md b/docs/angular/virtual-scroll.mdx similarity index 100% rename from docs/angular/virtual-scroll.md rename to docs/angular/virtual-scroll.mdx diff --git a/docs/angular/your-first-app.md b/docs/angular/your-first-app.mdx similarity index 94% rename from docs/angular/your-first-app.md rename to docs/angular/your-first-app.mdx index 85a151a58a8..c025b641463 100644 --- a/docs/angular/your-first-app.md +++ b/docs/angular/your-first-app.mdx @@ -25,7 +25,7 @@ Ionic の素晴らしいところは、1 つのコードベースで、使い慣 > :::note -Ionic 4 および Cordova をカバーした前のバージョンのガイドをお探しですか？[Ionic 4 および Cordova ガイド](../developer-resources/guides/first-app-v4/intro.md)を参照してください。 +Ionic 4 および Cordova をカバーした前のバージョンのガイドをお探しですか？[Ionic 4 および Cordova ガイド](../developer-resources/guides/first-app-v4/intro.mdx)を参照してください。 ::: ## 構築するもの @@ -34,7 +34,7 @@ Ionic 4 および Cordova をカバーした前のバージョンのガイドを ハイライトには以下が含まれます： -- Ionic Framework の[UI コンポーネント](../components.md)を使用して、Web、iOS、Android で実行される 1 つの Angular ベースのコードベース。 +- Ionic Framework の[UI コンポーネント](../components.mdx)を使用して、Web、iOS、Android で実行される 1 つの Angular ベースのコードベース。 - Ionic の公式ネイティブアプリランタイムである[Capacitor](https://capacitorjs.com)を使用して、ネイティブ iOS および Android モバイルアプリとしてデプロイ。 - Capacitor の[Camera](../native/camera.md)、[Filesystem](../native/filesystem.md)、[Preferences](../native/preferences.md) API によって提供される Photo Gallery 機能。 @@ -65,7 +65,7 @@ npm install -g @ionic/cli native-run cordova-res :::note `-g`オプションは*グローバルにインストール*を意味します。パッケージをグローバルにインストールすると、`EACCES`権限エラーが発生する可能性があります。 -npm を管理者権限なしでグローバルに操作できるように設定することを検討してください。詳細は [権限エラーの解決](../developing/tips.md#resolving-permission-errors) を参照してください。 +npm を管理者権限なしでグローバルに操作できるように設定することを検討してください。詳細は [権限エラーの解決](../developing/tips.mdx#resolving-permission-errors) を参照してください。 ::: ## アプリの作成 @@ -168,7 +168,7 @@ ionic serve ``` -`ion-header`は上部のナビゲーションとツールバーを表し、「Tab 2」がタイトルです（iOS の[折りたたみ可能な大きなタイトル](../api/title.md#collapsible-large-titles)サポートにより、2 つあります）。両方の`ion-title`要素を次のように変更します： +`ion-header`は上部のナビゲーションとツールバーを表し、「Tab 2」がタイトルです（iOS の[折りたたみ可能な大きなタイトル](../api/title.mdx#collapsible-large-titles)サポートにより、2 つあります）。両方の`ion-title`要素を次のように変更します： ```html @@ -190,7 +190,7 @@ ionic serve ``` -アプリの視覚的な側面を``に配置します。この場合、デバイスのカメラを開くボタンと、カメラでキャプチャした画像を表示する場所を追加します。まず、ページの下部に[フローティングアクションボタン](../api/fab.md)（FAB）を追加し、カメラ画像をアイコンとして設定します。 +アプリの視覚的な側面を``に配置します。この場合、デバイスのカメラを開くボタンと、カメラでキャプチャした画像を表示する場所を追加します。まず、ページの下部に[フローティングアクションボタン](../api/fab.mdx)（FAB）を追加し、カメラ画像をアイコンとして設定します。 ```html diff --git a/docs/angular/your-first-app/2-taking-photos.md b/docs/angular/your-first-app/2-taking-photos.mdx similarity index 95% rename from docs/angular/your-first-app/2-taking-photos.md rename to docs/angular/your-first-app/2-taking-photos.mdx index 8766aed10bf..11b837ad321 100644 --- a/docs/angular/your-first-app/2-taking-photos.md +++ b/docs/angular/your-first-app/2-taking-photos.mdx @@ -229,7 +229,7 @@ export interface UserPhoto { } ``` -Next, switch to `tab2.page.html` to display the images. We'll add a [Grid component](../../api/grid.md) so the photos display neatly as they're added to the gallery. Inside the grid, loop through each photo in the `PhotoService`'s `photos` signal with the built-in [`@for`](https://angular.dev/guide/templates/control-flow#for-block-repeaters) block - calling `photoService.photos()` reads the signal's current value. For each item, add an `` element and set its `src` property to the photo's path. +Next, switch to `tab2.page.html` to display the images. We'll add a [Grid component](../../api/grid.mdx) so the photos display neatly as they're added to the gallery. Inside the grid, loop through each photo in the `PhotoService`'s `photos` signal with the built-in [`@for`](https://angular.dev/guide/templates/control-flow#for-block-repeaters) block - calling `photoService.photos()` reads the signal's current value. For each item, add an `` element and set its `src` property to the photo's path. ```html diff --git a/docs/angular/your-first-app/3-saving-photos.md b/docs/angular/your-first-app/3-saving-photos.mdx similarity index 100% rename from docs/angular/your-first-app/3-saving-photos.md rename to docs/angular/your-first-app/3-saving-photos.mdx diff --git a/docs/angular/your-first-app/4-loading-photos.md b/docs/angular/your-first-app/4-loading-photos.mdx similarity index 100% rename from docs/angular/your-first-app/4-loading-photos.md rename to docs/angular/your-first-app/4-loading-photos.mdx diff --git a/docs/angular/your-first-app/5-adding-mobile.md b/docs/angular/your-first-app/5-adding-mobile.mdx similarity index 95% rename from docs/angular/your-first-app/5-adding-mobile.md rename to docs/angular/your-first-app/5-adding-mobile.mdx index ecf2947add9..3e4830040b6 100644 --- a/docs/angular/your-first-app/5-adding-mobile.md +++ b/docs/angular/your-first-app/5-adding-mobile.mdx @@ -17,7 +17,7 @@ Our photo gallery app won’t be complete until it runs on iOS, Android, and the Let’s start with making some small code changes - then our app will “just work” when we deploy it to a device. -Import the Ionic [Platform API](../platform.md) into `photo.service.ts`, which is used to retrieve information about the current device. In this case, it’s useful for selecting which code to execute based on the platform the app is running on (web or mobile). +Import the Ionic [Platform API](../platform.mdx) into `photo.service.ts`, which is used to retrieve information about the current device. In this case, it’s useful for selecting which code to execute based on the platform the app is running on (web or mobile). Add `Platform` to the imports at the top of the file and a new property `platform` to the `PhotoService` class. We'll also need to update the constructor to set the user's platform. @@ -88,7 +88,7 @@ private async savePicture(photo: Photo) { } ``` -When running on mobile, set `filepath` to the result of the `writeFile()` operation - `savedFile.uri`. When setting the `webviewPath`, use the special `Capacitor.convertFileSrc()` method ([details on the File Protocol](../../core-concepts/webview.md#file-protocol)). To use this method, we'll need to import Capacitor into `photo.service.ts`. +When running on mobile, set `filepath` to the result of the `writeFile()` operation - `savedFile.uri`. When setting the `webviewPath`, use the special `Capacitor.convertFileSrc()` method ([details on the File Protocol](../../core-concepts/webview.mdx#file-protocol)). To use this method, we'll need to import Capacitor into `photo.service.ts`. ```ts import { Injectable, inject, signal } from '@angular/core'; diff --git a/docs/angular/your-first-app/6-deploying-mobile.md b/docs/angular/your-first-app/6-deploying-mobile.mdx similarity index 100% rename from docs/angular/your-first-app/6-deploying-mobile.md rename to docs/angular/your-first-app/6-deploying-mobile.mdx diff --git a/docs/angular/your-first-app/7-live-reload.md b/docs/angular/your-first-app/7-live-reload.mdx similarity index 96% rename from docs/angular/your-first-app/7-live-reload.md rename to docs/angular/your-first-app/7-live-reload.mdx index d8b48c80e56..cc7bac9a0e1 100644 --- a/docs/angular/your-first-app/7-live-reload.md +++ b/docs/angular/your-first-app/7-live-reload.mdx @@ -13,7 +13,7 @@ sidebar_label: ライブリロード ここまでで、どこでも動作するクロスプラットフォームアプリを簡単に開発できることがわかりました。開発の速度はかなり速いですが、もっと速くできる方法があると言ったらどう思いますか？ -We can use the Ionic CLI’s [Live Reload functionality](../../cli/livereload.md) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected. +We can use the Ionic CLI’s [Live Reload functionality](../../cli/livereload.mdx) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected. ## Live Reload @@ -156,7 +156,7 @@ export class Tab2Page implements OnInit { } ``` -Open `tab2.page.html` and wrap each image in a `