From 7e9815c099b38fb2e6e0c8ef7eaa90608430eeaa Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Tue, 25 Aug 2026 11:40:01 -0700 Subject: [PATCH 1/2] chore(i18n): point playground imports at .mdx partials --- docs/angular/navigation.md | 2 +- docs/api/accordion.md | 26 +++++++------- docs/api/action-sheet.md | 12 +++---- docs/api/alert.md | 14 ++++---- docs/api/app.md | 2 +- docs/api/avatar.md | 8 ++--- docs/api/back-button.md | 4 +-- docs/api/backdrop.md | 4 +-- docs/api/badge.md | 8 ++--- docs/api/breadcrumbs.md | 18 +++++----- docs/api/button.md | 18 +++++----- docs/api/buttons.md | 8 ++--- docs/api/card.md | 12 +++---- docs/api/checkbox.md | 16 ++++----- docs/api/chip.md | 8 ++--- docs/api/content.md | 20 +++++------ docs/api/datetime-button.md | 4 +-- docs/api/datetime.md | 56 ++++++++++++++--------------- docs/api/fab.md | 18 +++++----- docs/api/footer.md | 10 +++--- docs/api/grid.md | 28 +++++++-------- docs/api/header.md | 12 +++---- docs/api/icon.md | 6 ++-- docs/api/img.md | 2 +- docs/api/infinite-scroll.md | 6 ++-- docs/api/input-otp.md | 20 +++++------ docs/api/input-password-toggle.md | 2 +- docs/api/input.md | 30 ++++++++-------- docs/api/item-divider.md | 6 ++-- docs/api/item-group.md | 4 +-- docs/api/item-sliding.md | 6 ++-- docs/api/item.md | 28 +++++++-------- docs/api/label.md | 6 ++-- docs/api/list-header.md | 10 +++--- docs/api/list.md | 6 ++-- docs/api/loading.md | 8 ++--- docs/api/menu.md | 12 +++---- docs/api/modal.md | 38 ++++++++++---------- docs/api/nav.md | 4 +-- docs/api/note.md | 8 ++--- docs/api/picker.md | 8 ++--- docs/api/popover.md | 16 ++++----- docs/api/progress-bar.md | 14 ++++---- docs/api/radio.md | 22 ++++++------ docs/api/range.md | 22 ++++++------ docs/api/refresher.md | 12 +++---- docs/api/reorder.md | 16 ++++----- docs/api/ripple-effect.md | 6 ++-- docs/api/router.md | 4 +-- docs/api/searchbar.md | 16 ++++----- docs/api/segment-button.md | 8 ++--- docs/api/segment-content.md | 2 +- docs/api/segment.md | 12 +++---- docs/api/select.md | 46 ++++++++++++------------ docs/api/skeleton-text.md | 4 +-- docs/api/spinner.md | 8 ++--- docs/api/split-pane.md | 4 +-- docs/api/tab-bar.md | 2 +- docs/api/tabs.md | 6 ++-- docs/api/text.md | 2 +- docs/api/textarea.md | 22 ++++++------ docs/api/thumbnail.md | 6 ++-- docs/api/title.md | 8 ++--- docs/api/toast.md | 18 +++++----- docs/api/toggle.md | 20 +++++------ docs/api/toolbar.md | 14 ++++---- docs/developing/config.md | 2 +- docs/developing/keyboard.md | 4 +-- docs/developing/managing-focus.md | 2 +- docs/layout/dynamic-font-scaling.md | 2 +- docs/layout/structure.md | 10 +++--- docs/react/navigation.md | 2 +- docs/theming/dark-mode.md | 6 ++-- docs/theming/high-contrast-mode.md | 6 ++-- docs/utilities/animations.md | 16 ++++----- docs/utilities/gestures.md | 4 +-- 76 files changed, 441 insertions(+), 441 deletions(-) diff --git a/docs/angular/navigation.md b/docs/angular/navigation.md index 230a9b36f69..95f48542124 100644 --- a/docs/angular/navigation.md +++ b/docs/angular/navigation.md @@ -201,7 +201,7 @@ To get started with standalone components [visit Angular's official docs](https: ## Live Example -import NavigationPlayground from '@site/static/usage/v9/navigation/index.md'; +import NavigationPlayground from '@site/static/usage/v9/navigation/index.mdx'; diff --git a/docs/api/accordion.md b/docs/api/accordion.md index 2307f0b90ca..eaec7a2c948 100644 --- a/docs/api/accordion.md +++ b/docs/api/accordion.md @@ -22,7 +22,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ## 基本的な使い方 -import Basic from '@site/static/usage/v9/accordion/basic/index.md'; +import Basic from '@site/static/usage/v9/accordion/basic/index.mdx'; @@ -30,7 +30,7 @@ import Basic from '@site/static/usage/v9/accordion/basic/index.md'; どのアコーディオンを開くかは、`ion-accordion-group` の `value` プロパティを設定することで制御できます。このプロパティを設定することで、開発者はプログラムによって特定のアコーディオンを展開したり折りたたんだりすることができます。 -import Toggle from '@site/static/usage/v9/accordion/toggle/index.md'; +import Toggle from '@site/static/usage/v9/accordion/toggle/index.mdx'; @@ -44,7 +44,7 @@ import Toggle from '@site/static/usage/v9/accordion/toggle/index.md'; 開発者は `ionChange` イベントをリッスンして、アコーディオンが展開または折りたたまれたときに通知を受けることができます。 -import ListenChanges from '@site/static/usage/v9/accordion/listen-changes/index.md'; +import ListenChanges from '@site/static/usage/v9/accordion/listen-changes/index.mdx'; @@ -52,7 +52,7 @@ import ListenChanges from '@site/static/usage/v9/accordion/listen-changes/index. 開発者は `multiple` プロパティを使用して、複数のアコーディオンを一度に開くことができるようにすることができます。 -import Multiple from '@site/static/usage/v9/accordion/multiple/index.md'; +import Multiple from '@site/static/usage/v9/accordion/multiple/index.mdx'; @@ -62,7 +62,7 @@ import Multiple from '@site/static/usage/v9/accordion/multiple/index.md'; 個々のアコーディオンは、`ion-accordion` の `disabled` プロパティで無効にできます。 -import DisableIndividual from '@site/static/usage/v9/accordion/disable/individual/index.md'; +import DisableIndividual from '@site/static/usage/v9/accordion/disable/individual/index.mdx'; @@ -70,7 +70,7 @@ import DisableIndividual from '@site/static/usage/v9/accordion/disable/individua アコーディオングループは、`ion-accordion-group` の `disabled` プロパティで無効にすることができます。 -import DisableGroup from '@site/static/usage/v9/accordion/disable/group/index.md'; +import DisableGroup from '@site/static/usage/v9/accordion/disable/group/index.mdx'; @@ -80,7 +80,7 @@ import DisableGroup from '@site/static/usage/v9/accordion/disable/group/index.md 個々のアコーディオンは、`ion-accordion` の `readonly` プロパティで無効にできます。 -import ReadonlyIndividual from '@site/static/usage/v9/accordion/readonly/individual/index.md'; +import ReadonlyIndividual from '@site/static/usage/v9/accordion/readonly/individual/index.mdx'; @@ -88,7 +88,7 @@ import ReadonlyIndividual from '@site/static/usage/v9/accordion/readonly/individ アコーディオングループは、`ion-accordion-group` の `readonly` プロパティで無効にできます。 -import ReadonlyGroup from '@site/static/usage/v9/accordion/readonly/group/index.md'; +import ReadonlyGroup from '@site/static/usage/v9/accordion/readonly/group/index.mdx'; @@ -112,7 +112,7 @@ import ReadonlyGroup from '@site/static/usage/v9/accordion/readonly/group/index. `expand="inset"` の場合、アコーディオングループにはborder radiusが与えられます。 `md` モードでは、アコーディオン全体を開くと下に移動します。 -import ExpansionStyles from '@site/static/usage/v9/accordion/customization/expansion-styles/index.md'; +import ExpansionStyles from '@site/static/usage/v9/accordion/customization/expansion-styles/index.mdx'; @@ -136,7 +136,7 @@ ion-accordion.accordion-expanded ion-item[slot="header"] { } ``` -import AdvancedExpansionStyles from '@site/static/usage/v9/accordion/customization/advanced-expansion-styles/index.md'; +import AdvancedExpansionStyles from '@site/static/usage/v9/accordion/customization/advanced-expansion-styles/index.mdx'; @@ -148,7 +148,7 @@ import AdvancedExpansionStyles from '@site/static/usage/v9/accordion/customizati どのオプションを選択しても、アコーディオンを展開または折りたたむと、アイコンは自動的に回転します。 -import Icons from '@site/static/usage/v9/accordion/customization/icons/index.md'; +import Icons from '@site/static/usage/v9/accordion/customization/icons/index.mdx'; @@ -156,7 +156,7 @@ import Icons from '@site/static/usage/v9/accordion/customization/icons/index.md' `ion-accordion` はヘッダーとコンテンツ要素を囲むシェルとして機能するので、アコーディオンを簡単に好きなようにテーマ化することができます。ヘッダーのテーマは、スロットの `ion-item` をターゲットにすることで行うことができます。 `ion-item` を使用しているので、 [ion-item CSS Variables](./item#css-custom-properties) と [ion-item Shadow Parts](./item#css-shadow-parts) にもすべてアクセスすることができます。コンテンツのテイムも、`content` slotにある要素をターゲットにすることで簡単に実現できます。 -import Theming from '@site/static/usage/v9/accordion/customization/theming/index.md'; +import Theming from '@site/static/usage/v9/accordion/customization/theming/index.mdx'; @@ -166,7 +166,7 @@ import Theming from '@site/static/usage/v9/accordion/customization/theming/index デフォルトでは、アコーディオン・アイテムを展開したり折りたたんだりする際にアニメーションが有効になります。アニメーションは `prefers-reduced-motion` メディアクエリがサポートされ、`reduce` に設定されると自動的に無効化されます。対応していないブラウザでは、Ionic Frameworkアプリで `animated` を設定することで、アニメーションを無効にすることができます。 -import AccessibilityAnimations from '@site/static/usage/v9/accordion/accessibility/animations/index.md'; +import AccessibilityAnimations from '@site/static/usage/v9/accordion/accessibility/animations/index.mdx'; diff --git a/docs/api/action-sheet.md b/docs/api/action-sheet.md index 54c06671690..fc698361d6b 100644 --- a/docs/api/action-sheet.md +++ b/docs/api/action-sheet.md @@ -27,7 +27,7 @@ Action Sheetは複数の選択肢を表示するダイアログです。アプ `ion-action-sheet` は、テンプレートに直接コンポーネントを記述することで使用することができます。これにより、アクションシートを表示するために配線する必要があるハンドラの数を減らすことができます。 -import Trigger from '@site/static/usage/v9/action-sheet/inline/trigger/index.md'; +import Trigger from '@site/static/usage/v9/action-sheet/inline/trigger/index.mdx'; @@ -37,7 +37,7 @@ import Trigger from '@site/static/usage/v9/action-sheet/inline/trigger/index.md' `isOpen` は一方通行のデータバインディングを使用しているため、アクションシートが終了したときに自動的に `false` に設定されることはありません。開発者は `ionActionSheetDidDismiss` または `didDismiss` イベントをリッスンして `isOpen` を `false` に設定する必要があります。この理由は、`ion-action-sheet` の内部がアプリケーションの状態と密接に結合するのを防ぐためです。一方通行のデータバインディングでは、アクションシートはリアクティブ変数が提供するブーリアン値だけを気にすればよい。一方通行のデータバインディングでは、アクションシートは、ブーリアン値とリアクティブ変数の存在の両方に関心を持つ必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にします。 -import IsOpen from '@site/static/usage/v9/action-sheet/inline/isOpen/index.md'; +import IsOpen from '@site/static/usage/v9/action-sheet/inline/isOpen/index.mdx'; @@ -45,7 +45,7 @@ import IsOpen from '@site/static/usage/v9/action-sheet/inline/isOpen/index.md'; アクションシートの表示・非表示をより細かく制御したい場合は、`actionSheetController`を使用することができます。 -import Controller from '@site/static/usage/v9/action-sheet/controller/index.md'; +import Controller from '@site/static/usage/v9/action-sheet/controller/index.mdx'; @@ -59,7 +59,7 @@ Buttonは `ActionSheetButton` の `data` プロパティを介してデータを `didDismiss` イベントが発生すると、イベント詳細の `data` と `role` フィールドを使用して、アクションシートがどのように却下されたかについての情報を収集することができます。 -import RoleInfo from '@site/static/usage/v9/action-sheet/role-info-on-dismiss/index.md'; +import RoleInfo from '@site/static/usage/v9/action-sheet/role-info-on-dismiss/index.mdx'; @@ -83,7 +83,7 @@ import RoleInfo from '@site/static/usage/v9/action-sheet/role-info-on-dismiss/in } ``` -import Styling from '@site/static/usage/v9/action-sheet/theming/styling/index.md'; +import Styling from '@site/static/usage/v9/action-sheet/theming/styling/index.mdx'; @@ -91,7 +91,7 @@ import Styling from '@site/static/usage/v9/action-sheet/theming/styling/index.md [CSSカスタムプロパティ](#css-custom-properties-1) は、個々の要素を対象とすることなく、アクションシートのスタイルに使用することができます。 -import CssCustomProperties from '@site/static/usage/v9/action-sheet/theming/css-properties/index.md'; +import CssCustomProperties from '@site/static/usage/v9/action-sheet/theming/css-properties/index.mdx'; diff --git a/docs/api/alert.md b/docs/api/alert.md index b3fb4e7d806..317f066a622 100644 --- a/docs/api/alert.md +++ b/docs/api/alert.md @@ -26,7 +26,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; `ion-alert` は、テンプレートに直接コンポーネントを記述して使用することができます。これにより、アラートを表示するために必要なハンドラの数を減らすことができます。 -import Trigger from '@site/static/usage/v9/alert/presenting/trigger/index.md'; +import Trigger from '@site/static/usage/v9/alert/presenting/trigger/index.mdx'; @@ -36,7 +36,7 @@ import Trigger from '@site/static/usage/v9/alert/presenting/trigger/index.md'; `isOpen` は一方通行のデータバインディングを使用しているため、アラートが解除されたときに自動的に `false` に設定されることはありません。開発者は `ionAlertDidDismiss` または `didDismiss` イベントを待ち、`isOpen` を `false` に設定する必要があります。この理由は、`ion-alert` の内部がアプリケーションの状態と密接に結合するのを防ぐためである。一方通行のデータバインディングでは、アラートはリアクティブ変数が提供するブーリアン値だけを気にすればよい。双方向のデータバインディングでは、アラートはブーリアン値とリアクティブ変数の存在の両方に関心を持つ必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にする可能性があります。 -import IsOpen from '@site/static/usage/v9/alert/presenting/isOpen/index.md'; +import IsOpen from '@site/static/usage/v9/alert/presenting/isOpen/index.mdx'; @@ -44,7 +44,7 @@ import IsOpen from '@site/static/usage/v9/alert/presenting/isOpen/index.md'; `alertController`は、アラートを表示するタイミングや解除するタイミングをより細かく制御する必要がある場合に使用することができます。 -import Controller from '@site/static/usage/v9/alert/presenting/controller/index.md'; +import Controller from '@site/static/usage/v9/alert/presenting/controller/index.mdx'; @@ -54,7 +54,7 @@ import Controller from '@site/static/usage/v9/alert/presenting/controller/index. オプションで、`cancel`のような `role` プロパティをボタンに追加することができます。もし `cancel` ロールがボタンのいずれかに設定されている場合、バックドロップをタップしてアラートが解除されると、キャンセルロールを持つボタンから handler が起動されます。 -import Buttons from '@site/static/usage/v9/alert/buttons/index.md'; +import Buttons from '@site/static/usage/v9/alert/buttons/index.mdx'; @@ -65,13 +65,13 @@ Alertには、複数の異なるInputを含めることもでき、そのデー ### Text Inputs Example -import TextInputs from '@site/static/usage/v9/alert/inputs/text-inputs/index.md'; +import TextInputs from '@site/static/usage/v9/alert/inputs/text-inputs/index.mdx'; ### Radio Example -import Radios from '@site/static/usage/v9/alert/inputs/radios/index.md'; +import Radios from '@site/static/usage/v9/alert/inputs/radios/index.mdx'; @@ -101,7 +101,7 @@ Alertはscopedによるカプセル化を使用しており、実行時に各ス } ``` -import Customization from '@site/static/usage/v9/alert/customization/index.md'; +import Customization from '@site/static/usage/v9/alert/customization/index.mdx'; diff --git a/docs/api/app.md b/docs/api/app.md index 18c70328a75..8aa71ff0709 100644 --- a/docs/api/app.md +++ b/docs/api/app.md @@ -30,7 +30,7 @@ AppはIonicアプリケーションのコンテナ要素です。1つのプロ Ionicは、`ion-focusable`クラスを持つコンポーネント用のフォーカスユーティリティを提供します。これらのユーティリティは、Tabなどの特定のキーボードキーが押されたときに、コンポーネントのフォーカスを自動的に管理します。コンポーネントは、`ion-app`の`setFocus`メソッドを使用して、ユーザーのアクションに応じてプログラムでフォーカスを設定することもできます。 -import SetFocus from '@site/static/usage/v9/app/set-focus/index.md'; +import SetFocus from '@site/static/usage/v9/app/set-focus/index.mdx'; diff --git a/docs/api/avatar.md b/docs/api/avatar.md index 16b36bdba66..2bd6836c5d6 100644 --- a/docs/api/avatar.md +++ b/docs/api/avatar.md @@ -24,19 +24,19 @@ Avatarは、単独で使用することも、任意の要素の内部で使用 ## 基本的な使い方 -import Basic from '@site/static/usage/v9/avatar/basic/index.md'; +import Basic from '@site/static/usage/v9/avatar/basic/index.mdx'; ## Chip Avatar -import Chip from '@site/static/usage/v9/avatar/chip/index.md'; +import Chip from '@site/static/usage/v9/avatar/chip/index.mdx'; ## Item Avatar -import Item from '@site/static/usage/v9/avatar/item/index.md'; +import Item from '@site/static/usage/v9/avatar/item/index.mdx'; @@ -44,7 +44,7 @@ import Item from '@site/static/usage/v9/avatar/item/index.md'; ## CSSカスタムプロパティ -import CSSProps from '@site/static/usage/v9/avatar/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/avatar/theming/css-properties/index.mdx'; diff --git a/docs/api/back-button.md b/docs/api/back-button.md index 529349e7585..65850054052 100644 --- a/docs/api/back-button.md +++ b/docs/api/back-button.md @@ -21,7 +21,7 @@ Back Buttonは、クリックされるとアプリの履歴に戻るようにナ ## 基本的な使い方 -import Basic from '@site/static/usage/v9/back-button/basic/index.md'; +import Basic from '@site/static/usage/v9/back-button/basic/index.mdx'; @@ -29,7 +29,7 @@ import Basic from '@site/static/usage/v9/back-button/basic/index.md'; デフォルトでは、戻るボタンは`ios`では`"chevron-back"`アイコン付きで`"Back"`のテキストを表示し、`md`では`"arrow-back-sharp"`アイコンを表示します。これは、各戻るボタンコンポーネントごとに`icon`または`text`プロパティを設定することでカスタマイズ可能です。あるいは、グローバル設定で`backButtonIcon`または`backButtonText`プロパティを使用してグローバルに設定することもできます。詳細は[Configドキュメント](../developing/config)を参照してください。 -import Custom from '@site/static/usage/v9/back-button/custom/index.md'; +import Custom from '@site/static/usage/v9/back-button/custom/index.mdx'; diff --git a/docs/api/backdrop.md b/docs/api/backdrop.md index aa32a838cfe..b114c692fba 100644 --- a/docs/api/backdrop.md +++ b/docs/api/backdrop.md @@ -18,7 +18,7 @@ Backdropは、他のコンポーネントをオーバーレイするためフル Backdropは、その後ろのコンテンツをクリックしたりタップしたりするのを防ぎます。デフォルトでは透明なので、下のデモではCSSで見えるようにしています。 -import Basic from '@site/static/usage/v9/backdrop/basic/index.md'; +import Basic from '@site/static/usage/v9/backdrop/basic/index.mdx'; @@ -28,7 +28,7 @@ import Basic from '@site/static/usage/v9/backdrop/basic/index.md'; コンテンツに `z-index` を設定し、背景よりも高い位置に表示させることができます（デフォルトは `2` です）。 -import Styling from '@site/static/usage/v9/backdrop/styling/index.md'; +import Styling from '@site/static/usage/v9/backdrop/styling/index.mdx'; diff --git a/docs/api/badge.md b/docs/api/badge.md index fb9b8e72f9f..881e9f0f8d2 100644 --- a/docs/api/badge.md +++ b/docs/api/badge.md @@ -21,7 +21,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ## 基本的な使い方 -import Basic from '@site/static/usage/v9/badge/basic/index.md'; +import Basic from '@site/static/usage/v9/badge/basic/index.mdx'; @@ -33,7 +33,7 @@ import Basic from '@site/static/usage/v9/badge/basic/index.md'; 空のバッジは`md`モードでのみ利用可能です。 ::: -import InsideTabBar from '@site/static/usage/v9/badge/inside-tab-bar/index.md'; +import InsideTabBar from '@site/static/usage/v9/badge/inside-tab-bar/index.mdx'; @@ -41,13 +41,13 @@ import InsideTabBar from '@site/static/usage/v9/badge/inside-tab-bar/index.md'; ### Colors -import Colors from '@site/static/usage/v9/badge/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/badge/theming/colors/index.mdx'; ### CSS Properties -import CSSProps from '@site/static/usage/v9/badge/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/badge/theming/css-properties/index.mdx'; diff --git a/docs/api/breadcrumbs.md b/docs/api/breadcrumbs.md index 548b65f97bc..f406ba6c5bc 100644 --- a/docs/api/breadcrumbs.md +++ b/docs/api/breadcrumbs.md @@ -18,7 +18,7 @@ Breadcrumbsは、ユーザーがアプリやサイトのどこにいるのかを ## 基本的な使い方 -import Basic from '@site/static/usage/v9/breadcrumbs/basic/index.md'; +import Basic from '@site/static/usage/v9/breadcrumbs/basic/index.mdx'; @@ -26,13 +26,13 @@ import Basic from '@site/static/usage/v9/breadcrumbs/basic/index.md'; ### アイテムでのアイコン -import IconsOnItems from '@site/static/usage/v9/breadcrumbs/icons/icons-on-items/index.md'; +import IconsOnItems from '@site/static/usage/v9/breadcrumbs/icons/icons-on-items/index.mdx'; ### Custom Separators -import CustomSeparators from '@site/static/usage/v9/breadcrumbs/icons/custom-separators/index.md'; +import CustomSeparators from '@site/static/usage/v9/breadcrumbs/icons/custom-separators/index.mdx'; @@ -42,7 +42,7 @@ import CustomSeparators from '@site/static/usage/v9/breadcrumbs/icons/custom-sep `maxItems` の値よりも多くのアイテムがある場合、breadcrumbsは折りたたまれます。デフォルトでは、最初と最後のアイテムのみが表示されます。 -import MaxItems from '@site/static/usage/v9/breadcrumbs/collapsing-items/max-items/index.md'; +import MaxItems from '@site/static/usage/v9/breadcrumbs/collapsing-items/max-items/index.mdx'; @@ -50,7 +50,7 @@ import MaxItems from '@site/static/usage/v9/breadcrumbs/collapsing-items/max-ite アイテムが折りたたまれた後、表示するアイテムの数は `itemsBeforeCollapse` と `itemsAfterCollapse` プロパティで制御することができます。 -import ItemsBeforeAfter from '@site/static/usage/v9/breadcrumbs/collapsing-items/items-before-after/index.md'; +import ItemsBeforeAfter from '@site/static/usage/v9/breadcrumbs/collapsing-items/items-before-after/index.mdx'; @@ -58,7 +58,7 @@ import ItemsBeforeAfter from '@site/static/usage/v9/breadcrumbs/collapsing-items インジケータをクリックすると、`ionCollapsedClick` イベントが発生します。これは、例えば、breadcrumbsを展開するために使うことができます。 -import ExpandOnClick from '@site/static/usage/v9/breadcrumbs/collapsing-items/expand-on-click/index.md'; +import ExpandOnClick from '@site/static/usage/v9/breadcrumbs/collapsing-items/expand-on-click/index.mdx'; @@ -66,7 +66,7 @@ import ExpandOnClick from '@site/static/usage/v9/breadcrumbs/collapsing-items/ex また、`ionCollapsedClick` イベントは、隠されたパンくずを表示するオーバーレイ（この場合は `ion-popover` ）を提示するために使用することができます。 -import PopoverOnClick from '@site/static/usage/v9/breadcrumbs/collapsing-items/popover-on-click/index.md'; +import PopoverOnClick from '@site/static/usage/v9/breadcrumbs/collapsing-items/popover-on-click/index.mdx'; @@ -74,13 +74,13 @@ import PopoverOnClick from '@site/static/usage/v9/breadcrumbs/collapsing-items/p ### Colors -import Colors from '@site/static/usage/v9/breadcrumbs/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/breadcrumbs/theming/colors/index.mdx'; ## CSSカスタムプロパティ -import CSSProps from '@site/static/usage/v9/breadcrumbs/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/breadcrumbs/theming/css-properties/index.mdx'; diff --git a/docs/api/button.md b/docs/api/button.md index b5ed47b86aa..5b7e6236dcf 100644 --- a/docs/api/button.md +++ b/docs/api/button.md @@ -21,7 +21,7 @@ Buttonはクリック可能な要素を提供し、Form内や、標準の単機 ## 基本的な使い方 -import Basic from '@site/static/usage/v9/button/basic/index.md'; +import Basic from '@site/static/usage/v9/button/basic/index.mdx'; @@ -29,7 +29,7 @@ import Basic from '@site/static/usage/v9/button/basic/index.md'; このプロパティでは、ボタンの幅を指定することができます。デフォルトでは、ボタンは `display: inline-block` を持ちますが、このプロパティを設定すると、ボタンは `display: block` を持つ全角要素に変更されます。 -import Expand from '@site/static/usage/v9/button/expand/index.md'; +import Expand from '@site/static/usage/v9/button/expand/index.mdx'; @@ -37,7 +37,7 @@ import Expand from '@site/static/usage/v9/button/expand/index.md'; このプロパティは、ボタンの形状を指定することができます。デフォルトでは、ボタンは小さなボーダー半径を持つ長方形ですが、これを `"round"` に設定すると、ボタンは丸みを帯びた要素に変更されます。 -import Shape from '@site/static/usage/v9/button/shape/index.md'; +import Shape from '@site/static/usage/v9/button/shape/index.mdx'; @@ -46,7 +46,7 @@ import Shape from '@site/static/usage/v9/button/shape/index.md'; この属性は、Buttonのbackgroundとborder-colorを設定します。デフォルトでは、Buttonはtoolbar内にない限り、backgroundは塗りつぶされます。toolbar内にある場合は、backgroundは透明になります。 -import Fill from '@site/static/usage/v9/button/fill/index.md'; +import Fill from '@site/static/usage/v9/button/fill/index.mdx'; @@ -54,13 +54,13 @@ import Fill from '@site/static/usage/v9/button/fill/index.md'; この属性は、Buttonのサイズを指定します。この属性を設定すると、Buttonの高さとpaddingが変更されます -import Size from '@site/static/usage/v9/button/size/index.md'; +import Size from '@site/static/usage/v9/button/size/index.mdx'; ## Icons -import Icons from '@site/static/usage/v9/button/icons/index.md'; +import Icons from '@site/static/usage/v9/button/icons/index.mdx'; @@ -68,13 +68,13 @@ import Icons from '@site/static/usage/v9/button/icons/index.md'; ### Colors -import Colors from '@site/static/usage/v9/button/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/button/theming/colors/index.mdx'; ## CSSカスタムプロパティ -import CSSProps from '@site/static/usage/v9/button/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/button/theming/css-properties/index.mdx'; @@ -92,7 +92,7 @@ import CSSProps from '@site/static/usage/v9/button/theming/css-properties/index. max-width`スタイルは、デモのためだけに下のボタンに設定されています。テキストラッピングは動的なボタン幅で動作します。 ::: -import TextWrapping from '@site/static/usage/v9/button/text-wrapping/index.md'; +import TextWrapping from '@site/static/usage/v9/button/text-wrapping/index.mdx'; diff --git a/docs/api/buttons.md b/docs/api/buttons.md index d3e61b10f1b..f4feb6b80c6 100644 --- a/docs/api/buttons.md +++ b/docs/api/buttons.md @@ -21,7 +21,7 @@ Buttonsコンポーネントは、コンテナ要素です。 [ツールバー]( ## 基本的な使い方 -import Basic from '@site/static/usage/v9/buttons/basic/index.md'; +import Basic from '@site/static/usage/v9/buttons/basic/index.mdx'; @@ -36,7 +36,7 @@ import Basic from '@site/static/usage/v9/buttons/basic/index.md'; | `secondary` | Positions element to the `left` of the content in `ios` mode, and directly to the `right` in `md` mode. | | `primary` | Positions element to the `right` of the content in `ios` mode, and to the far `right` in `md` mode. | -import Placement from '@site/static/usage/v9/buttons/placement/index.md'; +import Placement from '@site/static/usage/v9/buttons/placement/index.mdx'; @@ -44,7 +44,7 @@ import Placement from '@site/static/usage/v9/buttons/placement/index.md'; ツールバー内のボタンはデフォルトでクリアスタイルに設定されていますが、ボタンの[`fill`](./button#fill)プロパティを使用して変更することができます。この例で[戻るボタン](./back-button)および[メニューボタン](./menu-button)に含まれるプロパティは表示目的のためのものであり、正しい使用方法についてはそれぞれのドキュメントを参照してください。 -import Types from '@site/static/usage/v9/buttons/types/index.md'; +import Types from '@site/static/usage/v9/buttons/types/index.mdx'; @@ -59,7 +59,7 @@ import Types from '@site/static/usage/v9/buttons/types/index.md'; ::: {/* Reuse the playground from the Title directory */} -import CollapsibleLargeTitleButtons from '@site/static/usage/v9/title/collapsible-large-title/buttons/index.md'; +import CollapsibleLargeTitleButtons from '@site/static/usage/v9/title/collapsible-large-title/buttons/index.mdx'; diff --git a/docs/api/card.md b/docs/api/card.md index 23b0ba8f7ed..4d2fd2efa15 100644 --- a/docs/api/card.md +++ b/docs/api/card.md @@ -27,28 +27,28 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ## 基本的な使い方 -import Basic from '@site/static/usage/v9/card/basic/index.md'; +import Basic from '@site/static/usage/v9/card/basic/index.mdx'; ## Media Cards -import Media from '@site/static/usage/v9/card/media/index.md'; +import Media from '@site/static/usage/v9/card/media/index.mdx'; ## Card Buttons -import Buttons from '@site/static/usage/v9/card/buttons/index.md'; +import Buttons from '@site/static/usage/v9/card/buttons/index.mdx'; ## List Card -import List from '@site/static/usage/v9/card/list/index.md'; +import List from '@site/static/usage/v9/card/list/index.mdx'; @@ -57,13 +57,13 @@ import List from '@site/static/usage/v9/card/list/index.md'; ### Colors -import Colors from '@site/static/usage/v9/card/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/card/theming/colors/index.mdx'; ## CSSカスタムプロパティ -import CSSProps from '@site/static/usage/v9/card/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/card/theming/css-properties/index.mdx'; diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md index 1af3580c781..3b5987e15a9 100644 --- a/docs/api/checkbox.md +++ b/docs/api/checkbox.md @@ -23,7 +23,7 @@ Checkboxを使用すると、一連のオプションから複数のオプショ ## 基本的な使い方 -import Basic from '@site/static/usage/v9/checkbox/basic/index.md'; +import Basic from '@site/static/usage/v9/checkbox/basic/index.mdx'; @@ -31,7 +31,7 @@ import Basic from '@site/static/usage/v9/checkbox/basic/index.md'; 開発者は `labelPlacement` プロパティを使用して、ラベルをコントロールに対してどのように配置するかを制御できます。このプロパティはフレックスボックスの `flex-direction` プロパティを反映しています。 -import LabelPlacement from '@site/static/usage/v9/checkbox/label-placement/index.md'; +import LabelPlacement from '@site/static/usage/v9/checkbox/label-placement/index.mdx'; @@ -43,7 +43,7 @@ Developers can use the `alignment` property to control how the label and control Stacked checkboxes can be aligned using the `alignment` property. This can be useful when the label and control need to be centered horizontally. ::: -import Alignment from '@site/static/usage/v9/checkbox/alignment/index.md'; +import Alignment from '@site/static/usage/v9/checkbox/alignment/index.mdx'; @@ -51,7 +51,7 @@ import Alignment from '@site/static/usage/v9/checkbox/alignment/index.md'; 開発者は `justify` プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。このプロパティはフレックスボックスの `justify-content` プロパティを反映しています。 -import Justify from '@site/static/usage/v9/checkbox/justify/index.md'; +import Justify from '@site/static/usage/v9/checkbox/justify/index.mdx'; @@ -62,7 +62,7 @@ import Justify from '@site/static/usage/v9/checkbox/justify/index.md'; ## Indeterminate Checkboxes -import Indeterminate from '@site/static/usage/v9/checkbox/indeterminate/index.md'; +import Indeterminate from '@site/static/usage/v9/checkbox/indeterminate/index.mdx'; @@ -70,7 +70,7 @@ import Indeterminate from '@site/static/usage/v9/checkbox/indeterminate/index.md Checkbox labels can sometimes be accompanied with links. These links can provide more information related to the checkbox. However, clicking the link should not check the checkbox. To achieve this, we can use [stopPropagation](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation) to prevent the click event from bubbling. When using this approach, the rest of the label still remains clickable. -import LabelLink from '@site/static/usage/v9/checkbox/label-link/index.md'; +import LabelLink from '@site/static/usage/v9/checkbox/label-link/index.mdx'; @@ -80,7 +80,7 @@ Helper and error text can be used inside of a checkbox with the `helperText` and 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. -import HelperError from '@site/static/usage/v9/checkbox/helper-error/index.md'; +import HelperError from '@site/static/usage/v9/checkbox/helper-error/index.mdx'; @@ -88,7 +88,7 @@ import HelperError from '@site/static/usage/v9/checkbox/helper-error/index.md'; ## CSSカスタムプロパティ -import CSSProps from '@site/static/usage/v9/checkbox/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/checkbox/theming/css-properties/index.mdx'; diff --git a/docs/api/chip.md b/docs/api/chip.md index 04f60f19de7..b69206a0e44 100644 --- a/docs/api/chip.md +++ b/docs/api/chip.md @@ -21,13 +21,13 @@ Chipは連絡先などを複数の小さなエンティティで表示します ## 基本的な使い方 -import Basic from '@site/static/usage/v9/chip/basic/index.md'; +import Basic from '@site/static/usage/v9/chip/basic/index.mdx'; ## Slotting Components and Icons -import SlotExample from '@site/static/usage/v9/chip/slots/index.md'; +import SlotExample from '@site/static/usage/v9/chip/slots/index.mdx'; @@ -35,13 +35,13 @@ import SlotExample from '@site/static/usage/v9/chip/slots/index.md'; ### Colors -import Colors from '@site/static/usage/v9/chip/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/chip/theming/colors/index.mdx'; ## CSSカスタムプロパティ -import CSSProps from '@site/static/usage/v9/chip/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/chip/theming/css-properties/index.mdx'; diff --git a/docs/api/content.md b/docs/api/content.md index 1f387f6288a..b438ea64944 100644 --- a/docs/api/content.md +++ b/docs/api/content.md @@ -27,7 +27,7 @@ Contentは、他の多くのIonicコンポーネントと同様に、 [CSS Utili ## 基本的な使い方 -import Basic from '@site/static/usage/v9/content/basic/index.md'; +import Basic from '@site/static/usage/v9/content/basic/index.mdx'; @@ -36,7 +36,7 @@ import Basic from '@site/static/usage/v9/content/basic/index.md'; コンテンツは、ページ内の唯一のトップレベル・コンポーネントとすることも、[ヘッダー](./header)、[フッター](./footer)、またはその両方と一緒に使用することも可能です。ヘッダーやフッターと一緒に使用すると、残りの高さを埋めるようにサイズが調整されます。 -import HeaderFooter from '@site/static/usage/v9/content/header-footer/index.md'; +import HeaderFooter from '@site/static/usage/v9/content/header-footer/index.mdx'; @@ -45,7 +45,7 @@ import HeaderFooter from '@site/static/usage/v9/content/header-footer/index.md'; デフォルトでは、コンテンツは [ヘッダー](./header)と [フッター](./footer)の間のスペースを埋めますが、それらの背景にまわることはありません。例えば、ヘッダーとフッターのどちらかに `translucent` プロパティを設定した場合や、ツールバーに `opacity` を設定した場合など、特定のケースでは、コンテンツをヘッダーとフッターの後ろにスクロールさせることが望まれるかもしれない。これは、コンテンツの `fullscreen` プロパティを `true` に設定することで実現することができます。 -import Fullscreen from '@site/static/usage/v9/content/fullscreen/index.md'; +import Fullscreen from '@site/static/usage/v9/content/fullscreen/index.mdx'; @@ -56,7 +56,7 @@ import Fullscreen from '@site/static/usage/v9/content/fullscreen/index.md'; The `fixedSlotPlacement` property is used to determine if content in the `fixed` slot is placed before or after the main content in the DOM. When set to `before`, fixed slot content will be placed before the main content and will therefore receive keyboard focus before the main content receives keyboard focus. This can be useful when the main content contains an infinitely-scrolling list, preventing a [FAB](./fab) or other fixed content from being reachable by pressing the tab key. -import Fixed from '@site/static/usage/v9/content/fixed/index.md'; +import Fixed from '@site/static/usage/v9/content/fixed/index.mdx'; @@ -64,7 +64,7 @@ import Fixed from '@site/static/usage/v9/content/fixed/index.md'; コンテンツには [メソッド](#methods) が用意されており、これを呼び出すことでコンテンツを下、上、または特定のポイントにスクロールさせることができます。これらのメソッドには `duration` を渡すことができ、瞬時に位置を変更するのではなく、スムーズに移行することができます。 -import ScrollMethods from '@site/static/usage/v9/content/scroll-methods/index.md'; +import ScrollMethods from '@site/static/usage/v9/content/scroll-methods/index.mdx'; @@ -72,7 +72,7 @@ import ScrollMethods from '@site/static/usage/v9/content/scroll-methods/index.md スクロールイベントは、パフォーマンス上、コンテンツに対してデフォルトで無効化されています。しかし、`scrollEvents` を `true` に設定することで、有効にすることができます。これは、 スクロール [イベント](#events) を聞く前に必要です。 -import ScrollEvents from '@site/static/usage/v9/content/scroll-events/index.md'; +import ScrollEvents from '@site/static/usage/v9/content/scroll-events/index.mdx'; @@ -81,19 +81,19 @@ import ScrollEvents from '@site/static/usage/v9/content/scroll-events/index.md'; ### Colors -import Colors from '@site/static/usage/v9/content/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/content/theming/colors/index.mdx'; ### CSS Shadow Parts -import CSSParts from '@site/static/usage/v9/content/theming/css-shadow-parts/index.md'; +import CSSParts from '@site/static/usage/v9/content/theming/css-shadow-parts/index.mdx'; ## CSSカスタムプロパティ -import CSSProps from '@site/static/usage/v9/content/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/content/theming/css-properties/index.mdx'; @@ -117,7 +117,7 @@ ion-content::part(scroll) { } ``` -import SafeArea from '@site/static/usage/v9/content/theming/safe-area/index.md'; +import SafeArea from '@site/static/usage/v9/content/theming/safe-area/index.mdx'; diff --git a/docs/api/datetime-button.md b/docs/api/datetime-button.md index 02c9c307cf8..866359ee874 100644 --- a/docs/api/datetime-button.md +++ b/docs/api/datetime-button.md @@ -27,7 +27,7 @@ Angular、React、Vue などの JavaScript フレームワークで Datetime But ## 基本的な使い方 -import Basic from '@site/static/usage/v9/datetime-button/basic/index.md'; +import Basic from '@site/static/usage/v9/datetime-button/basic/index.mdx'; @@ -39,7 +39,7 @@ import Basic from '@site/static/usage/v9/datetime-button/basic/index.md'; Datetime ボタンの日時の形式は、関連する Datetime インスタンスで `formatOptions` を指定することでカスタマイズできます。詳細は [Datetime フォーマットオプション](./datetime#format-options) を参照してください。 -import FormatOptions from '@site/static/usage/v9/datetime-button/format-options/index.md'; +import FormatOptions from '@site/static/usage/v9/datetime-button/format-options/index.mdx'; diff --git a/docs/api/datetime.md b/docs/api/datetime.md index cf4575b72cf..aa5566fbc16 100644 --- a/docs/api/datetime.md +++ b/docs/api/datetime.md @@ -8,43 +8,43 @@ import Parts from '@ionic-internal/component-api/v9/datetime/parts.md'; import CustomProps from '@ionic-internal/component-api/v9/datetime/custom-props.mdx'; import Slots from '@ionic-internal/component-api/v9/datetime/slots.md'; -import Basic from '@site/static/usage/v9/datetime/basic/index.md'; +import Basic from '@site/static/usage/v9/datetime/basic/index.mdx'; -import MaxMin from '@site/static/usage/v9/datetime/date-constraints/max-min/index.md'; -import Values from '@site/static/usage/v9/datetime/date-constraints/values/index.md'; -import Advanced from '@site/static/usage/v9/datetime/date-constraints/advanced/index.md'; +import MaxMin from '@site/static/usage/v9/datetime/date-constraints/max-min/index.mdx'; +import Values from '@site/static/usage/v9/datetime/date-constraints/values/index.mdx'; +import Advanced from '@site/static/usage/v9/datetime/date-constraints/advanced/index.mdx'; -import FormatOptions from '@site/static/usage/v9/datetime/format-options/index.md'; +import FormatOptions from '@site/static/usage/v9/datetime/format-options/index.mdx'; -import CustomLocale from '@site/static/usage/v9/datetime/localization/custom-locale/index.md'; -import HourCycle from '@site/static/usage/v9/datetime/localization/hour-cycle/index.md'; -import FirstDayOfWeek from '@site/static/usage/v9/datetime/localization/first-day-of-week/index.md'; -import LocaleExtensionTags from '@site/static/usage/v9/datetime/localization/locale-extension-tags/index.md'; -import TimeLabel from '@site/static/usage/v9/datetime/localization/time-label/index.md'; +import CustomLocale from '@site/static/usage/v9/datetime/localization/custom-locale/index.mdx'; +import HourCycle from '@site/static/usage/v9/datetime/localization/hour-cycle/index.mdx'; +import FirstDayOfWeek from '@site/static/usage/v9/datetime/localization/first-day-of-week/index.mdx'; +import LocaleExtensionTags from '@site/static/usage/v9/datetime/localization/locale-extension-tags/index.mdx'; +import TimeLabel from '@site/static/usage/v9/datetime/localization/time-label/index.mdx'; -import MonthAndYear from '@site/static/usage/v9/datetime/presentation/month-and-year/index.md'; -import Time from '@site/static/usage/v9/datetime/presentation/time/index.md'; -import Date from '@site/static/usage/v9/datetime/presentation/date/index.md'; +import MonthAndYear from '@site/static/usage/v9/datetime/presentation/month-and-year/index.mdx'; +import Time from '@site/static/usage/v9/datetime/presentation/time/index.mdx'; +import Date from '@site/static/usage/v9/datetime/presentation/date/index.mdx'; -import ShowingDefaultTitle from '@site/static/usage/v9/datetime/title/showing-default-title/index.md'; -import CustomizingTitle from '@site/static/usage/v9/datetime/title/customizing-title/index.md'; +import ShowingDefaultTitle from '@site/static/usage/v9/datetime/title/showing-default-title/index.mdx'; +import CustomizingTitle from '@site/static/usage/v9/datetime/title/customizing-title/index.mdx'; -import ShowingConfirmationButtons from '@site/static/usage/v9/datetime/buttons/showing-confirmation-buttons/index.md'; -import CustomizingButtons from '@site/static/usage/v9/datetime/buttons/customizing-buttons/index.md'; -import CustomizingButtonTexts from '@site/static/usage/v9/datetime/buttons/customizing-button-texts/index.md'; +import ShowingConfirmationButtons from '@site/static/usage/v9/datetime/buttons/showing-confirmation-buttons/index.mdx'; +import CustomizingButtons from '@site/static/usage/v9/datetime/buttons/customizing-buttons/index.mdx'; +import CustomizingButtonTexts from '@site/static/usage/v9/datetime/buttons/customizing-button-texts/index.mdx'; -import HighlightedDatesArray from '@site/static/usage/v9/datetime/highlightedDates/array/index.md'; -import HighlightedDatesCallback from '@site/static/usage/v9/datetime/highlightedDates/callback/index.md'; +import HighlightedDatesArray from '@site/static/usage/v9/datetime/highlightedDates/array/index.mdx'; +import HighlightedDatesCallback from '@site/static/usage/v9/datetime/highlightedDates/callback/index.mdx'; -import ShowAdjacentDays from '@site/static/usage/v9/datetime/show-adjacent-days/index.md'; +import ShowAdjacentDays from '@site/static/usage/v9/datetime/show-adjacent-days/index.mdx'; -import MultipleDateSelection from '@site/static/usage/v9/datetime/multiple/index.md'; +import MultipleDateSelection from '@site/static/usage/v9/datetime/multiple/index.mdx'; -import GlobalTheming from '@site/static/usage/v9/datetime/styling/global-theming/index.md'; -import CalendarHeaderStyling from '@site/static/usage/v9/datetime/styling/calendar-header/index.md'; -import CalendarDaysStyling from '@site/static/usage/v9/datetime/styling/calendar-days/index.md'; -import DatetimeHeaderStyling from '@site/static/usage/v9/datetime/styling/datetime-header/index.md'; -import WheelStyling from '@site/static/usage/v9/datetime/styling/wheel-styling/index.md'; +import GlobalTheming from '@site/static/usage/v9/datetime/styling/global-theming/index.mdx'; +import CalendarHeaderStyling from '@site/static/usage/v9/datetime/styling/calendar-header/index.mdx'; +import CalendarDaysStyling from '@site/static/usage/v9/datetime/styling/calendar-days/index.mdx'; +import DatetimeHeaderStyling from '@site/static/usage/v9/datetime/styling/datetime-header/index.mdx'; +import WheelStyling from '@site/static/usage/v9/datetime/styling/wheel-styling/index.mdx'; ion-datetime: Ionic API Input for Datetime Format Picker @@ -249,7 +249,7 @@ Ionic Framework では、[Intl.DatetimeFormat](https://developer.mozilla.org/en- 以下の例では、ホイールピッカーに `presentation="date-time"` を指定しています。 -import Wheel from '@site/static/usage/v9/datetime/presentation/wheel/index.md'; +import Wheel from '@site/static/usage/v9/datetime/presentation/wheel/index.mdx'; diff --git a/docs/api/fab.md b/docs/api/fab.md index e0e789941be..edefd34fe49 100644 --- a/docs/api/fab.md +++ b/docs/api/fab.md @@ -21,7 +21,7 @@ Fabは、1つ以上の[fabボタン](./fab-button)を含むコンテナ要素で ## 基本的な使い方 -import BasicUsage from '@site/static/usage/v9/fab/basic/index.md'; +import BasicUsage from '@site/static/usage/v9/fab/basic/index.mdx'; @@ -29,7 +29,7 @@ import BasicUsage from '@site/static/usage/v9/fab/basic/index.md'; [fabリスト](./fab-list)コンポーネントの`side`プロパティは、メインfabボタンと相対的に表示される場所を制御します。一つのfabは、`side`の値が全て異なる限り、複数のfabリストを持つことができます。 -import ListSide from '@site/static/usage/v9/fab/list-side/index.md'; +import ListSide from '@site/static/usage/v9/fab/list-side/index.mdx'; @@ -37,7 +37,7 @@ import ListSide from '@site/static/usage/v9/fab/list-side/index.md'; fabを固定位置に配置するためには、外側の [content](./content) コンポーネントの `fixed` スロットに割り当てる必要があります。vertical`とhorizontal`のプロップを使用して、ビューポートでのfabの配置を制御します。edge`プロップは、アプリのヘッダーやフッターにfabボタンが重なるようにします。 -import Positioning from '@site/static/usage/v9/fab/positioning/index.md'; +import Positioning from '@site/static/usage/v9/fab/positioning/index.mdx'; @@ -63,7 +63,7 @@ ion-fab { `ion-header` (`vertical` が `"top"` に設定されたファブの場合) または `ion-footer` (`vertical` が `"bottom"` に設定されたファブの場合) がある場合、ファブはヘッダまたはフッタからの相対位置に配置されるため、CSS の調整は必要ありません。 -import SafeArea from '@site/static/usage/v9/fab/safe-area/index.md'; +import SafeArea from '@site/static/usage/v9/fab/safe-area/index.mdx'; @@ -73,7 +73,7 @@ import SafeArea from '@site/static/usage/v9/fab/safe-area/index.md'; [Content](./content)の `fixedSlotPlacement` プロパティを `before` に設定することで、FABはDOM内のメインコンテンツの前に配置されます。これにより、他のインタラクティブ要素がフォーカスを受ける前にFABがキーボードフォーカスを受けるようになり、ユーザがFABにアクセスしやすくなります。 -import BeforeContent from '@site/static/usage/v9/fab/before-content/index.md'; +import BeforeContent from '@site/static/usage/v9/fab/before-content/index.mdx'; @@ -81,7 +81,7 @@ import BeforeContent from '@site/static/usage/v9/fab/before-content/index.md'; メインファブボタンの `size` プロパティを `"small"` に設定すると、ミニサイズで描画されます。なお、このプロパティは内側のファブボタンで使用した場合は効果がありません。 -import ButtonSizing from '@site/static/usage/v9/fab/button-sizing/index.md'; +import ButtonSizing from '@site/static/usage/v9/fab/button-sizing/index.mdx'; @@ -89,19 +89,19 @@ import ButtonSizing from '@site/static/usage/v9/fab/button-sizing/index.md'; ### Colors -import Colors from '@site/static/usage/v9/fab/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/fab/theming/colors/index.mdx'; ## CSSカスタムプロパティ -import CSSCustomProperties from '@site/static/usage/v9/fab/theming/css-custom-properties/index.md'; +import CSSCustomProperties from '@site/static/usage/v9/fab/theming/css-custom-properties/index.mdx'; ### CSS Shadow Parts -import CSSShadowParts from '@site/static/usage/v9/fab/theming/css-shadow-parts/index.md'; +import CSSShadowParts from '@site/static/usage/v9/fab/theming/css-shadow-parts/index.mdx'; diff --git a/docs/api/footer.md b/docs/api/footer.md index 79234c87962..4580dba6dd5 100644 --- a/docs/api/footer.md +++ b/docs/api/footer.md @@ -19,7 +19,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ## 基本的な使い方 -import Basic from '@site/static/usage/v9/footer/basic/index.md'; +import Basic from '@site/static/usage/v9/footer/basic/index.mdx'; @@ -27,7 +27,7 @@ import Basic from '@site/static/usage/v9/footer/basic/index.md'; フッターは、`translucent`プロパティを設定することで、ネイティブiOSアプリケーションで見られる透明度に合わせることができます。コンテンツがフッターの背後でスクロールするようにするには、コンテンツに`fullscreen`プロパティを設定する必要があります。この効果は、モードが`"ios"`であり、デバイスが[backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#browser_compatibility)をサポートしている場合にのみ適用されます。 -import Translucent from '@site/static/usage/v9/footer/translucent/index.md'; +import Translucent from '@site/static/usage/v9/footer/translucent/index.mdx'; @@ -35,7 +35,7 @@ import Translucent from '@site/static/usage/v9/footer/translucent/index.md'; 多くのネイティブiOSアプリケーションは、ツールバーにフェード効果を持たせています。これは、フッターの `collapse` プロパティを `"fade"` に設定することで実現できます。コンテンツが最後までスクロールされると、フッターの背景とボーダーはフェードアウトします。この効果は、モードが `"ios"` のときだけ適用されます。 -import Fade from '@site/static/usage/v9/footer/fade/index.md'; +import Fade from '@site/static/usage/v9/footer/fade/index.mdx'; @@ -43,7 +43,7 @@ import Fade from '@site/static/usage/v9/footer/fade/index.md'; フェードフッターを正しく動作させるためには、スクロールコンテナが必要です。仮想スクロールソリューションを使用する場合は、カスタムスクロールターゲットを提供する必要があります。コンテンツのスクロールを無効にし、スクロールを担当する要素に `.ion-content-scroll-host` クラスを追加する必要があります。 -import CustomScrollTarget from '@site/static/usage/v9/footer/custom-scroll-target/index.md'; +import CustomScrollTarget from '@site/static/usage/v9/footer/custom-scroll-target/index.mdx'; @@ -51,7 +51,7 @@ import CustomScrollTarget from '@site/static/usage/v9/footer/custom-scroll-targe `"md"`モードでは、フッターは上部に `box-shadow` が表示されます。`"ios"`モードでは、上部に `border` が表示されます。これらは、フッターに `.ion-no-border` クラスを追加することで削除することができます。 -import NoBorder from '@site/static/usage/v9/footer/no-border/index.md'; +import NoBorder from '@site/static/usage/v9/footer/no-border/index.mdx'; diff --git a/docs/api/grid.md b/docs/api/grid.md index ee2b8e09496..6fabcf2c2a4 100644 --- a/docs/api/grid.md +++ b/docs/api/grid.md @@ -54,7 +54,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; デフォルトでは、すべてのデバイスと画面サイズにおいて、列は行の中で同じ幅を占めます。 -import Basic from '@site/static/usage/v9/grid/basic/index.md'; +import Basic from '@site/static/usage/v9/grid/basic/index.mdx'; @@ -71,7 +71,7 @@ import Basic from '@site/static/usage/v9/grid/basic/index.md'; | lg | 960px | Set grid width to 960px when (min-width: 992px) | | xl | 1140px | Set grid width to 1140px when (min-width: 1200px) | -import Fixed from '@site/static/usage/v9/grid/fixed/index.md'; +import Fixed from '@site/static/usage/v9/grid/fixed/index.mdx'; @@ -84,7 +84,7 @@ import Fixed from '@site/static/usage/v9/grid/fixed/index.md'; `size`を`"auto"`に設定することで、カラムはコンテンツの自然な幅に基づいたサイズを設定することができます。これは、カラムを特定のピクセル数のような絶対的な幅に設定するときに必要です。自動幅のカラムの隣にあるカラムは、行を埋めるようにリサイズされます。 -import SizeAuto from '@site/static/usage/v9/grid/size-auto/index.md'; +import SizeAuto from '@site/static/usage/v9/grid/size-auto/index.mdx'; @@ -93,7 +93,7 @@ import SizeAuto from '@site/static/usage/v9/grid/size-auto/index.md'; カラムの `size` を設定すると、他のカラムは自動的にそのカラムの周りにリサイズされます。すべてのカラムにサイズが指定され、それがカラムの総数に満たない場合、カラムの後に空白ができます。 -import Size from '@site/static/usage/v9/grid/size/index.md'; +import Size from '@site/static/usage/v9/grid/size/index.mdx'; @@ -101,7 +101,7 @@ import Size from '@site/static/usage/v9/grid/size/index.md'; `size`プロパティは、すべての[ブレークポイント](#default-breakpoints)でカラム幅を変更します。カラムはまた、ブレークポイント名が「size」の末尾に付加された複数のサイズプロパティを提供します。これらのプロパティを使用して、画面サイズに応じてカラムの幅を変更することができます。以下の例を StackBlitz で開き、画面のサイズを変更してカラム幅の変化を確認してください。 -import SizeResponsive from '@site/static/usage/v9/grid/size-responsive/index.md'; +import SizeResponsive from '@site/static/usage/v9/grid/size-responsive/index.mdx'; @@ -114,7 +114,7 @@ import SizeResponsive from '@site/static/usage/v9/grid/size-responsive/index.md' カラムは、`offset`プロパティを用いて右に移動させることができます。このプロパティは、カラムの左マージンを指定したカラムの数だけ増やします。また、その右側にカラムが存在する場合は、そのカラムを移動させます。 -import Offset from '@site/static/usage/v9/grid/offset/index.md'; +import Offset from '@site/static/usage/v9/grid/offset/index.mdx'; @@ -122,7 +122,7 @@ import Offset from '@site/static/usage/v9/grid/offset/index.md'; `offset`プロパティは、すべての[ブレークポイント](#default-breakpoints)で列の左マージンを変更します。列には、ブレークポイント名を"offset"の末尾に付けた複数のオフセットプロパティもあります。これらのプロパティは、画面サイズに応じて列のオフセットを変更するために使用できます。以下の例を StackBlitz で開き、画面サイズを変更して列のオフセットがどのように変化するかを確認してください。 -import OffsetResponsive from '@site/static/usage/v9/grid/offset-responsive/index.md'; +import OffsetResponsive from '@site/static/usage/v9/grid/offset-responsive/index.mdx'; @@ -135,7 +135,7 @@ import OffsetResponsive from '@site/static/usage/v9/grid/offset-responsive/index `push`と`pull`のプロパティを追加することで、カラムの並び替えを行うことができます。これらのプロパティは、指定された列数だけ列の `left` と `right` を調整し、列の並び替えを簡単に行うことができます。この場合、他のカラムが配置されている場所にカラムを移動させると、カラムが重なることになります。 -import PushPull from '@site/static/usage/v9/grid/push-pull/index.md'; +import PushPull from '@site/static/usage/v9/grid/push-pull/index.mdx'; @@ -143,7 +143,7 @@ import PushPull from '@site/static/usage/v9/grid/push-pull/index.md'; `push`および`pull`プロパティは、すべての[ブレークポイント](#default-breakpoints)で列の位置を変更します。列には、ブレークポイント名を"push" / "pull"の末尾に付けた複数の`push`および`pull`プロパティもあります。これらのプロパティは、画面サイズに応じて列の位置を変更するために使用できます。以下の例を StackBlitz で開き、画面サイズを変更して列の位置がどのように変化するかを確認してください。 -import PushPullResponsive from '@site/static/usage/v9/grid/push-pull-responsive/index.md'; +import PushPullResponsive from '@site/static/usage/v9/grid/push-pull-responsive/index.mdx'; @@ -153,7 +153,7 @@ import PushPullResponsive from '@site/static/usage/v9/grid/push-pull-responsive/ すべての列は、行に異なるクラスを追加することで垂直に整列させることができます。使用可能なクラスのリストは[CSS ユーティリティ](/layout/css-utilities#flex-container-properties)を参照してください。 -import VerticalAlignment from '@site/static/usage/v9/grid/vertical-alignment/index.md'; +import VerticalAlignment from '@site/static/usage/v9/grid/vertical-alignment/index.mdx'; @@ -162,7 +162,7 @@ import VerticalAlignment from '@site/static/usage/v9/grid/vertical-alignment/ind すべての列は、行に異なるクラスを追加することで水平方向に整列させることができます。使用可能なクラスのリストは[CSS ユーティリティ](/layout/css-utilities.md#flex-container-properties)を参照してください。 -import HorizontalAlignment from '@site/static/usage/v9/grid/horizontal-alignment/index.md'; +import HorizontalAlignment from '@site/static/usage/v9/grid/horizontal-alignment/index.mdx'; @@ -174,7 +174,7 @@ import HorizontalAlignment from '@site/static/usage/v9/grid/horizontal-alignment 固定グリッドの幅は、すべてのブレークポイントに対して`--ion-grid-width` CSS 変数で設定できます。個別のブレークポイントを上書きするには、`--ion-grid-width-{breakpoint}` CSS 変数を使用してください。各ブレークポイントのデフォルト値は、[固定グリッド](#fixed-grid)セクションに記載されています。以下の例を StackBlitz で開き、画面サイズを変更してグリッド幅がどのように変化するかを確認してください。 -import Width from '@site/static/usage/v9/grid/customizing/width/index.md'; +import Width from '@site/static/usage/v9/grid/customizing/width/index.mdx'; @@ -182,7 +182,7 @@ import Width from '@site/static/usage/v9/grid/customizing/width/index.md'; グリッドのカラム数は `--ion-grid-columns` という CSS 変数で変更することができます。デフォルトでは 12 列ですが、これを任意の正の整数に変更し、各列の幅を計算するために使用することができます。 -import ColumnNumber from '@site/static/usage/v9/grid/customizing/column-number/index.md'; +import ColumnNumber from '@site/static/usage/v9/grid/customizing/column-number/index.mdx'; @@ -192,7 +192,7 @@ import ColumnNumber from '@site/static/usage/v9/grid/customizing/column-number/i 列の padding は、CSS 変数 `--ion-grid-column-padding` ですべてのブレイクポイントに対して設定できます。個々のブレイクポイントを上書きするには、 `--ion-grid-column-padding-{breakpoint}` CSS 変数を使用します。 -import Padding from '@site/static/usage/v9/grid/customizing/padding/index.md'; +import Padding from '@site/static/usage/v9/grid/customizing/padding/index.mdx'; diff --git a/docs/api/header.md b/docs/api/header.md index 4a467ea4ea6..feb0f9bf86c 100644 --- a/docs/api/header.md +++ b/docs/api/header.md @@ -19,7 +19,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ## 基本的な使い方 -import Basic from '@site/static/usage/v9/header/basic/index.md'; +import Basic from '@site/static/usage/v9/header/basic/index.mdx'; @@ -27,7 +27,7 @@ import Basic from '@site/static/usage/v9/header/basic/index.md'; ヘッダーは、`translucent`プロパティを設定することで、ネイティブiOSアプリケーションで見られる透明度と一致させることができます。コンテンツをヘッダーの背後にスクロールさせるには、コンテンツに`fullscreen`プロパティを設定する必要があります。この効果は、モードが`"ios"`であり、デバイスが[backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#browser_compatibility)をサポートしている場合にのみ適用されます。 -import Translucent from '@site/static/usage/v9/header/translucent/index.md'; +import Translucent from '@site/static/usage/v9/header/translucent/index.mdx'; @@ -35,7 +35,7 @@ import Translucent from '@site/static/usage/v9/header/translucent/index.md'; Ionicでは、iOSネイティブアプリケーションで見られる、大きなツールバーのタイトルを表示し、スクロールすると小さなタイトルに折りたたむ機能を提供しています。これは、コンテンツの上に1つ、コンテンツの中に1つ、合計2つのヘッダーを追加し、コンテンツの中にあるヘッダーに `collapse` プロパティを `"condense"` に設定することで実現できます。この効果は、モードが "ios "のときのみ適用されます。 -import Condense from '@site/static/usage/v9/header/condense/index.md'; +import Condense from '@site/static/usage/v9/header/condense/index.mdx'; @@ -45,7 +45,7 @@ import Condense from '@site/static/usage/v9/header/condense/index.md'; この機能は、[折りたたみヘッダー](#condensed-header)と組み合わせることができます。`collapse`プロパティに`"fade"`を設定した場合は、コンテンツの外側にあるヘッダーに適用する必要があります。 -import Fade from '@site/static/usage/v9/header/fade/index.md'; +import Fade from '@site/static/usage/v9/header/fade/index.mdx'; @@ -53,7 +53,7 @@ import Fade from '@site/static/usage/v9/header/fade/index.md'; フェードヘッダーが正しく動作するためには、スクロールコンテナが必要です。仮想スクロールソリューションを使用する場合は、カスタムスクロールターゲットを提供する必要があります。コンテンツのスクロールを無効にし、スクロールを担当する要素に `.ion-content-scroll-host` クラスを追加する必要があります。 -import CustomScrollTarget from '@site/static/usage/v9/header/custom-scroll-target/index.md'; +import CustomScrollTarget from '@site/static/usage/v9/header/custom-scroll-target/index.mdx'; @@ -61,7 +61,7 @@ import CustomScrollTarget from '@site/static/usage/v9/header/custom-scroll-targe `"md"`モードでは、ヘッダーの下部に `box-shadow` が表示されます。 `"ios"`モードでは、ヘッダの下部に `border` が表示されます。これらは、ヘッダーに `.ion-no-border` クラスを追加することで削除することができます。 -import NoBorder from '@site/static/usage/v9/header/no-border/index.md'; +import NoBorder from '@site/static/usage/v9/header/no-border/index.mdx'; diff --git a/docs/api/icon.md b/docs/api/icon.md index 787d80cecda..0ec1ff46e7b 100644 --- a/docs/api/icon.md +++ b/docs/api/icon.md @@ -16,7 +16,7 @@ Ionicons のドキュメントについては、 @@ -92,7 +92,7 @@ import Separators from '@site/static/usage/v9/input-otp/separators/index.md'; - `onvalid` スタイルはタッチされたときのみ表示されます (`ion-touched`) - `ion-valid` スタイルはフォーカスされたときのみ表示されます (`has-focus`) -import States from '@site/static/usage/v9/input-otp/states/index.md'; +import States from '@site/static/usage/v9/input-otp/states/index.mdx'; @@ -110,7 +110,7 @@ import States from '@site/static/usage/v9/input-otp/states/index.md'; - 英数字キーボードを表示するには、文字を含むパターンには `type="text"` を使用します。 ::: -import Pattern from '@site/static/usage/v9/input-otp/pattern/index.md'; +import Pattern from '@site/static/usage/v9/input-otp/pattern/index.mdx'; @@ -124,7 +124,7 @@ import Pattern from '@site/static/usage/v9/input-otp/pattern/index.md'; The `color` property does *not* change the text color of the input OTP. For that, use the [`--color` CSS property](#css-custom-properties-1). ::: -import Colors from '@site/static/usage/v9/input-otp/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/input-otp/theming/colors/index.mdx'; @@ -132,7 +132,7 @@ import Colors from '@site/static/usage/v9/input-otp/theming/colors/index.md'; Input OTPはスコープされたカプセル化を使用しています。これは、実行時に各スタイルに追加のクラスを追加することで、CSSを自動的にスコープすることを意味します。CSSでスコープされたセレクタをオーバーライドするには、[より高い特異性](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。そのため、クラスを追加してカスタマイズすることをお勧めします。特定のスタイルが `fill` に基づいて適用されるため、`fill` のプロパティを個別にオーバーライドする必要があるかもしれません。 -import CSSProps from '@site/static/usage/v9/input-otp/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/input-otp/theming/css-properties/index.mdx'; diff --git a/docs/api/input-password-toggle.md b/docs/api/input-password-toggle.md index 51dbf429302..28dbcaf0f8f 100644 --- a/docs/api/input-password-toggle.md +++ b/docs/api/input-password-toggle.md @@ -29,7 +29,7 @@ Using any other `type` will cause a warning to be logged. ::: -import Basic from '@site/static/usage/v9/input-password-toggle/basic/index.md'; +import Basic from '@site/static/usage/v9/input-password-toggle/basic/index.mdx'; diff --git a/docs/api/input.md b/docs/api/input.md index d6483a4571c..029ff84aa02 100644 --- a/docs/api/input.md +++ b/docs/api/input.md @@ -21,7 +21,7 @@ input コンポーネントは、HTML input 要素のラッパーで、カスタ ## 基本的な使い方 -import Basic from '@site/static/usage/v9/input/basic/index.md'; +import Basic from '@site/static/usage/v9/input/basic/index.mdx'; @@ -29,7 +29,7 @@ import Basic from '@site/static/usage/v9/input/basic/index.md'; input コンポーネントは、`"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, `"url"` などのテキストタイプの入力のみを対象としています。また、`keyup`、`keydown`、`keypress`などの標準的なテキスト入力イベントをすべてサポートしています。デフォルトの `type` は `"text"` です。 -import Types from '@site/static/usage/v9/input/types/index.md'; +import Types from '@site/static/usage/v9/input/types/index.mdx'; @@ -45,7 +45,7 @@ import Types from '@site/static/usage/v9/input/types/index.md'; ラベルは、デフォルトでそのコンテンツの幅を占めます。 開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。 -import LabelPlacement from '@site/static/usage/v9/input/label-placement/index.md'; +import LabelPlacement from '@site/static/usage/v9/input/label-placement/index.mdx'; @@ -55,7 +55,7 @@ import LabelPlacement from '@site/static/usage/v9/input/label-placement/index.md この機能は、[Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots) のシミュレート版に依存しているため、実験的なものとみなされていることに注意してください。その結果、シミュレートされた動作はネイティブのスロットの動作と完全に一致するとは限りません。 -import LabelSlot from '@site/static/usage/v9/input/label-slot/index.md'; +import LabelSlot from '@site/static/usage/v9/input/label-slot/index.mdx'; @@ -63,7 +63,7 @@ import LabelSlot from '@site/static/usage/v9/input/label-slot/index.md'; 表示するラベルが必要ない場合でも、開発者は `aria-label` を指定する必要があります。 -import NoVisibleLabel from '@site/static/usage/v9/input/no-visible-label/index.md'; +import NoVisibleLabel from '@site/static/usage/v9/input/no-visible-label/index.mdx'; @@ -71,7 +71,7 @@ import NoVisibleLabel from '@site/static/usage/v9/input/no-visible-label/index.m Inputsには、入力の操作方法に応じて、Inputをクリアするための2つのオプションがあります。最初の方法は `clearInput` プロパティを追加することで、Inputに `value` があるときにクリアボタンを表示します。2つ目の方法は `clearOnEdit` プロパティで、入力が編集削除された後、再度入力されるとクリアされます。 `type` が `"password"` に設定されているInputは、デフォルトで `clearOnEdit` が有効になっています。 -import Clear from '@site/static/usage/v9/input/clear/index.md'; +import Clear from '@site/static/usage/v9/input/clear/index.mdx'; @@ -85,7 +85,7 @@ Filled inputs をiOSで使うためには、inputの `mode` を `md` に設定 コンポーネント間のスタイリングの競合のため、`fill`を使用する入力は`ion-item`内で使用すべきではありません。 ::: -import Fill from '@site/static/usage/v9/input/fill/index.md'; +import Fill from '@site/static/usage/v9/input/fill/index.mdx'; @@ -95,7 +95,7 @@ import Fill from '@site/static/usage/v9/input/fill/index.md'; Angularでは、これはフォームバリデーションによって自動的に行われます。JavaScript、React、Vueでは、独自のバリデーションに基づいてクラスを手動で追加する必要があります。 -import HelperError from '@site/static/usage/v9/input/helper-error/index.md'; +import HelperError from '@site/static/usage/v9/input/helper-error/index.mdx'; @@ -105,13 +105,13 @@ Input Counterは、Inputの下に表示されるテキストで、入力可能 `ion-item`の`counter`と`counterFormatter`プロパティは[Ionic 7で非推奨](/docs/api/input#using-the-modern-syntax)となり、代わりに`ion-input`で直接使用すべきです。 -import Counter from '@site/static/usage/v9/input/counter/index.md'; +import Counter from '@site/static/usage/v9/input/counter/index.mdx'; カウンター付きのInputは、Inputとカウンターの間にボーダーを追加するため、アイテムの下に追加のボーダーを追加する`ion-item`内に配置すべきではありません。`ion-padding-start`クラスを追加して、カウンターInputとアイテム内Inputを揃えることができます。 -import CounterAlignment from '@site/static/usage/v9/input/counter-alignment/index.md'; +import CounterAlignment from '@site/static/usage/v9/input/counter-alignment/index.mdx'; @@ -121,7 +121,7 @@ import CounterAlignment from '@site/static/usage/v9/input/counter-alignment/inde ステート変数に値を格納する場合、ステート変数と `ion-input` コンポーネントの値の両方を更新することを推奨します。これにより、状態変数と `ion-input` コンポーネントの値が確実に同期されます。 -import FilteringData from '@site/static/usage/v9/input/filtering/index.md'; +import FilteringData from '@site/static/usage/v9/input/filtering/index.mdx'; @@ -135,7 +135,7 @@ Maskitoを使い始めるには、ライブラリをインストールしてく npm install @maskito/core @maskito/{angular,react,vue} ``` -import Masking from '@site/static/usage/v9/input/mask/index.md'; +import Masking from '@site/static/usage/v9/input/mask/index.mdx'; @@ -157,7 +157,7 @@ Please submit bug reports with Maskito to the [Maskito Github repository](https: If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.md). This ensures that the content can be tabbed to. ::: -import StartEndSlots from '@site/static/usage/v9/input/start-end-slots/index.md'; +import StartEndSlots from '@site/static/usage/v9/input/start-end-slots/index.mdx'; @@ -171,7 +171,7 @@ import StartEndSlots from '@site/static/usage/v9/input/start-end-slots/index.md' The `color` property does *not* change the text color of the input. For that, use the [`--color` CSS property](#css-custom-properties-1). ::: -import Colors from '@site/static/usage/v9/input/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/input/theming/colors/index.mdx'; @@ -179,7 +179,7 @@ import Colors from '@site/static/usage/v9/input/theming/colors/index.md'; Inputはscoped encapsulationを採用しており、実行時に各スタイルに追加のクラスを付加することで、CSSを自動的にスコープ化します。CSSでscopedセレクタを上書きするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。そのため、クラスを追加してカスタマイズすることをお勧めします。 -import CSSProps from '@site/static/usage/v9/input/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/input/theming/css-properties/index.mdx'; diff --git a/docs/api/item-divider.md b/docs/api/item-divider.md index 20465da9c83..cd564e40a10 100644 --- a/docs/api/item-divider.md +++ b/docs/api/item-divider.md @@ -23,7 +23,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ## 基本的な使い方 -import Basic from '@site/static/usage/v9/item-divider/basic/index.md'; +import Basic from '@site/static/usage/v9/item-divider/basic/index.mdx'; @@ -32,14 +32,14 @@ import Basic from '@site/static/usage/v9/item-divider/basic/index.md'; ### 配色 -import Colors from '@site/static/usage/v9/item-divider/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/item-divider/theming/colors/index.mdx'; ## CSSカスタムプロパティ -import CSSProps from '@site/static/usage/v9/item-divider/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/item-divider/theming/css-properties/index.mdx'; diff --git a/docs/api/item-group.md b/docs/api/item-group.md index 1b0e3f88d65..a34dd4a751d 100644 --- a/docs/api/item-group.md +++ b/docs/api/item-group.md @@ -20,13 +20,13 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ## 基本的な使い方 -import Basic from '@site/static/usage/v9/item-group/basic/index.md'; +import Basic from '@site/static/usage/v9/item-group/basic/index.mdx'; ## Sliding Items -import SlidingItems from '@site/static/usage/v9/item-group/sliding-items/index.md'; +import SlidingItems from '@site/static/usage/v9/item-group/sliding-items/index.mdx'; diff --git a/docs/api/item-sliding.md b/docs/api/item-sliding.md index f5f3407e16e..f7a01efa359 100644 --- a/docs/api/item-sliding.md +++ b/docs/api/item-sliding.md @@ -23,7 +23,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; スライドアイテムのオプションは、デフォルトではアイテムの `"end"` 側に配置されます。つまり、LTRでは右から左へ、RTLでは左から右へスワイプすると、オプションが表示されます。反対側に配置し、反対方向にスワイプしたときに表示されるようにするには、 [item options](./item-options) 要素の side 属性を `"start"` に設定します。アイテムオプションは最大2つまで同時に使用することができ、スワイプの方向によって2つの異なるオプションを表示させることができます。 -import Basic from '@site/static/usage/v9/item-sliding/basic/index.md'; +import Basic from '@site/static/usage/v9/item-sliding/basic/index.mdx'; @@ -32,7 +32,7 @@ import Basic from '@site/static/usage/v9/item-sliding/basic/index.md'; [アイテムオプション](./item-option) でアイコンをテキストと一緒に配置すると、デフォルトでテキストの上にアイコンを表示します。アイコンのスロットは、利用可能な [アイテムオプションスロット](./item-option#slots) に変更することで位置を変更することが可能です。 -import Icons from '@site/static/usage/v9/item-sliding/icons/index.md'; +import Icons from '@site/static/usage/v9/item-sliding/icons/index.mdx'; @@ -41,7 +41,7 @@ import Icons from '@site/static/usage/v9/item-sliding/icons/index.md'; オプションは、スワイプがあるポイントを超えると、親となる `ion-item` の幅いっぱいに展開されます。これは、[item options](./item-options) の `ionSwipe` イベントと組み合わせることで、アイテムが完全にスワイプされたときにメソッドを呼び出すことができます。 -import Expandable from '@site/static/usage/v9/item-sliding/expandable/index.md'; +import Expandable from '@site/static/usage/v9/item-sliding/expandable/index.mdx'; diff --git a/docs/api/item.md b/docs/api/item.md index 2eb4d40a156..18bf43c0c58 100644 --- a/docs/api/item.md +++ b/docs/api/item.md @@ -29,7 +29,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; アイテムはテキストを左揃えにし、テキストがアイテムより広い場合は折り返されます。この動作は、Ionic Frameworkが提供するCSSユーティリティを使用して変更することができます。以下の例では`.ion-text-nowrap`を使用しています。アイテム内のテキストを変換するために追加できる他のクラスについては、[CSSユーティリティのドキュメント](/docs/layout/css-utilities)を参照してください。 -import Basic from '@site/static/usage/v9/item/basic/index.md'; +import Basic from '@site/static/usage/v9/item/basic/index.mdx'; @@ -54,7 +54,7 @@ import Basic from '@site/static/usage/v9/item/basic/index.md'; 下の例では、ビジュアルをサポートする2つのリストを作成しています。最初のリストはアイコンを使い、2番目のリストはアバターを使います。ビジュアルは装飾的なものなので、すべて `aria-hidden="true"` を指定しています。さらに、これらは `start` スロットで一貫して表示されます。 -import SupportingVisuals from '@site/static/usage/v9/item/content-types/supporting-visuals/index.md'; +import SupportingVisuals from '@site/static/usage/v9/item/content-types/supporting-visuals/index.mdx'; @@ -76,7 +76,7 @@ import SupportingVisuals from '@site/static/usage/v9/item/content-types/supporti そのリストの下には、 [Note](./note) の下に長いテキストを含むtextareaを含む別のリストがあります。textareaは、長いテキストが他のフィールドではなく、textareaに関連付けられていることを明らかにするために、それ自身のリストに配置されました。 -import Text from '@site/static/usage/v9/item/content-types/text/index.md'; +import Text from '@site/static/usage/v9/item/content-types/text/index.mdx'; @@ -104,7 +104,7 @@ import Text from '@site/static/usage/v9/item/content-types/text/index.md'; つ目のリストは、iOSのメールアプリを真似て受信トレイを表示しています。このリストでは、"開始"スロットに "未読メッセージ"インジケータ、"終了"スロットにタイムスタンプとカスタム詳細アイコンを含むカスタムメタデータを使用しています。"未読メッセージ"インジケータは、未読メッセージにユーザーの注意を引くために青くハイライトされ、タイムスタンプはより控えめです。 -import Metadata from '@site/static/usage/v9/item/content-types/metadata/index.md'; +import Metadata from '@site/static/usage/v9/item/content-types/metadata/index.mdx'; @@ -124,7 +124,7 @@ import Metadata from '@site/static/usage/v9/item/content-types/metadata/index.md 下の例では、連絡先のリストを作成しています。各項目は、その項目の完全な連絡先ページに移動するためのスタブボタンです。各項目には、ユーザーが項目をスワイプすることで表示できる追加アクションがあります。 -import Actions from '@site/static/usage/v9/item/content-types/actions/index.md'; +import Actions from '@site/static/usage/v9/item/content-types/actions/index.mdx'; @@ -158,7 +158,7 @@ import Actions from '@site/static/usage/v9/item/content-types/actions/index.md'; 以下の例では、ToDoタスクのリストを作成しています。それぞれの項目にはチェックボックスと入力があります。チェックボックスはユーザーがタスクを完了としてマークできるようにし、入力はユーザーがタスクの名前を変更できるようにします。 -import Controls from '@site/static/usage/v9/item/content-types/controls/index.md'; +import Controls from '@site/static/usage/v9/item/content-types/controls/index.mdx'; @@ -167,7 +167,7 @@ import Controls from '@site/static/usage/v9/item/content-types/controls/index.md `href`、`button`、`routerLink` のいずれかのプロパティが設定されている場合、item は「clickable（クリック可能）」と見なされます。clickable な item には、操作可能であることを示す視覚的な違いがいくつかあります。例えば、`md` mode では操作時に ripple エフェクトが適用され、`ios` mode では操作時にハイライトされ、デフォルトで [detail arrow](#detail-arrows) が表示されます。 -import Clickable from '@site/static/usage/v9/item/clickable/index.md'; +import Clickable from '@site/static/usage/v9/item/clickable/index.mdx'; @@ -278,7 +278,7 @@ Vue では、`ion-item` に `router-link` 属性を使用します。遷移を デフォルトでは、[clickableなitems](/#clickable-items) は、`ios` modeで右矢印アイコンを表示します。clickableな要素の右矢印アイコンを非表示にするには、 `detail` プロパティを `false` に設定します。自動的に表示されない項目に右矢印アイコンを表示するには、`detail`プロパティを `true` に設定します。 -import DetailArrows from '@site/static/usage/v9/item/detail-arrows/index.md'; +import DetailArrows from '@site/static/usage/v9/item/detail-arrows/index.mdx'; @@ -286,7 +286,7 @@ import DetailArrows from '@site/static/usage/v9/item/detail-arrows/index.md'; アイテムはデフォルトで下部のボーダーを挿入して表示します。ボーダーは左側にパディングを持ち、 `"start"` スロットにスロットされたコンテンツの下に表示されることはありません。 `lines` プロパティを `"full"` または `"none"` に変更すると、それぞれ全幅のボーダーが表示され、ボーダーを表示しないようになります。 -import Lines from '@site/static/usage/v9/item/lines/index.md'; +import Lines from '@site/static/usage/v9/item/lines/index.mdx'; @@ -294,13 +294,13 @@ import Lines from '@site/static/usage/v9/item/lines/index.md'; Buttonsは、アイテムの外側にあるときよりも、アイテムの内側にあるときの方が小さくスタイルされます。ボタンのサイズをアイテムの外側のボタンと同じにするには、`size`属性に`"default"`を設定します。 -import Buttons from '@site/static/usage/v9/item/buttons/index.md'; +import Buttons from '@site/static/usage/v9/item/buttons/index.mdx'; ## Item Inputs -import Inputs from '@site/static/usage/v9/item/inputs/index.md'; +import Inputs from '@site/static/usage/v9/item/inputs/index.mdx'; @@ -308,19 +308,19 @@ import Inputs from '@site/static/usage/v9/item/inputs/index.md'; ### Colors -import Colors from '@site/static/usage/v9/item/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/item/theming/colors/index.mdx'; ### CSS Shadow Parts -import CSSParts from '@site/static/usage/v9/item/theming/css-shadow-parts/index.md'; +import CSSParts from '@site/static/usage/v9/item/theming/css-shadow-parts/index.mdx'; ## CSSカスタムプロパティ {/* #css-custom-properties */} -import CSSProps from '@site/static/usage/v9/item/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/item/theming/css-properties/index.mdx'; diff --git a/docs/api/label.md b/docs/api/label.md index d0469bf383a..22893bb6e6b 100644 --- a/docs/api/label.md +++ b/docs/api/label.md @@ -23,13 +23,13 @@ Labelは、主に[Item](./item.md)コンポーネントにテキストコンテ ## 基本的な使い方 -import Basic from '@site/static/usage/v9/label/basic/index.md'; +import Basic from '@site/static/usage/v9/label/basic/index.mdx'; ## Item Labels -import Item from '@site/static/usage/v9/label/item/index.md'; +import Item from '@site/static/usage/v9/label/item/index.mdx'; @@ -37,7 +37,7 @@ import Item from '@site/static/usage/v9/label/item/index.md'; ### Colors -import Colors from '@site/static/usage/v9/label/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/label/theming/colors/index.mdx'; diff --git a/docs/api/list-header.md b/docs/api/list-header.md index 86fb0435945..e0fc2f46ecd 100644 --- a/docs/api/list-header.md +++ b/docs/api/list-header.md @@ -17,7 +17,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ## 基本的な使い方 -import Basic from '@site/static/usage/v9/list-header/basic/index.md'; +import Basic from '@site/static/usage/v9/list-header/basic/index.mdx'; @@ -26,7 +26,7 @@ import Basic from '@site/static/usage/v9/list-header/basic/index.md'; リストのヘッダーに [button](./button) を配置すると、リストの一部を表示し、ボタンで全リストにリダイレクトするのに便利です。 -import Buttons from '@site/static/usage/v9/list-header/buttons/index.md'; +import Buttons from '@site/static/usage/v9/list-header/buttons/index.mdx'; @@ -35,7 +35,7 @@ import Buttons from '@site/static/usage/v9/list-header/buttons/index.md'; リストヘッダーは、デフォルトでは下部のボーダーが表示されません。 `lines` プロパティを `"full"` または `"inset"` に変更すると、それぞれ全幅のボーダーまたは左paddingを伴う挿入ボーダーが表示されます。 -import Lines from '@site/static/usage/v9/list-header/lines/index.md'; +import Lines from '@site/static/usage/v9/list-header/lines/index.mdx'; @@ -43,13 +43,13 @@ import Lines from '@site/static/usage/v9/list-header/lines/index.md'; ### Colors -import Colors from '@site/static/usage/v9/list-header/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/list-header/theming/colors/index.mdx'; ## CSSカスタムプロパティ -import CSSProps from '@site/static/usage/v9/list-header/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/list-header/theming/css-properties/index.mdx'; diff --git a/docs/api/list.md b/docs/api/list.md index f373d6a267f..f3e3a0a5703 100644 --- a/docs/api/list.md +++ b/docs/api/list.md @@ -23,7 +23,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ## 基本的な使い方 -import Basic from '@site/static/usage/v9/list/basic/index.md'; +import Basic from '@site/static/usage/v9/list/basic/index.mdx'; @@ -32,7 +32,7 @@ import Basic from '@site/static/usage/v9/list/basic/index.md'; リストに `inset` プロパティを追加すると、リストの周囲にマージンが適用されます。また、`ios`モードでは、リストに角丸が追加されます。 -import Inset from '@site/static/usage/v9/list/inset/index.md'; +import Inset from '@site/static/usage/v9/list/inset/index.mdx'; @@ -41,7 +41,7 @@ import Inset from '@site/static/usage/v9/list/inset/index.md'; リストに `lines` プロパティを追加すると、リスト内のすべてのアイテムの下側のボーダーを調整することができます。 `"full"`に設定すると全幅のボーダーが表示され、`"inset"`に設定すると左paddingで調整されたボーダーが表示され、`none"`に設定するとボーダーが表示されません。リスト内のアイテムに `lines` プロパティが設定されている場合は、リスト上のプロパティよりもそちらが優先されます。 -import Lines from '@site/static/usage/v9/list/lines/index.md'; +import Lines from '@site/static/usage/v9/list/lines/index.mdx'; diff --git a/docs/api/loading.md b/docs/api/loading.md index 11a18dc2003..86534304621 100644 --- a/docs/api/loading.md +++ b/docs/api/loading.md @@ -28,13 +28,13 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ### インラインロード (推奨) -import Inline from '@site/static/usage/v9/loading/inline/index.md'; +import Inline from '@site/static/usage/v9/loading/inline/index.mdx'; ### Controller -import Controller from '@site/static/usage/v9/loading/controller/index.md'; +import Controller from '@site/static/usage/v9/loading/controller/index.mdx'; @@ -44,7 +44,7 @@ import Controller from '@site/static/usage/v9/loading/controller/index.md'; 使用するスピナーは `spinner` プロパティでカスタマイズできます。すべてのオプションについては、[`spinner` プロパティのドキュメント](#prop-spinner)を参照してください。 -import Spinners from '@site/static/usage/v9/loading/spinners/index.md'; +import Spinners from '@site/static/usage/v9/loading/spinners/index.mdx'; @@ -54,7 +54,7 @@ Loading は scoped encapsulation を使用しています。これは、実行 カスタムクラスを渡して、それを使ってホストと内部要素にカスタムスタイルを追加することをお勧めします。 -import Theming from '@site/static/usage/v9/loading/theming/index.md'; +import Theming from '@site/static/usage/v9/loading/theming/index.mdx'; diff --git a/docs/api/menu.md b/docs/api/menu.md index baa117a9668..1d33c3ecd17 100644 --- a/docs/api/menu.md +++ b/docs/api/menu.md @@ -23,7 +23,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ## 基本的な使い方 -import Basic from '@site/static/usage/v9/menu/basic/index.md'; +import Basic from '@site/static/usage/v9/menu/basic/index.mdx'; @@ -31,7 +31,7 @@ import Basic from '@site/static/usage/v9/menu/basic/index.md'; [menu toggle](./menu-toggle) コンポーネントを使用して、メニューを開いたり閉じたりするカスタムボタンを作成することができます。 -import MenuToggle from '@site/static/usage/v9/menu/toggle/index.md'; +import MenuToggle from '@site/static/usage/v9/menu/toggle/index.mdx'; @@ -39,7 +39,7 @@ import MenuToggle from '@site/static/usage/v9/menu/toggle/index.md'; `type`プロパティは、アプリケーションでのメニューの表示方法をカスタマイズするために使用することができます。 -import MenuType from '@site/static/usage/v9/menu/type/index.md'; +import MenuType from '@site/static/usage/v9/menu/type/index.mdx'; @@ -49,7 +49,7 @@ import MenuType from '@site/static/usage/v9/menu/type/index.md'; アプリで両側にメニューが必要な場合は、`side`の値を`MenuController`の`open`メソッドに渡すことでメニューを開くことができます。サイドが指定されていない場合、`"start"`側のメニューが開きます。`MenuController`を使用した例については、以下の[複数のメニュー](#multiple-menus)セクションを参照してください。 -import Sides from '@site/static/usage/v9/menu/sides/index.md'; +import Sides from '@site/static/usage/v9/menu/sides/index.mdx'; @@ -57,7 +57,7 @@ import Sides from '@site/static/usage/v9/menu/sides/index.md'; 同じサイドに複数のメニューが存在する場合、サイドではなくIDで参照する必要があります。そうしないと、間違ったメニューがアクティブになる可能性がある。 -import Multiple from '@site/static/usage/v9/menu/multiple/index.md'; +import Multiple from '@site/static/usage/v9/menu/multiple/index.mdx'; @@ -65,7 +65,7 @@ import Multiple from '@site/static/usage/v9/menu/multiple/index.md'; ### CSS Shadow Parts -import Theming from '@site/static/usage/v9/menu/theming/index.md'; +import Theming from '@site/static/usage/v9/menu/theming/index.mdx'; diff --git a/docs/api/modal.md b/docs/api/modal.md index d3a8985cdec..1ec71f76325 100644 --- a/docs/api/modal.md +++ b/docs/api/modal.md @@ -27,7 +27,7 @@ Modalは、アプリのコンテンツの上に表示されるダイアログで Angular、React、Vue で `ion-modal` を使用する場合、渡されたコンポーネントはモーダルが解除されると破棄されます。この機能は JavaScript フレームワークによって提供されるので、JavaScript フレームワークなしで `ion-modal` を使用しても、渡されたコンポーネントは破棄されません。この機能が必要な場合は、代わりに `modalController` を使用することをお勧めします。 -import InlineModalTriggerExample from '@site/static/usage/v9/modal/inline/basic/index.md'; +import InlineModalTriggerExample from '@site/static/usage/v9/modal/inline/basic/index.mdx'; @@ -37,7 +37,7 @@ import InlineModalTriggerExample from '@site/static/usage/v9/modal/inline/basic/ `isOpen` は一方向のデータバインディングを使用します。つまり、モーダルが解除されたときに自動的に `false` にセットされることはありません。開発者は `ionModalDidDismiss` または `didDismiss` イベントを監視して、 `isOpen` を `false` に設定する必要があります。この理由は、`ion-modal` の内部がアプリケーションの状態と密に結合するのを防ぐためである。一方通行のデータバインディングでは、モーダルはリアクティブ変数が提供するboolean値だけを気にすればいいです。双方向のデータバインディングでは、モーダルはboolean値とリアクティブ変数の存在の両方を考慮する必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にします。 -import InlineModalIsOpenExample from '@site/static/usage/v9/modal/inline/is-open/index.md'; +import InlineModalIsOpenExample from '@site/static/usage/v9/modal/inline/is-open/index.mdx'; @@ -45,7 +45,7 @@ import InlineModalIsOpenExample from '@site/static/usage/v9/modal/inline/is-open `ModalController` を使用すると、開発者はプログラムによって `ion-modal` を表示させることができます。開発者は、モーダルの表示と非表示を完全に制御することができます。 -import ControllerExample from '@site/static/usage/v9/modal/controller/index.md'; +import ControllerExample from '@site/static/usage/v9/modal/controller/index.mdx'; @@ -65,7 +65,7 @@ canDismiss`プロパティの使用方法には、boolean値の設定とコー boolean値を設定するのは、モーダルが終了する前に特定のアクションを実行する必要がある場合に使用する必要があります。たとえば、開発者がモーダルを閉じる前に "利用規約" チェックボックスをチェックすることを要求したい場合、最初は `canDismiss` を `false` に設定し、チェックボックスがチェックされたら `true` に更新することが可能です。 -import CanDismissBooleanExample from '@site/static/usage/v9/modal/can-dismiss/boolean/index.md'; +import CanDismissBooleanExample from '@site/static/usage/v9/modal/can-dismiss/boolean/index.mdx'; @@ -77,7 +77,7 @@ import CanDismissBooleanExample from '@site/static/usage/v9/modal/can-dismiss/bo コールバック関数を設定すると、カードまたはシートモーダルの使用時にスワイプジェスチャが中断されることに注意してください。これは、Ionicが、あなたのコールバック関数が何を解決するか事前に知らないためです。 -import CanDismissFunctionExample from '@site/static/usage/v9/modal/can-dismiss/function/index.md'; +import CanDismissFunctionExample from '@site/static/usage/v9/modal/can-dismiss/function/index.mdx'; @@ -85,7 +85,7 @@ import CanDismissFunctionExample from '@site/static/usage/v9/modal/can-dismiss/f 開発者は、ユーザがスワイプしてカードやシートのモーダルを閉じないようにしたい場合があります。これは `canDismiss` にコールバック関数を設定し、`role` が `gesture` でないかチェックすることで実現できます。 -import CanDismissPreventSwipeToCloseExample from '@site/static/usage/v9/modal/can-dismiss/prevent-swipe-to-close/index.md'; +import CanDismissPreventSwipeToCloseExample from '@site/static/usage/v9/modal/can-dismiss/prevent-swipe-to-close/index.mdx'; @@ -97,7 +97,7 @@ import CanDismissPreventSwipeToCloseExample from '@site/static/usage/v9/modal/ca 以下は、子コンポーネントが親コンポーネントとどのように通信して `canDismiss` コールバックを変更できるかを示す簡単な例です： -import CanDismissChildStateExample from '@site/static/usage/v9/modal/can-dismiss/child-state/index.md'; +import CanDismissChildStateExample from '@site/static/usage/v9/modal/can-dismiss/child-state/index.mdx'; @@ -113,7 +113,7 @@ import CanDismissChildStateExample from '@site/static/usage/v9/modal/can-dismiss The card display style is only available on iOS. ::: -import CardExample from '@site/static/usage/v9/modal/card/basic/index.md'; +import CardExample from '@site/static/usage/v9/modal/card/basic/index.mdx'; @@ -131,13 +131,13 @@ import CardExample from '@site/static/usage/v9/modal/card/basic/index.md'; `backdropBreakpoint` プロパティは、 `ion-backdrop` がフェードインし始めるポイントをカスタマイズするために使用することができます。これは、シートの下にインタラクティブなコンテンツがあるようなインタフェースを作成する際に便利です。よくある使用例としては、シートが完全に展開されるまでマップがインタラクティブになるような、マップをオーバーレイするシートモーダルです。 -import SheetExample from '@site/static/usage/v9/modal/sheet/basic/index.md'; +import SheetExample from '@site/static/usage/v9/modal/sheet/basic/index.mdx'; ### 背景コンテンツとのインタラクション -import SheetBackgroundContentExample from '@site/static/usage/v9/modal/sheet/background-content/index.md'; +import SheetBackgroundContentExample from '@site/static/usage/v9/modal/sheet/background-content/index.mdx'; @@ -147,7 +147,7 @@ import SheetBackgroundContentExample from '@site/static/usage/v9/modal/sheet/bac 次の例は、コンテンツに基づいて自動的にサイズ調整されるシートモーダルを取得する方法を示しています。最大ブレークポイントを`1`に保つことで、モーダル全体がビューポート内でアクセス可能であることを保証することに注意してください。 -import SheetAutoHeightExample from '@site/static/usage/v9/modal/sheet/auto-height/index.md'; +import SheetAutoHeightExample from '@site/static/usage/v9/modal/sheet/auto-height/index.mdx'; @@ -155,7 +155,7 @@ import SheetAutoHeightExample from '@site/static/usage/v9/modal/sheet/auto-heigh シートモーダルでは、ブレークポイント間でシートをドラッグするために使用されるハンドルインジケータをオプションでレンダリングすることができます。 `handleBehavior` プロパティは、ハンドルがユーザーによってアクティブにされたときの振る舞いを設定するために使用されます。 -import SheetHandleBehaviorExample from '@site/static/usage/v9/modal/sheet/handle-behavior/index.md'; +import SheetHandleBehaviorExample from '@site/static/usage/v9/modal/sheet/handle-behavior/index.mdx'; @@ -163,7 +163,7 @@ import SheetHandleBehaviorExample from '@site/static/usage/v9/modal/sheet/handle シートモーダルは、すべてのブレークポイントでコンテンツのスクロールを許可するように設定でき、ビューポートより大きいコンテンツを表示するのに理想的です。`expandToScroll`プロパティを`false`に設定すると、コンテンツはすべてのブレークポイントでスクロール可能なままです。それ以外の場合、デフォルトでは、シートモーダルが完全に展開されている場合にのみスクロールが有効になります。 -import SheetScrollingContentExample from '@site/static/usage/v9/modal/sheet/expand-to-scroll/index.md'; +import SheetScrollingContentExample from '@site/static/usage/v9/modal/sheet/expand-to-scroll/index.mdx'; @@ -187,7 +187,7 @@ ion-modal.stack-modal { } ``` -import ThemeExample from '@site/static/usage/v9/modal/styling/theming/index.md'; +import ThemeExample from '@site/static/usage/v9/modal/styling/theming/index.mdx'; @@ -195,7 +195,7 @@ import ThemeExample from '@site/static/usage/v9/modal/styling/theming/index.md'; アニメーションビルダーを使用し、`enterAnimation` と `leaveAnimation` にアニメーションを割り当てることで、表示時、非表示時のアニメーションをカスタマイズすることができます。 -import AnimationsExample from '@site/static/usage/v9/modal/styling/animations/index.md'; +import AnimationsExample from '@site/static/usage/v9/modal/styling/animations/index.mdx'; @@ -203,7 +203,7 @@ import AnimationsExample from '@site/static/usage/v9/modal/styling/animations/in `ion-modal`は、フルページビュー、カード、シートに使用されることが多いですが、カスタムダイアログに使用することも可能です。これは、[ion-alert](./alert)や[ion-loading](./loading)などのコンポーネントが提供するものより複雑なインターフェースを必要とする開発者に便利です。 -import CustomDialogs from '@site/static/usage/v9/modal/custom-dialogs/index.md'; +import CustomDialogs from '@site/static/usage/v9/modal/custom-dialogs/index.mdx'; @@ -220,7 +220,7 @@ The `ionDragStart` event is emitted as soon as the user begins a dragging gestur The `ionDragEnd` event is emitted when the user completes the dragging gesture by releasing the modal. Like the move event, it includes the final [`ModalDragEventDetail`](#modaldrageventdetail) object. This event is commonly used to finalize state changes once the modal has come to a rest. -import DragStartEndEvents from '@site/static/usage/v9/modal/drag-start-end-events/index.md'; +import DragStartEndEvents from '@site/static/usage/v9/modal/drag-start-end-events/index.mdx'; @@ -228,7 +228,7 @@ import DragStartEndEvents from '@site/static/usage/v9/modal/drag-start-end-event The `ionDragMove` event is emitted continuously while the user is actively dragging the modal. This event provides a [`ModalDragEventDetail`](#modaldrageventdetail) object containing real-time data, essential for creating highly responsive UI updates that react instantly to the user's touch. For example, the `progress` value can be used to dynamically darken a header's opacity as the modal is dragged upward. -import DragMoveEvent from '@site/static/usage/v9/modal/drag-move-event/index.md'; +import DragMoveEvent from '@site/static/usage/v9/modal/drag-move-event/index.mdx'; @@ -383,7 +383,7 @@ interface ModalDragEventDetail { インラインの `ion-modal` のコンテンツは、閉じられるとアンマウントされます。このコンテンツがレンダリングに時間がかかる場合、開発者は `keepContentsMounted` プロパティを使用して、モーダルがマウントされると同時にコンテンツをマウントすることができます。これにより、モーダルが開かれたときにインナー コンテンツがすでにマウントされているので、アプリケーションの応答性を最適化することができます。 -import Mount from '@site/static/usage/v9/modal/performance/mount/index.md'; +import Mount from '@site/static/usage/v9/modal/performance/mount/index.mdx'; diff --git a/docs/api/nav.md b/docs/api/nav.md index d5132e29be8..62bdaef30c2 100644 --- a/docs/api/nav.md +++ b/docs/api/nav.md @@ -29,7 +29,7 @@ Router Outletとは異なり、Navは特定のルーターに縛られること NavLinkは、Navと対話する際の簡素化されたAPIです。開発者はコンポーネントをカスタマイズしたり、コンポーネントのプロパティを渡したり、ルートアニメーションの方向を変更したり、ナビゲート時のカスタムアニメーションを定義したりすることができます。 -import NavLinkExample from '@site/static/usage/v9/nav/nav-link/index.md'; +import NavLinkExample from '@site/static/usage/v9/nav/nav-link/index.mdx'; @@ -43,7 +43,7 @@ Modal can use Nav to offer a linear navigation that is independent of the URL. ::: -import ModalNavigationExample from '@site/static/usage/v9/nav/modal-navigation/index.md'; +import ModalNavigationExample from '@site/static/usage/v9/nav/modal-navigation/index.mdx'; diff --git a/docs/api/note.md b/docs/api/note.md index 08fae91844a..8c51ba292c0 100644 --- a/docs/api/note.md +++ b/docs/api/note.md @@ -21,13 +21,13 @@ Noteは、一般的に詳細情報を提供するサブタイトルとして使 ## 基本的な使い方 -import Basic from '@site/static/usage/v9/note/basic/index.md'; +import Basic from '@site/static/usage/v9/note/basic/index.mdx'; ## Item Notes -import Item from '@site/static/usage/v9/note/item/index.md'; +import Item from '@site/static/usage/v9/note/item/index.mdx'; @@ -35,13 +35,13 @@ import Item from '@site/static/usage/v9/note/item/index.md'; ### Colors -import Colors from '@site/static/usage/v9/note/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/note/theming/colors/index.mdx'; ## CSSカスタムプロパティ -import CSSProps from '@site/static/usage/v9/note/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/note/theming/css-properties/index.mdx'; diff --git a/docs/api/picker.md b/docs/api/picker.md index cd275a18392..69efea654f6 100644 --- a/docs/api/picker.md +++ b/docs/api/picker.md @@ -19,7 +19,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ピッカーは、ユーザーが選択できるオプションを持つ1つまたは複数の列を表示します。 -import Basic from '@site/static/usage/v9/picker/basic/index.md'; +import Basic from '@site/static/usage/v9/picker/basic/index.mdx'; @@ -27,7 +27,7 @@ import Basic from '@site/static/usage/v9/picker/basic/index.md'; `prefix` スロットと `suffix` スロットを使用して、ピッカーに追加コンテンツを追加します。 -import PrefixSuffix from '@site/static/usage/v9/picker/prefix-suffix/index.md'; +import PrefixSuffix from '@site/static/usage/v9/picker/prefix-suffix/index.mdx'; @@ -37,7 +37,7 @@ import PrefixSuffix from '@site/static/usage/v9/picker/prefix-suffix/index.md'; ピッカーのハイライトとフェードは `ion-picker` の CSS 変数を使ってカスタマイズできる。開発者は、`ion-picker-column-options` を直接ターゲットにして、ホストレベルのスタイリングを使用することで、個々の外観をカスタマイズすることができます。 -import CSSProps from '@site/static/usage/v9/picker/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/picker/theming/css-properties/index.mdx'; @@ -45,7 +45,7 @@ import CSSProps from '@site/static/usage/v9/picker/theming/css-properties/index. ピッカーは`ion-modal`のようなオーバーレイの中に表示することができ、確認ボタンやキャンセルボタンを使ってピッカー体験を作り出すことができる。 -import ModalExample from '@site/static/usage/v9/picker/modal/index.md'; +import ModalExample from '@site/static/usage/v9/picker/modal/index.mdx'; diff --git a/docs/api/popover.md b/docs/api/popover.md index 6d7df60b305..7566babef11 100644 --- a/docs/api/popover.md +++ b/docs/api/popover.md @@ -53,7 +53,7 @@ Angular、React、Vue で `ion-popover` を使用する場合、渡されたコ `popoverController` を使用する場合、`ion-popover` は前もって作成されないので、トリガーは適用されません。 ::: -import InlineTrigger from '@site/static/usage/v9/popover/presenting/inline-trigger/index.md'; +import InlineTrigger from '@site/static/usage/v9/popover/presenting/inline-trigger/index.mdx'; @@ -63,7 +63,7 @@ import InlineTrigger from '@site/static/usage/v9/popover/presenting/inline-trigg `isOpen` は一方向のデータバインディングを使用しています。つまり、ポップオーバーが閉じられたときに自動的に `false` に設定されることはありません。開発者は `ionPopoverDidDismiss` または `didDismiss` イベントをリッスンして `isOpen` を `false` にセットする必要があります。この理由は、`ion-popover` の内部がアプリケーションの状態と密に結合されるのを防ぐためである。一方通行のデータバインディングでは、ポップオーバーはリアクティブ変数が提供するブーリアン値だけを気にすればよいのです。双方向のデータバインディングでは、ポップオーバーはブール値とリアクティブ変数の存在の両方に関心を持つ必要があります。これは非決定的な動作につながり、アプリケーションのデバッグを難しくします。 -import IsOpenTrigger from '@site/static/usage/v9/popover/presenting/inline-isopen/index.md'; +import IsOpenTrigger from '@site/static/usage/v9/popover/presenting/inline-isopen/index.mdx'; @@ -81,7 +81,7 @@ Ionic Framework からインポートされた `popoverController` を使用す ### 使い方 -import ControllerExample from '@site/static/usage/v9/popover/presenting/controller/index.md'; +import ControllerExample from '@site/static/usage/v9/popover/presenting/controller/index.mdx'; @@ -93,7 +93,7 @@ import ControllerExample from '@site/static/usage/v9/popover/presenting/controll If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. ::: -import Styling from '@site/static/usage/v9/popover/customization/styling/index.md'; +import Styling from '@site/static/usage/v9/popover/customization/styling/index.mdx'; @@ -113,7 +113,7 @@ import Styling from '@site/static/usage/v9/popover/customization/styling/index.m ### Side and Alignment Demo -import Positioning from '@site/static/usage/v9/popover/customization/positioning/index.md'; +import Positioning from '@site/static/usage/v9/popover/customization/positioning/index.mdx'; @@ -127,7 +127,7 @@ import Positioning from '@site/static/usage/v9/popover/customization/positioning `popoverController`を使用している場合、`event`オプションでイベントを指定する必要があり、Ionic Frameworkは`event.target`を参照要素として使用します。このパターンの例については、[controllerデモ](#controller-popovers)を参照してください。 -import Sizing from '@site/static/usage/v9/popover/customization/sizing/index.md'; +import Sizing from '@site/static/usage/v9/popover/customization/sizing/index.mdx'; @@ -141,7 +141,7 @@ import Sizing from '@site/static/usage/v9/popover/customization/sizing/index.md' `popoverController` を使用する場合、ネストしたポップオーバーは作成できません。なぜなら、ポップオーバーは `create` メソッドが呼ばれたときに、自動的にアプリケーションのルートに追加されるからです。 ::: -import NestedPopover from '@site/static/usage/v9/popover/nested/index.md'; +import NestedPopover from '@site/static/usage/v9/popover/nested/index.mdx'; @@ -219,7 +219,7 @@ type PositionAlign = 'start' | 'center' | 'end'; インライン `ion-popover` のコンテンツは、閉じるとマウントされなくなります。このコンテンツのレンダリングにコストがかかる場合、開発者は `keepContentsMounted` プロパティを使用して、ポップオーバーがマウントされると同時にコンテンツをマウントすることができます。これにより、ポップオーバーが開いたときに内部コンテンツがすでにマウントされているため、アプリケーションの応答性を最適化することができます。 -import Mount from '@site/static/usage/v9/popover/performance/mount/index.md'; +import Mount from '@site/static/usage/v9/popover/performance/mount/index.mdx'; diff --git a/docs/api/progress-bar.md b/docs/api/progress-bar.md index 6e6a9163c41..82e4cbf2e35 100644 --- a/docs/api/progress-bar.md +++ b/docs/api/progress-bar.md @@ -24,7 +24,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; Determinateはデフォルトのタイプです。操作のパーセンテージがわかっている場合に使用されるべきです。進行状況は `value` プロパティを設定することで表現されます。これは、進捗が0から100%まで増加するように表示するために使用できます。 -import Determinate from '@site/static/usage/v9/progress-bar/determinate/index.md'; +import Determinate from '@site/static/usage/v9/progress-bar/determinate/index.mdx'; @@ -32,7 +32,7 @@ import Determinate from '@site/static/usage/v9/progress-bar/determinate/index.md `buffer`プロパティが設定されている場合、バッファーストリームがアニメーションの円と共に表示され、アクティビティを示します。また、`buffer`プロパティの値は、目に見えるトラックの量によって表されます。もし `buffer` の値が `value` プロパティより小さければ、目に見えるトラックはありません。もし `buffer` が `1` に等しければ、バッファースリームは隠されます。 -import Buffer from '@site/static/usage/v9/progress-bar/buffer/index.md'; +import Buffer from '@site/static/usage/v9/progress-bar/buffer/index.mdx'; @@ -41,7 +41,7 @@ import Buffer from '@site/static/usage/v9/progress-bar/buffer/index.md'; Indeterminateタイプは、処理にかかる時間が不明な場合に使用します。プログレスバーは `value` と連動しておらず、処理が完了するまでトラックに沿ってスライドしつづけます。 -import Indeterminate from '@site/static/usage/v9/progress-bar/indeterminate/index.md'; +import Indeterminate from '@site/static/usage/v9/progress-bar/indeterminate/index.mdx'; @@ -49,7 +49,7 @@ import Indeterminate from '@site/static/usage/v9/progress-bar/indeterminate/inde ## Progress Bars in Toolbars {/* Reuse the playground from the Toolbar directory */} -import Toolbar from '@site/static/usage/v9/toolbar/progress-bars/index.md'; +import Toolbar from '@site/static/usage/v9/toolbar/progress-bars/index.mdx'; @@ -58,21 +58,21 @@ import Toolbar from '@site/static/usage/v9/toolbar/progress-bars/index.md'; ### Colors -import Colors from '@site/static/usage/v9/progress-bar/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/progress-bar/theming/colors/index.mdx'; ## CSSカスタムプロパティ -import CSSProps from '@site/static/usage/v9/progress-bar/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/progress-bar/theming/css-properties/index.mdx'; ### CSS Shadow Parts -import CSSParts from '@site/static/usage/v9/progress-bar/theming/css-shadow-parts/index.md'; +import CSSParts from '@site/static/usage/v9/progress-bar/theming/css-shadow-parts/index.mdx'; diff --git a/docs/api/radio.md b/docs/api/radio.md index 8e0bfaef2fc..a8f533ad4d2 100644 --- a/docs/api/radio.md +++ b/docs/api/radio.md @@ -24,7 +24,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ## 基本的な使い方 -import Basic from '@site/static/usage/v9/radio/basic/index.md'; +import Basic from '@site/static/usage/v9/radio/basic/index.mdx'; @@ -32,7 +32,7 @@ import Basic from '@site/static/usage/v9/radio/basic/index.md'; 開発者は `labelPlacement` プロパティを使用して、ラベルをコントロールに対してどのように配置するかを制御できます。 このプロパティはフレックスボックスの `flex-direction` プロパティを反映しています。 -import LabelPlacement from '@site/static/usage/v9/radio/label-placement/index.md'; +import LabelPlacement from '@site/static/usage/v9/radio/label-placement/index.mdx'; @@ -40,7 +40,7 @@ import LabelPlacement from '@site/static/usage/v9/radio/label-placement/index.md ラベルの配置に関係なく、長いテキストはデフォルトで折り返されません。ラジオの幅が制約されている場合、オーバーフローしたテキストは省略記号で切り詰められます。ラジオテキストの周りのラッパーに`ion-text-wrap`クラスを追加するか、`::part()`セレクタを使用して`label`シャドウパーツをスタイリングすることで、テキストの折り返しを有効にできます。 -import LabelWrap from '@site/static/usage/v9/radio/label-wrap/index.md'; +import LabelWrap from '@site/static/usage/v9/radio/label-wrap/index.mdx'; @@ -48,7 +48,7 @@ import LabelWrap from '@site/static/usage/v9/radio/label-wrap/index.md'; By default, the radio group uses strict equality (`===`) to determine if an option is selected. This can be overridden by providing a property name or a function to the `compareWith` property. -import UsingComparewith from '@site/static/usage/v9/radio/using-comparewith/index.md'; +import UsingComparewith from '@site/static/usage/v9/radio/using-comparewith/index.mdx'; @@ -60,7 +60,7 @@ import UsingComparewith from '@site/static/usage/v9/radio/using-comparewith/inde スタックされたラジオは、`alignment`プロパティを使用して配置できます。ラベルとコントロールを水平方向に中央揃えする必要がある場合に便利です。 ::: -import Alignment from '@site/static/usage/v9/radio/alignment/index.md'; +import Alignment from '@site/static/usage/v9/radio/alignment/index.mdx'; @@ -68,7 +68,7 @@ import Alignment from '@site/static/usage/v9/radio/alignment/index.md'; 開発者は `justify` プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。このプロパティはフレックスボックスの `justify-content` プロパティを反映しています。 -import Justify from '@site/static/usage/v9/radio/justify/index.md'; +import Justify from '@site/static/usage/v9/radio/justify/index.mdx'; @@ -80,7 +80,7 @@ import Justify from '@site/static/usage/v9/radio/justify/index.md'; デフォルトでは、一度選択されたラジオは選択を解除することができず、もう一度押すと選択されたままになります。この動作は、親ラジオグループの `allowEmptySelection` プロパティを使用することで変更することができ、ラジオを非選択にすることができます。 -import EmptySelection from '@site/static/usage/v9/radio/empty-selection/index.md'; +import EmptySelection from '@site/static/usage/v9/radio/empty-selection/index.mdx'; @@ -90,7 +90,7 @@ import EmptySelection from '@site/static/usage/v9/radio/empty-selection/index.md Angularでは、これはフォームバリデーションによって自動的に行われます。JavaScript、React、Vueでは、独自のバリデーションに基づいてクラスを手動で追加する必要があります。 -import HelperError from '@site/static/usage/v9/radio/helper-error/index.md'; +import HelperError from '@site/static/usage/v9/radio/helper-error/index.mdx'; @@ -99,19 +99,19 @@ import HelperError from '@site/static/usage/v9/radio/helper-error/index.md'; ### Colors -import Colors from '@site/static/usage/v9/radio/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/radio/theming/colors/index.mdx'; ## CSSカスタムプロパティ -import CSSProps from '@site/static/usage/v9/radio/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/radio/theming/css-properties/index.mdx'; ### CSS Shadow Parts -import CSSParts from '@site/static/usage/v9/radio/theming/css-shadow-parts/index.md'; +import CSSParts from '@site/static/usage/v9/radio/theming/css-shadow-parts/index.mdx'; diff --git a/docs/api/range.md b/docs/api/range.md index d072ff909ee..f9f0e714756 100644 --- a/docs/api/range.md +++ b/docs/api/range.md @@ -34,7 +34,7 @@ Rangeスライダは、スライダノブを動かして、ユーザーが値の 以下のデモでは、`labelPlacement` プロパティを使用して、範囲に対するラベルの位置を変更しています。ここでは `label` プロパティを使用しているが、`labelPlacement` は `label` スロットでも使用できます。 -import LabelsPlayground from '@site/static/usage/v9/range/labels/index.md'; +import LabelsPlayground from '@site/static/usage/v9/range/labels/index.mdx'; @@ -42,7 +42,7 @@ import LabelsPlayground from '@site/static/usage/v9/range/labels/index.md'; プレーンテキストのラベルは `label` プロパティで渡すべきであるが、カスタムHTMLが必要な場合は、代わりに `label` スロットで渡すことができます。 -import LabelSlotPlayground from '@site/static/usage/v9/range/label-slot/index.md'; +import LabelSlotPlayground from '@site/static/usage/v9/range/label-slot/index.mdx'; @@ -50,7 +50,7 @@ import LabelSlotPlayground from '@site/static/usage/v9/range/label-slot/index.md もし表示するラベルが必要ない場合でも、開発者は`aria-label`を与えるべきです。 -import NoVisibleLabel from '@site/static/usage/v9/range/no-visible-label/index.md'; +import NoVisibleLabel from '@site/static/usage/v9/range/no-visible-label/index.mdx'; @@ -60,7 +60,7 @@ import NoVisibleLabel from '@site/static/usage/v9/range/no-visible-label/index.m ドキュメントの方向性が左から右に設定されている場合、`start`位置にスロットされたコンテンツは範囲の左に表示され、`end`位置にスロットされたコンテンツは範囲の右に表示されます。右から左(rtl)の方向性の場合、`start`位置にスロットされたコンテンツは範囲の右側に表示され、`end`位置にスロットされたコンテンツは範囲の左側に表示されます。 -import DecorationsPlayground from '@site/static/usage/v9/range/slots/index.md'; +import DecorationsPlayground from '@site/static/usage/v9/range/slots/index.mdx'; @@ -68,7 +68,7 @@ import DecorationsPlayground from '@site/static/usage/v9/range/slots/index.md'; Dual knobs はユーザーが下限と上限の値を選択するために使用できる2つのknobsコントロールを導入しています。選択されると、Range は選択された上下限の値を含む [RangeValue](#rangevalue) を持つ `ionChange` イベントを発信します。 -import DualKnobs from '@site/static/usage/v9/range/dual-knobs/index.md'; +import DualKnobs from '@site/static/usage/v9/range/dual-knobs/index.mdx'; @@ -78,7 +78,7 @@ import DualKnobs from '@site/static/usage/v9/range/dual-knobs/index.md'; `pinFormatter` 関数を使用すると、開発者はユーザーに対してレンジの値のフォーマットをカスタマイズすることができます。 -import Pins from '@site/static/usage/v9/range/pins/index.md'; +import Pins from '@site/static/usage/v9/range/pins/index.mdx'; @@ -88,7 +88,7 @@ TicksはRange 上で利用可能な各値のインジケータを表示します snapsを有効にし、knobをドラッグして放すと、Range knobは最も近い利用可能な値にスナップします。 -import SnappingTicks from '@site/static/usage/v9/range/snapping-ticks/index.md'; +import SnappingTicks from '@site/static/usage/v9/range/snapping-ticks/index.mdx'; @@ -98,7 +98,7 @@ import SnappingTicks from '@site/static/usage/v9/range/snapping-ticks/index.md'; `ionChange` イベントはRange knobの値の変更を監視します。 -import IonChangeEvent from '@site/static/usage/v9/range/ion-change-event/index.md'; +import IonChangeEvent from '@site/static/usage/v9/range/ion-change-event/index.mdx'; @@ -106,7 +106,7 @@ import IonChangeEvent from '@site/static/usage/v9/range/ion-change-event/index.m マウスドラッグ、タッチジェスチャー、キーボード操作のいずれであっても、Range knobのドラッグが開始されると `ionKnobMoveStart` イベントが発行されます。逆に、`ionKnobMoveEnd`はRange knobがリリースされたときに発生します。両イベントは `RangeValue` タイプで発生し、`dualKnobs` プロパティと組み合わせて動作します。 -import IonKnobMoveEvent from '@site/static/usage/v9/range/ion-knob-move-event/index.md'; +import IonKnobMoveEvent from '@site/static/usage/v9/range/ion-knob-move-event/index.mdx'; @@ -116,7 +116,7 @@ import IonKnobMoveEvent from '@site/static/usage/v9/range/ion-knob-move-event/in Rangeには、アプリケーションのデザインに合わせてRangeコンポーネントの外観を素早くテーマ化してカスタマイズするための[CSS Variables](#css-custom-properties)が含まれています。 -import CSSProps from '@site/static/usage/v9/range/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/range/theming/css-properties/index.mdx'; @@ -126,7 +126,7 @@ Rangeには [CSS Shadow Parts](#css-shadow-parts) があり、Rangeコンポー When `dualKnobs` is enabled, additional Shadow Parts are exposed to allow each knob to be styled independently. These are available in two forms: **static identity parts** (`A` and `B`) and **dynamic position parts** (`lower` and `upper`). The A and B parts always refer to the same physical knobs, even if the knobs cross. In contrast, the lower and upper parts reflect the current value position and automatically swap if the knobs cross. This allows styling by consistent identity or by relative value within the range. -import CSSParts from '@site/static/usage/v9/range/theming/css-shadow-parts/index.md'; +import CSSParts from '@site/static/usage/v9/range/theming/css-shadow-parts/index.mdx'; diff --git a/docs/api/refresher.md b/docs/api/refresher.md index 0b7672da8b2..14645ab8aac 100644 --- a/docs/api/refresher.md +++ b/docs/api/refresher.md @@ -21,7 +21,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ## 基本的な使い方 -import Basic from '@site/static/usage/v9/refresher/basic/index.md'; +import Basic from '@site/static/usage/v9/refresher/basic/index.mdx'; @@ -31,7 +31,7 @@ import Basic from '@site/static/usage/v9/refresher/basic/index.md'; これらのプロパティは、[native refresher](#native-refreshers)が有効な場合には適用されません。 -import PullProperties from '@site/static/usage/v9/refresher/pull-properties/index.md'; +import PullProperties from '@site/static/usage/v9/refresher/pull-properties/index.mdx'; @@ -41,7 +41,7 @@ import PullProperties from '@site/static/usage/v9/refresher/pull-properties/inde `pullingIcon`を設定すると、[native refresher](#native-refreshers)が無効になります。 -import CustomContent from '@site/static/usage/v9/refresher/custom-content/index.md'; +import CustomContent from '@site/static/usage/v9/refresher/custom-content/index.mdx'; @@ -83,7 +83,7 @@ Developers should apply the following CSS to the scrollable container. This CSS } ``` -import CustomScrollTarget from '@site/static/usage/v9/refresher/custom-scroll-target/index.md'; +import CustomScrollTarget from '@site/static/usage/v9/refresher/custom-scroll-target/index.mdx'; @@ -91,7 +91,7 @@ import CustomScrollTarget from '@site/static/usage/v9/refresher/custom-scroll-ta リフレッシャーはどのようなタイプのコンテンツでも使用できますが、ネイティブアプリでよくある使用例は、更新時に更新されるデータのリストを表示することです。以下の例では、アプリはデータのリストを生成し、更新が完了したときにリストの先頭にデータを追加します。実際のアプリでは、ネットワークまたはデータベース呼び出しによってリクエストを送信した後に、データを受信して更新します。 -import Advanced from '@site/static/usage/v9/refresher/advanced/index.md'; +import Advanced from '@site/static/usage/v9/refresher/advanced/index.mdx'; @@ -103,7 +103,7 @@ The `ionPullStart` event is emitted when the user begins a pull gesture. This ev The `ionPullEnd` event is emitted when the refresher returns to an inactive state, with a reason property of `'complete'` or `'cancel'` indicating whether the refresh operation completed successfully or was canceled. -import PullStartEndEvents from '@site/static/usage/v9/refresher/pull-start-end-events/index.md'; +import PullStartEndEvents from '@site/static/usage/v9/refresher/pull-start-end-events/index.mdx'; diff --git a/docs/api/reorder.md b/docs/api/reorder.md index 2624c0d956f..e7220afad2c 100644 --- a/docs/api/reorder.md +++ b/docs/api/reorder.md @@ -27,7 +27,7 @@ Reorderは、アイテムをドラッグ＆ドロップするために使用さ Reorderの最も基本的な例は、アイテムの中にスロットを入れることです。デフォルトでは、reorder groupのreorder機能は無効になっています。reorder groupの `disabled` プロパティを `false` に設定することで有効にすることができます。Reorderアイコンを使ってアイテムをドラッグ＆ドロップし、並び替えることができます。 -import Basic from '@site/static/usage/v9/reorder/basic/index.md'; +import Basic from '@site/static/usage/v9/reorder/basic/index.mdx'; @@ -36,7 +36,7 @@ import Basic from '@site/static/usage/v9/reorder/basic/index.md'; 場合によっては、並べ替えの機能を切り替えるオプションが欲しいかもしれない。これは、関数や変数に基づいて `disabled` プロパティをリアクティブにすることで実現できます。 -import TogglingDisabled from '@site/static/usage/v9/reorder/toggling-disabled/index.md'; +import TogglingDisabled from '@site/static/usage/v9/reorder/toggling-disabled/index.mdx'; @@ -45,7 +45,7 @@ import TogglingDisabled from '@site/static/usage/v9/reorder/toggling-disabled/in Reorderコンポーネントは、iOSでは3行、Material Designでは2行のReorderアイコンを使用しています。これは、利用可能なIoniconのいずれかを使って、Reorderの中に[Icon](https://ionic.io/ionicons)コンポーネントを追加することでカスタマイズできます。 -import CustomIcon from '@site/static/usage/v9/reorder/custom-icon/index.md'; +import CustomIcon from '@site/static/usage/v9/reorder/custom-icon/index.mdx'; @@ -54,7 +54,7 @@ import CustomIcon from '@site/static/usage/v9/reorder/custom-icon/index.md'; 並び替えは、項目を囲むラッパーとして使うこともできます。下の項目のどこかをクリックし、ドラッグすると、リストの順番を入れ替えることができます。 -import Wrapper from '@site/static/usage/v9/reorder/wrapper/index.md'; +import Wrapper from '@site/static/usage/v9/reorder/wrapper/index.mdx'; @@ -69,7 +69,7 @@ import Wrapper from '@site/static/usage/v9/reorder/wrapper/index.md'; どのようなアプローチを取るにせよ、ループの中でアイテムを提供する場合は、アイテムを並べ替えるための安定したIDを提供する必要があります。つまり、Angularでは `trackBy` を使用し、ReactとVueでは `key` を使用します。 -import UpdatingData from '@site/static/usage/v9/reorder/updating-data/index.md'; +import UpdatingData from '@site/static/usage/v9/reorder/updating-data/index.mdx'; @@ -81,7 +81,7 @@ The `ionReorderStart` event is emitted when the user begins a reorder gesture. T The `ionReorderEnd` event is emitted when the user completes the reorder gesture. This occurs when the user releases the item they are dragging, for example by lifting their finger on a touch screen or releasing the mouse button. The event includes the `from` and `to` indices of the item, as well as the `complete` method that should be called to finalize the reorder operation. The `from` index will always be the position of the item when the gesture started, while the `to` index will be its final position. This event will fire even if no items have changed position, in which case the `from` and `to` indices will be the same. -import ReorderStartEndEvents from '@site/static/usage/v9/reorder/reorder-start-end-events/index.md'; +import ReorderStartEndEvents from '@site/static/usage/v9/reorder/reorder-start-end-events/index.mdx'; @@ -93,7 +93,7 @@ The `ionReorderMove` event is emitted continuously during the reorder gesture as Do not call the `complete` method during the `ionReorderMove` event as it can break the gesture. ::: -import ReorderMoveEvent from '@site/static/usage/v9/reorder/reorder-move-event/index.md'; +import ReorderMoveEvent from '@site/static/usage/v9/reorder/reorder-move-event/index.mdx'; @@ -101,7 +101,7 @@ import ReorderMoveEvent from '@site/static/usage/v9/reorder/reorder-move-event/i Reorderを正しく動作させるには、スクロールコンテナが必要です。仮想スクロールソリューションを使用する場合は、カスタムスクロールターゲットを指定する必要があります。コンテンツのスクロールを無効にし、スクロールを担当する要素に `.ion-content-scroll-host` クラスを追加する必要があります。 -import CustomScrollTarget from '@site/static/usage/v9/reorder/custom-scroll-target/index.md'; +import CustomScrollTarget from '@site/static/usage/v9/reorder/custom-scroll-target/index.mdx'; diff --git a/docs/api/ripple-effect.md b/docs/api/ripple-effect.md index 8b6a403c361..03ae4975653 100644 --- a/docs/api/ripple-effect.md +++ b/docs/api/ripple-effect.md @@ -25,7 +25,7 @@ ripple effectコンポーネントは、[Material Design ink ripple interaction ## 基本的な使い方 -import Basic from '@site/static/usage/v9/ripple-effect/basic/index.md'; +import Basic from '@site/static/usage/v9/ripple-effect/basic/index.mdx'; @@ -34,7 +34,7 @@ import Basic from '@site/static/usage/v9/ripple-effect/basic/index.md'; リップル効果には2つのタイプがある： `"bounded"` と `"unbounded"` です。デフォルトのタイプである `"bounded"` は、クリック位置から外側に波及効果を広げます。常に要素の中心から始まり、円形に広がる波及効果を追加するには、タイプを `"unbounded"` に設定します。 -import Type from '@site/static/usage/v9/ripple-effect/type/index.md'; +import Type from '@site/static/usage/v9/ripple-effect/type/index.mdx'; @@ -43,7 +43,7 @@ import Type from '@site/static/usage/v9/ripple-effect/type/index.md'; リップルはCSSで別の色にカスタマイズできます。デフォルトでは、波紋の色はテキストの色を継承するように設定されています。これはCSSの `color` を親または波紋エフェクト自体に設定することで変更できます。 -import Customizing from '@site/static/usage/v9/ripple-effect/customizing/index.md'; +import Customizing from '@site/static/usage/v9/ripple-effect/customizing/index.mdx'; diff --git a/docs/api/router.md b/docs/api/router.md index ce7636757bf..c75ef04645d 100644 --- a/docs/api/router.md +++ b/docs/api/router.md @@ -36,7 +36,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ## 基本的な使い方 -import BasicExample from '@site/static/usage/v9/router/basic/index.md'; +import BasicExample from '@site/static/usage/v9/router/basic/index.mdx'; @@ -46,7 +46,7 @@ import BasicExample from '@site/static/usage/v9/router/basic/index.md'; The two can still be composed. A routed page rendered by `ion-router-outlet` can host its own `ion-nav` for local, URL-less navigation within that page. In the example below, navigating to `/details` updates the URL, but stepping through the `ion-nav` inside that page does not. -import NavWithinPageExample from '@site/static/usage/v9/router/nav-within-page/index.md'; +import NavWithinPageExample from '@site/static/usage/v9/router/nav-within-page/index.mdx'; diff --git a/docs/api/searchbar.md b/docs/api/searchbar.md index 23615c3cc33..b06b7dcd466 100644 --- a/docs/api/searchbar.md +++ b/docs/api/searchbar.md @@ -22,7 +22,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ## 基本的な使い方 -import Basic from '@site/static/usage/v9/searchbar/basic/index.md'; +import Basic from '@site/static/usage/v9/searchbar/basic/index.mdx'; @@ -31,7 +31,7 @@ import Basic from '@site/static/usage/v9/searchbar/basic/index.md'; 検索バーのInputフィールドの左に表示される検索アイコンです。任意の [Ionicon](https://ionic.io/ionicons/) にカスタマイズすることが可能です。 -import SearchIcon from '@site/static/usage/v9/searchbar/search-icon/index.md'; +import SearchIcon from '@site/static/usage/v9/searchbar/search-icon/index.mdx'; @@ -40,7 +40,7 @@ import SearchIcon from '@site/static/usage/v9/searchbar/search-icon/index.md'; 検索バーに値があるとき、または検索バーのテキストフィールドに入力があったときに、クリアボタンが表示されます。クリアボタンをクリックすると、テキストフィールドは消去され、入力はフォーカスされたままになります。デフォルトでは、クリアボタンは検索バーをフォーカスしたときに表示されるように設定されていますが、常に表示する、または全く表示しないように設定することができます。また、クリアボタン内のアイコンは、任意の[Ionicon](https://ionic.io/ionicons/)にカスタマイズすることができます。 -import ClearButton from '@site/static/usage/v9/searchbar/clear-button/index.md'; +import ClearButton from '@site/static/usage/v9/searchbar/clear-button/index.mdx'; @@ -49,7 +49,7 @@ import ClearButton from '@site/static/usage/v9/searchbar/clear-button/index.md'; キャンセルボタンを有効にすると、クリックすると入力がクリアされ、フォーカスが失われます。デフォルトでは、キャンセルボタンは表示されないように設定されていますが、常に表示するように設定したり、検索バーにフォーカスが当たったときのみ表示するように設定したりすることができます。キャンセルボタンは `ios` モードではテキストとして、`md` モードではアイコンとして表示されます。テキストとアイコンはそれぞれ別のプロパティでカスタマイズでき、アイコンは任意の[Ionicon](https://ionic.io/ionicons/)を使用することができます。 -import CancelButton from '@site/static/usage/v9/searchbar/cancel-button/index.md'; +import CancelButton from '@site/static/usage/v9/searchbar/cancel-button/index.mdx'; @@ -59,7 +59,7 @@ import CancelButton from '@site/static/usage/v9/searchbar/cancel-button/index.md 検索バーは、ツールバーの中に配置されたときにネイティブに見えるようにスタイルされています。iOSでは、検索バーは、ページタイトルを含むツールバーの下にある、独自のツールバーに配置されるべきです。Material Designでは、検索バーは、独自のツールバーに永続的に表示されるか、ページタイトルを含むツールバーの上に展開されるかのいずれかです。 {/* Reuse the playground from the Toolbar directory */} -import Toolbar from '@site/static/usage/v9/toolbar/searchbars/index.md'; +import Toolbar from '@site/static/usage/v9/toolbar/searchbars/index.mdx'; @@ -68,7 +68,7 @@ import Toolbar from '@site/static/usage/v9/toolbar/searchbars/index.md'; 検索バーにDebounceを設定して、`ionInput`イベントのトリガーを遅延させることができます。これは、入力に文字が入力されるたびにデータを要求するのではなく、要求を出すのを待つために使うことができるので、データを問い合わせるときに便利です。 -import Debounce from '@site/static/usage/v9/searchbar/debounce/index.md'; +import Debounce from '@site/static/usage/v9/searchbar/debounce/index.mdx'; @@ -77,7 +77,7 @@ import Debounce from '@site/static/usage/v9/searchbar/debounce/index.md'; ### Colors -import Colors from '@site/static/usage/v9/searchbar/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/searchbar/theming/colors/index.mdx'; @@ -85,7 +85,7 @@ import Colors from '@site/static/usage/v9/searchbar/theming/colors/index.md'; 検索バーは、スコープをつけてカプセル化されています。これは、実行時に各スタイルに追加のクラスを付加することで、CSSを自動的にスコープ化することを意味します。CSSでscopedセレクタを上書きするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。そのため、クラスを追加してカスタマイズすることをお勧めします。 -import CSSProps from '@site/static/usage/v9/searchbar/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/searchbar/theming/css-properties/index.mdx'; diff --git a/docs/api/segment-button.md b/docs/api/segment-button.md index 09b398b2545..48152fe1401 100644 --- a/docs/api/segment-button.md +++ b/docs/api/segment-button.md @@ -23,7 +23,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ## 基本的な使い方 -import Basic from '@site/static/usage/v9/segment-button/basic/index.md'; +import Basic from '@site/static/usage/v9/segment-button/basic/index.mdx'; @@ -32,7 +32,7 @@ import Basic from '@site/static/usage/v9/segment-button/basic/index.md'; `layout`プロパティは、デフォルトで `"icon-top"` に設定されています。セグメントボタンにアイコンとラベルの両方がある場合、アイコンはラベルの上に表示されます。この動作は `layout` プロパティを `"icon-bottom"`, `"icon-start"`, `"icon-end"` に設定することで変更可能で、それぞれアイコンをラベルの下、ラベルの先頭（LTRでは左、RTLでは右）、ラベルの末尾（LTRでは右、RTLでは左）に表示することができます。 -import Layout from '@site/static/usage/v9/segment-button/layout/index.md'; +import Layout from '@site/static/usage/v9/segment-button/layout/index.mdx'; @@ -40,14 +40,14 @@ import Layout from '@site/static/usage/v9/segment-button/layout/index.md'; ## テーマ ### CSS Shadow Parts -import CSSParts from '@site/static/usage/v9/segment-button/theming/css-shadow-parts/index.md'; +import CSSParts from '@site/static/usage/v9/segment-button/theming/css-shadow-parts/index.mdx'; ## CSSカスタムプロパティ -import CSSProps from '@site/static/usage/v9/segment-button/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/segment-button/theming/css-properties/index.mdx'; diff --git a/docs/api/segment-content.md b/docs/api/segment-content.md index 5b641495dc3..1d93b4534cb 100644 --- a/docs/api/segment-content.md +++ b/docs/api/segment-content.md @@ -27,7 +27,7 @@ Each `ion-segment-content` needs a unique `id` attribute. This will be used to l {/* Reuse swipeable segments playground */} -import Swipeable from '@site/static/usage/v9/segment/swipeable/index.md'; +import Swipeable from '@site/static/usage/v9/segment/swipeable/index.mdx'; diff --git a/docs/api/segment.md b/docs/api/segment.md index c2c949d9b94..71df1c0b560 100644 --- a/docs/api/segment.md +++ b/docs/api/segment.md @@ -27,7 +27,7 @@ Segmentsは、関連するボタンのグループを水平方向の行に表示 セグメントは[セグメントボタン](./segment-button)からなり、各ボタンには`value`プロパティが設定されています。セグメントの `value` プロパティをボタンの値と一致させることで、そのボタンを選択することができます。また、セグメントを無効にすることで、ユーザがセグメントと対話できないようにすることができます。 -import Basic from '@site/static/usage/v9/segment/basic/index.md'; +import Basic from '@site/static/usage/v9/segment/basic/index.mdx'; @@ -36,7 +36,7 @@ import Basic from '@site/static/usage/v9/segment/basic/index.md'; デフォルトでは、セグメントはスクロールできません。各セグメントボタンの幅は固定で、セグメントボタンの数を画面幅で割って幅を決定します。これにより、各セグメントボタンがスクロールすることなく画面に表示されることが保証されます。そのため、ラベルが長いセグメントボタンは、一部が切れてしまうことがあります。これを避けるために、短いラベルを使用するか、`scrollable` プロパティを `true` に設定してスクロール可能なセグメントに変更することをお勧めします。これはセグメントを水平方向にスクロールさせますが、各セグメントボタンの幅を変更することができます。 -import Scrollable from '@site/static/usage/v9/segment/scrollable/index.md'; +import Scrollable from '@site/static/usage/v9/segment/scrollable/index.mdx'; @@ -44,7 +44,7 @@ import Scrollable from '@site/static/usage/v9/segment/scrollable/index.md'; ## Segments in Toolbars {/* Reuse the playground from the Toolbar directory */} -import Toolbar from '@site/static/usage/v9/toolbar/segments/index.md'; +import Toolbar from '@site/static/usage/v9/toolbar/segments/index.mdx'; @@ -60,7 +60,7 @@ import Toolbar from '@site/static/usage/v9/toolbar/segments/index.md'; スワイプ可能なセグメントを使用する場合、セグメントボタンを無効にすることはできません。 ::: -import Swipeable from '@site/static/usage/v9/segment/swipeable/index.md'; +import Swipeable from '@site/static/usage/v9/segment/swipeable/index.mdx'; @@ -68,13 +68,13 @@ import Swipeable from '@site/static/usage/v9/segment/swipeable/index.md'; ### Colors -import Colors from '@site/static/usage/v9/segment/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/segment/theming/colors/index.mdx'; ## CSSカスタムプロパティ -import CSSProps from '@site/static/usage/v9/segment/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/segment/theming/css-properties/index.mdx'; diff --git a/docs/api/select.md b/docs/api/select.md index 8cc0e36747b..37692c903c0 100644 --- a/docs/api/select.md +++ b/docs/api/select.md @@ -38,7 +38,7 @@ selectは、子要素 `` とともに使用する必要があ ラベルはデフォルトではコンテンツの幅を占めます。開発者は `labelPlacement` プロパティを使用して、コントロールに対するラベルの配置を制御することができます。ここでは `label` プロパティを使用しているが、`labelPlacement` は `label` スロットと一緒に使用することもできます。 -import LabelPlacement from '@site/static/usage/v9/select/label-placement/index.md'; +import LabelPlacement from '@site/static/usage/v9/select/label-placement/index.mdx'; @@ -46,7 +46,7 @@ import LabelPlacement from '@site/static/usage/v9/select/label-placement/index.m プレーンテキストのラベルは `label` プロパティで渡すべきですが、カスタムHTMLが必要な場合は、代わりに `label` スロットで渡すことができます。 -import LabelSlot from '@site/static/usage/v9/select/label-slot/index.md'; +import LabelSlot from '@site/static/usage/v9/select/label-slot/index.mdx'; @@ -54,7 +54,7 @@ import LabelSlot from '@site/static/usage/v9/select/label-slot/index.md'; 表示するラベルが必要ない場合でも、開発者は`aria-label`を指定する必要があります -import NoVisibleLabel from '@site/static/usage/v9/select/no-visible-label/index.md'; +import NoVisibleLabel from '@site/static/usage/v9/select/no-visible-label/index.mdx'; @@ -64,7 +64,7 @@ import NoVisibleLabel from '@site/static/usage/v9/select/no-visible-label/index. 単一選択時のキーボード操作については、以下の[キーボード操作](#single-selection-1)のセクションで説明しています。 -import SingleSelectionExample from '@site/static/usage/v9/select/basic/single-selection/index.md'; +import SingleSelectionExample from '@site/static/usage/v9/select/basic/single-selection/index.mdx'; @@ -80,7 +80,7 @@ select に `multiple` 属性を追加することで、ユーザは複数のオ 複数選択時のキーボード操作については、以下の[キーボード操作](#multiple-selection-1)のセクションで説明しています。 -import MultipleSelectionExample from '@site/static/usage/v9/select/basic/multiple-selection/index.md'; +import MultipleSelectionExample from '@site/static/usage/v9/select/basic/multiple-selection/index.mdx'; @@ -90,26 +90,26 @@ import MultipleSelectionExample from '@site/static/usage/v9/select/basic/multipl ### Alert -import AlertExample from '@site/static/usage/v9/select/basic/single-selection/index.md'; +import AlertExample from '@site/static/usage/v9/select/basic/single-selection/index.mdx'; ### Action Sheet -import ActionSheetExample from '@site/static/usage/v9/select/interfaces/action-sheet/index.md'; +import ActionSheetExample from '@site/static/usage/v9/select/interfaces/action-sheet/index.mdx'; ### Popover -import PopoverExample from '@site/static/usage/v9/select/interfaces/popover/index.md'; +import PopoverExample from '@site/static/usage/v9/select/interfaces/popover/index.mdx'; ### Modal -import ModalExample from '@site/static/usage/v9/select/interfaces/modal/index.md'; +import ModalExample from '@site/static/usage/v9/select/interfaces/modal/index.mdx'; @@ -117,7 +117,7 @@ import ModalExample from '@site/static/usage/v9/select/interfaces/modal/index.md Selectとのユーザーインタラクションを処理する主な方法は、`ionChange`、`ionDismiss`、および`ionCancel`イベントです。これらおよびSelectが発火する他のイベントの詳細については、[Events](#events)を参照してください。 -import RespondingToInteractionExample from '@site/static/usage/v9/select/basic/responding-to-interaction/index.md'; +import RespondingToInteractionExample from '@site/static/usage/v9/select/basic/responding-to-interaction/index.mdx'; @@ -129,13 +129,13 @@ Selectの値にオブジェクトを使用する場合、Selectの値のidentity ### Using compareWith -import UsingCompareWithExample from '@site/static/usage/v9/select/objects-as-values/using-comparewith/index.md'; +import UsingCompareWithExample from '@site/static/usage/v9/select/objects-as-values/using-comparewith/index.mdx'; ### Object Values and Multiple Selection -import ObjectValuesAndMultipleSelectionExample from '@site/static/usage/v9/select/objects-as-values/multiple-selection/index.md'; +import ObjectValuesAndMultipleSelectionExample from '@site/static/usage/v9/select/objects-as-values/multiple-selection/index.mdx'; @@ -143,7 +143,7 @@ import ObjectValuesAndMultipleSelectionExample from '@site/static/usage/v9/selec 開発者は `justify` プロパティを使って、ラベルとコントロールの行の詰め方をコントロールすることができる。 -import JustifyExample from '@site/static/usage/v9/select/justify/index.md'; +import JustifyExample from '@site/static/usage/v9/select/justify/index.mdx'; @@ -157,7 +157,7 @@ iOSでは、Selectの `mode` を `md` に設定することで、Filled Selects コンポーネント間のスタイリングの競合のため、`fill`を使用するセレクトは`ion-item`内で使用すべきではありません。 ::: -import FillExample from '@site/static/usage/v9/select/fill/index.md'; +import FillExample from '@site/static/usage/v9/select/fill/index.mdx'; @@ -170,7 +170,7 @@ import FillExample from '@site/static/usage/v9/select/fill/index.md'; `modal`インターフェースには、ヘッダーに単一の`Close`ボタンがあります。このボタンは、モーダルを閉じることのみを担当します。 このボタンをクリックした後、または代替方法でモーダルが閉じられた場合でも、行われた選択は保持されます。 -import ButtonTextExample from '@site/static/usage/v9/select/customization/button-text/index.md'; +import ButtonTextExample from '@site/static/usage/v9/select/customization/button-text/index.mdx'; @@ -182,7 +182,7 @@ selectはalert、action sheet、popover、modalの各インターフェイスを 注意: `alert` インターフェイスでは、`interfaceOptions` は `inputs` や `buttons` を上書きしません。 -import InterfaceOptionsExample from '@site/static/usage/v9/select/customization/interface-options/index.md'; +import InterfaceOptionsExample from '@site/static/usage/v9/select/customization/interface-options/index.mdx'; @@ -196,7 +196,7 @@ import InterfaceOptionsExample from '@site/static/usage/v9/select/customization/ スロットコンテンツが操作対象である場合、[Button](./button.md)などのインタラクティブ要素でラップする必要があります。これにより、コンテンツにタブで移動できるようになります。 ::: -import StartEndSlots from '@site/static/usage/v9/select/start-end-slots/index.md'; +import StartEndSlots from '@site/static/usage/v9/select/start-end-slots/index.mdx'; @@ -212,7 +212,7 @@ select option のリッチコンテンツはデフォルトで無効です。[ option を選択すると、閉じた状態のフィールドには option のテキストコンテンツだけがプレーンテキストとして表示されます。HTML マークアップは取り除かれ、`start`、`end` slot と `description` 属性は選択後の表示には含まれません。 -import RichContentOptions from '@site/static/usage/v9/select/rich-content-options/index.md'; +import RichContentOptions from '@site/static/usage/v9/select/rich-content-options/index.mdx'; @@ -226,7 +226,7 @@ Selectコンポーネントには2つのユニットがあり、それぞれ別 また、必要な[ブラウザサポート](https://caniuse.com/#feat=mdn-css_selectors_part)によっては、CSSのシャドウパーツを使用してセレクトのスタイルを設定することもできます。 `part` を使用することで、要素上の任意の CSS プロパティを対象とすることができることに注意してください。 -import StylingSelectExample from '@site/static/usage/v9/select/customization/styling-select/index.md'; +import StylingSelectExample from '@site/static/usage/v9/select/customization/styling-select/index.mdx'; @@ -246,7 +246,7 @@ import StylingSelectExample from '@site/static/usage/v9/select/customization/sty 選択テキストの隣に表示されるアイコンは、`toggleIcon` プロパティと `expandedIcon` プロパティを使用して、任意の [Ionicon](https://ionic.io/ionicons) に設定することができます。 -import CustomToggleIconsExample from '@site/static/usage/v9/select/customization/custom-toggle-icons/index.md'; +import CustomToggleIconsExample from '@site/static/usage/v9/select/customization/custom-toggle-icons/index.mdx'; @@ -256,7 +256,7 @@ import CustomToggleIconsExample from '@site/static/usage/v9/select/customization 以下の例では[custom `toggleIcon`](#custom-toggle-icons)を使って、`ios`モードでのトグルアイコンの反転動作をより分かりやすく説明しています。 -import IconFlipBehaviorExample from '@site/static/usage/v9/select/customization/icon-flip-behavior/index.md'; +import IconFlipBehaviorExample from '@site/static/usage/v9/select/customization/icon-flip-behavior/index.mdx'; @@ -264,7 +264,7 @@ import IconFlipBehaviorExample from '@site/static/usage/v9/select/customization/ Typeaheadまたはオートコンプリート機能は、既存のIonicコンポーネントを使用して構築できます。利用可能なスクリーンスペースを最大限に活用するために、`ion-modal`を使用することをお勧めします。 -import TypeaheadExample from '@site/static/usage/v9/select/typeahead/index.md'; +import TypeaheadExample from '@site/static/usage/v9/select/typeahead/index.mdx'; @@ -274,7 +274,7 @@ import TypeaheadExample from '@site/static/usage/v9/select/typeahead/index.md'; Angularでは、これはフォームバリデーションによって自動的に行われます。JavaScript、React、Vueでは、独自のバリデーションに基づいてクラスを手動で追加する必要があります。 -import HelperError from '@site/static/usage/v9/select/helper-error/index.md'; +import HelperError from '@site/static/usage/v9/select/helper-error/index.mdx'; diff --git a/docs/api/skeleton-text.md b/docs/api/skeleton-text.md index d9d4a44720f..63f67ce2eda 100644 --- a/docs/api/skeleton-text.md +++ b/docs/api/skeleton-text.md @@ -23,7 +23,7 @@ Skeleton Textは、placeholderコンテンツをレンダリングするため ## 基本的な使い方 -import Basic from '@site/static/usage/v9/skeleton-text/basic/index.md'; +import Basic from '@site/static/usage/v9/skeleton-text/basic/index.mdx'; @@ -31,7 +31,7 @@ import Basic from '@site/static/usage/v9/skeleton-text/basic/index.md'; ## CSSカスタムプロパティ -import CSSProps from '@site/static/usage/v9/skeleton-text/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/skeleton-text/theming/css-properties/index.mdx'; diff --git a/docs/api/spinner.md b/docs/api/spinner.md index 059150591a9..a6b8bd18de1 100644 --- a/docs/api/spinner.md +++ b/docs/api/spinner.md @@ -25,7 +25,7 @@ Spinnerコンポーネントには、さまざまなアニメーションつき デフォルトのスピナーは、モードに基づいて決定されます。モードが `ios` の場合、スピナーは `"lines"` となり、モードが `md` の場合、スピナーは `"circular"` となります。 `name` プロパティが設定されている場合は、モード固有のスピナーの代わりに、そのスピナーが使用されます。 -import Basic from '@site/static/usage/v9/spinner/basic/index.md'; +import Basic from '@site/static/usage/v9/spinner/basic/index.mdx'; @@ -33,7 +33,7 @@ import Basic from '@site/static/usage/v9/spinner/basic/index.md'; ### Colors -import Colors from '@site/static/usage/v9/spinner/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/spinner/theming/colors/index.mdx'; @@ -41,13 +41,13 @@ import Colors from '@site/static/usage/v9/spinner/theming/colors/index.md'; カスタムCSSを使用してスピナーのスタイルを設定できます。たとえば、幅と高さを設定してスピナーのサイズを変更できます。 -import Resizing from '@site/static/usage/v9/spinner/theming/resizing/index.md'; +import Resizing from '@site/static/usage/v9/spinner/theming/resizing/index.mdx'; ### CSS カスタムプロパティ -import CSSProps from '@site/static/usage/v9/spinner/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/spinner/theming/css-properties/index.mdx'; diff --git a/docs/api/split-pane.md b/docs/api/split-pane.md index b7eb8775f57..5b2118d1e64 100644 --- a/docs/api/split-pane.md +++ b/docs/api/split-pane.md @@ -29,7 +29,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; このデモでは、`when`プロパティを`'xs'`に設定しているため、スプリットペインが常に表示されます。小さいビューポートでスプリットペインを折りたたむ場合、この設定は必要ありません。詳細については、[ブレークポイントの設定](#setting-breakpoints)を参照してください。 ::: -import Basic from '@site/static/usage/v9/split-pane/basic/index.md'; +import Basic from '@site/static/usage/v9/split-pane/basic/index.mdx'; @@ -56,7 +56,7 @@ import Basic from '@site/static/usage/v9/split-pane/basic/index.md'; ## CSSカスタムプロパティ -import CSSProperties from '@site/static/usage/v9/split-pane/theming/css-properties/index.md'; +import CSSProperties from '@site/static/usage/v9/split-pane/theming/css-properties/index.mdx'; diff --git a/docs/api/tab-bar.md b/docs/api/tab-bar.md index bd74dd0ee07..2bb2bf00433 100644 --- a/docs/api/tab-bar.md +++ b/docs/api/tab-bar.md @@ -148,7 +148,7 @@ import { call, person, settings } from 'ionicons/icons'; 空のバッジは`md`モードでのみ利用可能です。 ::: -import InsideTabBar from '@site/static/usage/v9/badge/inside-tab-bar/index.md'; +import InsideTabBar from '@site/static/usage/v9/badge/inside-tab-bar/index.mdx'; diff --git a/docs/api/tabs.md b/docs/api/tabs.md index bb41c73c7dd..0ed8ecf00f7 100644 --- a/docs/api/tabs.md +++ b/docs/api/tabs.md @@ -30,7 +30,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; タブは、URLを変更することなく、異なるコンテンツを表示するために使用することができます。これは、タブをナビゲーションのために使用するのではなく、異なるコンテンツを表示するために使用する場合に便利です。 -import Basic from '@site/static/usage/v9/tabs/basic/index.md'; +import Basic from '@site/static/usage/v9/tabs/basic/index.mdx'; @@ -38,7 +38,7 @@ import Basic from '@site/static/usage/v9/tabs/basic/index.md'; タブをIonicルーターで使用すると、タブベースのナビゲーションを実装できます。タブバーとアクティブタブはURLに基づいて自動的に解決されます。これはタブナビゲーションの最も一般的なパターンです。 -import Router from '@site/static/usage/v9/tabs/router/index.md'; +import Router from '@site/static/usage/v9/tabs/router/index.mdx'; @@ -52,7 +52,7 @@ Ionicでは、タブを使ったルーティングパターンのベストプラ タブは`select`メソッドを使用してプログラムで選択できます。これは、ボタンのクリックに応答したり、フォームを完了した後など、アプリケーションロジックからタブの変更をトリガーする必要がある場合に便利です。次の例では、ボタンを使用して`select`メソッドを呼び出し、別のタブにナビゲートする方法を示しています。 -import SelectMethod from '@site/static/usage/v9/tabs/select-method/index.md'; +import SelectMethod from '@site/static/usage/v9/tabs/select-method/index.mdx'; diff --git a/docs/api/text.md b/docs/api/text.md index 60cfaeb37fa..1022ae0c41f 100644 --- a/docs/api/text.md +++ b/docs/api/text.md @@ -21,7 +21,7 @@ textコンポーネントは、任意の要素のテキストカラーのスタ ## 基本的な使い方 -import Basic from '@site/static/usage/v9/text/basic/index.md'; +import Basic from '@site/static/usage/v9/text/basic/index.mdx'; diff --git a/docs/api/textarea.md b/docs/api/textarea.md index eab650e0cbf..15cbe5e0c66 100644 --- a/docs/api/textarea.md +++ b/docs/api/textarea.md @@ -25,7 +25,7 @@ textareaコンポーネントはIonicのプロパティに加えて [ネイテ ## 基本的な使い方 -import BasicPlayground from '@site/static/usage/v9/textarea/basic/index.md'; +import BasicPlayground from '@site/static/usage/v9/textarea/basic/index.mdx'; @@ -41,7 +41,7 @@ import BasicPlayground from '@site/static/usage/v9/textarea/basic/index.md'; ラベルは、デフォルトでそのコンテンツの幅を占めます。 開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。 -import LabelPlacement from '@site/static/usage/v9/textarea/label-placement/index.md'; +import LabelPlacement from '@site/static/usage/v9/textarea/label-placement/index.mdx'; @@ -51,7 +51,7 @@ import LabelPlacement from '@site/static/usage/v9/textarea/label-placement/index この機能は、[Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots)のシミュレート版に依存しているため、実験的なものとみなされていることに注意してください。その結果、シミュレートされた動作はネイティブのスロットの動作と完全に一致するとは限りません。 -import LabelSlot from '@site/static/usage/v9/textarea/label-slot/index.md'; +import LabelSlot from '@site/static/usage/v9/textarea/label-slot/index.mdx'; @@ -59,7 +59,7 @@ import LabelSlot from '@site/static/usage/v9/textarea/label-slot/index.md'; ラベルの表示が必要ない場合でも、開発者は`aria-label`を指定して、textareaがスクリーンリーダーにアクセスできるようにすべきです。 -import NoVisibleLabel from '@site/static/usage/v9/textarea/no-visible-label/index.md'; +import NoVisibleLabel from '@site/static/usage/v9/textarea/no-visible-label/index.mdx'; @@ -73,7 +73,7 @@ iOSでは、Textareasの`mode`を`md`に設定することで、Filled Textareas コンポーネント間のスタイリングの競合のため、`fill`を使用するTextareaは`ion-item`内で使用すべきではありません。 ::: -import Fill from '@site/static/usage/v9/textarea/fill/index.md'; +import Fill from '@site/static/usage/v9/textarea/fill/index.mdx'; @@ -83,7 +83,7 @@ import Fill from '@site/static/usage/v9/textarea/fill/index.md'; Angularでは、これはフォームバリデーションによって自動的に行われます。JavaScript、React、Vueでは、独自のバリデーションに基づいてクラスを手動で追加する必要があります。 -import HelperError from '@site/static/usage/v9/textarea/helper-error/index.md'; +import HelperError from '@site/static/usage/v9/textarea/helper-error/index.mdx'; @@ -91,7 +91,7 @@ import HelperError from '@site/static/usage/v9/textarea/helper-error/index.md'; textareaカウンターは、textareaの下に表示されるテキストで、textareaが受け付ける合計文字数のうち、何文字が入力されたかをユーザーに通知します。カウンターを追加する場合、デフォルトの動作は、表示される値を `inputLength` / `maxLength` としてフォーマットすることです。この動作は、`counterFormatter`プロパティにフォーマッタ関数を渡すことでカスタマイズすることができます。 -import Counter from '@site/static/usage/v9/textarea/counter/index.md'; +import Counter from '@site/static/usage/v9/textarea/counter/index.mdx'; @@ -99,7 +99,7 @@ import Counter from '@site/static/usage/v9/textarea/counter/index.md'; `autoGrow`プロパティが`true`に設定されている場合、テキストエリアはその内容に基づいて拡大・縮小します。 -import AutogrowPlayground from '@site/static/usage/v9/textarea/autogrow/index.md'; +import AutogrowPlayground from '@site/static/usage/v9/textarea/autogrow/index.mdx'; @@ -107,7 +107,7 @@ import AutogrowPlayground from '@site/static/usage/v9/textarea/autogrow/index.md `clearOnEdit`プロパティを`true`に設定すると、テキストエリアが編集削除された後、再度入力されるとクリアされます。 -import ClearOnEditPlayground from '@site/static/usage/v9/textarea/clear-on-edit/index.md'; +import ClearOnEditPlayground from '@site/static/usage/v9/textarea/clear-on-edit/index.mdx'; @@ -123,13 +123,13 @@ import ClearOnEditPlayground from '@site/static/usage/v9/textarea/clear-on-edit/ スロットコンテンツが操作対象である場合、[Button](./button.md)などのインタラクティブ要素でラップする必要があります。これにより、コンテンツにタブで移動できるようになります。 ::: -import StartEndSlots from '@site/static/usage/v9/textarea/start-end-slots/index.md'; +import StartEndSlots from '@site/static/usage/v9/textarea/start-end-slots/index.mdx'; ## Theming -import ThemingPlayground from '@site/static/usage/v9/textarea/theming/index.md'; +import ThemingPlayground from '@site/static/usage/v9/textarea/theming/index.mdx'; diff --git a/docs/api/thumbnail.md b/docs/api/thumbnail.md index 480e6879d51..b0ff4426f5e 100644 --- a/docs/api/thumbnail.md +++ b/docs/api/thumbnail.md @@ -24,13 +24,13 @@ Thumbnailsは、単独で使用することも、任意の要素の内部で使 ## 基本的な使い方 -import Basic from '@site/static/usage/v9/thumbnail/basic/index.md'; +import Basic from '@site/static/usage/v9/thumbnail/basic/index.mdx'; ## Item Thumbnails -import Item from '@site/static/usage/v9/thumbnail/item/index.md'; +import Item from '@site/static/usage/v9/thumbnail/item/index.mdx'; @@ -38,7 +38,7 @@ import Item from '@site/static/usage/v9/thumbnail/item/index.md'; ## CSSカスタムプロパティ -import CSSProps from '@site/static/usage/v9/thumbnail/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/thumbnail/theming/css-properties/index.mdx'; diff --git a/docs/api/title.md b/docs/api/title.md index 8af9586ab99..1e5e8e64be6 100644 --- a/docs/api/title.md +++ b/docs/api/title.md @@ -21,7 +21,7 @@ Titleは、[ツールバー](./toolbar)のタイトルを設定するテキス ## Basic -import Basic from '@site/static/usage/v9/title/basic/index.md'; +import Basic from '@site/static/usage/v9/title/basic/index.mdx'; @@ -35,7 +35,7 @@ This feature is only available for iOS. ::: -import CollapsibleLargeTitle from '@site/static/usage/v9/title/collapsible-large-title/basic/index.md'; +import CollapsibleLargeTitle from '@site/static/usage/v9/title/collapsible-large-title/basic/index.mdx'; @@ -43,7 +43,7 @@ import CollapsibleLargeTitle from '@site/static/usage/v9/title/collapsible-large [buttons](./buttons.md)コンポーネントは、[`collapse`](./buttons.md#collapse)プロパティと共に使用すると、ツールバーが折りたたまれたときにヘッダーに追加表示することができます。 -import CollapsibleLargeTitleButtons from '@site/static/usage/v9/title/collapsible-large-title/buttons/index.md'; +import CollapsibleLargeTitleButtons from '@site/static/usage/v9/title/collapsible-large-title/buttons/index.mdx'; @@ -71,7 +71,7 @@ import CollapsibleLargeTitleButtons from '@site/static/usage/v9/title/collapsibl ## CSSカスタムプロパティ -import CSSCustomProperties from '@site/static/usage/v9/title/theming/css-properties/index.md'; +import CSSCustomProperties from '@site/static/usage/v9/title/theming/css-properties/index.mdx'; diff --git a/docs/api/toast.md b/docs/api/toast.md index 0385653091c..483b689f1c9 100644 --- a/docs/api/toast.md +++ b/docs/api/toast.md @@ -26,7 +26,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; `ion-toast`は、テンプレートに直接コンポーネントを記述して使用することができます。これにより、トーストを表示するために配線する必要があるハンドラの数を減らすことができます。 -import InlineToastTriggerExample from '@site/static/usage/v9/toast/inline/basic/index.md'; +import InlineToastTriggerExample from '@site/static/usage/v9/toast/inline/basic/index.mdx'; @@ -36,13 +36,13 @@ import InlineToastTriggerExample from '@site/static/usage/v9/toast/inline/basic/ `isOpen` は一方通行のデータバインディングを使用しているため、トーストが破棄されたときに自動的に `false` に設定されることはありません。開発者は `ionToastDidDismiss` または `didDismiss` イベントをリスニングして `isOpen` を `false` に設定する必要があります。この理由は、`ion-toast` の内部がアプリケーションの状態と密接に結合するのを防ぐためである。一方通行のデータバインディングでは、トーストはリアクティブ変数が提供するブーリアン値だけを気にすればよい。一方通行のデータバインディングでは、トーストはブーリアン値とリアクティブ変数の存在の両方に関心を持つ必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にします。 -import InlineToastIsOpenExample from '@site/static/usage/v9/toast/inline/is-open/index.md'; +import InlineToastIsOpenExample from '@site/static/usage/v9/toast/inline/is-open/index.mdx'; ## Controller Toasts -import ControllerExample from '@site/static/usage/v9/toast/presenting/controller/index.md'; +import ControllerExample from '@site/static/usage/v9/toast/presenting/controller/index.mdx'; @@ -56,7 +56,7 @@ import ControllerExample from '@site/static/usage/v9/toast/presenting/controller 次の例では、`buttons` プロパティを使用して、クリックすると自動的にトーストを解散させるボタンを追加する方法と、解散イベントの `role` を収集する方法を示しています。 -import ButtonsPlayground from '@site/static/usage/v9/toast/buttons/index.md'; +import ButtonsPlayground from '@site/static/usage/v9/toast/buttons/index.mdx'; @@ -68,7 +68,7 @@ import ButtonsPlayground from '@site/static/usage/v9/toast/buttons/index.md'; トーストがヘッダー、フッター、[FAB](./fab.md)のようなナビゲーション要素と一緒に表示される場合、デフォルトではトーストはこれらの要素と重なるかもしれません。これは `positionAnchor` プロパティを使って修正することができます。`position="top"`を使用するとトーストは選択した要素に対して相対的な位置になり、`position="bottom"`を使用するとその下に、`position="bottom"`を使用するとその上に表示されます。`position="middle"`を使用する場合、`positionAnchor`プロパティは無視されます。 -import PositionAnchor from '@site/static/usage/v9/toast/position-anchor/index.md'; +import PositionAnchor from '@site/static/usage/v9/toast/position-anchor/index.mdx'; @@ -76,7 +76,7 @@ import PositionAnchor from '@site/static/usage/v9/toast/position-anchor/index.md `swipeGesture`プロパティを使用することで、トーストをスワイプして消すことができます。この機能は位置を認識します。つまり、ユーザがスワイプする方向は `position` プロパティの値に基づいて変化します。さらに、ユーザーがスワイプする距離は `positionAnchor` プロパティによって影響を受ける可能性があります。 -import SwipeGesture from '@site/static/usage/v9/toast/swipe-gesture/index.md'; +import SwipeGesture from '@site/static/usage/v9/toast/swipe-gesture/index.mdx'; @@ -84,7 +84,7 @@ import SwipeGesture from '@site/static/usage/v9/toast/swipe-gesture/index.md'; トースト内のボタンコンテナは、`layout`プロパティを使用して、メッセージと同じ行に表示するか、別々の行に積み重ねて表示することができます。スタックレイアウトは、長いテキスト値を持つボタンで使用する必要があります。さらに、スタックトーストレイアウトのボタンは `side` の値として `start` または `end` のどちらかを使用できますが、両方を使用することはできません。 -import StackedPlayground from '@site/static/usage/v9/toast/layout/index.md'; +import StackedPlayground from '@site/static/usage/v9/toast/layout/index.mdx'; @@ -92,13 +92,13 @@ import StackedPlayground from '@site/static/usage/v9/toast/layout/index.md'; トースト内のコンテンツの横にアイコンを追加することができます。一般的に、トーストのアイコンはスタイルやコンテキストを追加するために使用されるべきで、ユーザーの注意を引いたり、トーストの優先順位を上げたりするために使用すべきではありません。より優先順位の高いメッセージをユーザーに伝えたい場合や、応答を保証したい場合は、代わりに [Alert](alert.md) を使用することをお勧めします。 -import IconPlayground from '@site/static/usage/v9/toast/icon/index.md'; +import IconPlayground from '@site/static/usage/v9/toast/icon/index.mdx'; ## テーマ -import ThemingPlayground from '@site/static/usage/v9/toast/theming/index.md'; +import ThemingPlayground from '@site/static/usage/v9/toast/theming/index.mdx'; diff --git a/docs/api/toggle.md b/docs/api/toggle.md index 55bc545b657..191e6e3496a 100644 --- a/docs/api/toggle.md +++ b/docs/api/toggle.md @@ -22,7 +22,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ## 基本的な使い方 -import Basic from '@site/static/usage/v9/toggle/basic/index.md'; +import Basic from '@site/static/usage/v9/toggle/basic/index.mdx'; @@ -31,7 +31,7 @@ import Basic from '@site/static/usage/v9/toggle/basic/index.md'; トグルは、`enableOnOffLabels`プロパティを設定することで、オン/オフラベルを有効にすることができます。これはアクセシビリティ上重要なことで、チェックされたトグルとチェックされていないトグルの区別がつきやすくなります。 -import OnOff from '@site/static/usage/v9/toggle/on-off/index.md'; +import OnOff from '@site/static/usage/v9/toggle/on-off/index.mdx'; @@ -40,7 +40,7 @@ import OnOff from '@site/static/usage/v9/toggle/on-off/index.md'; [アイテム](./item)と[リスト](./list)コンポーネントを使用すると、リストビューでトグルを使用することも可能です。 -import List from '@site/static/usage/v9/toggle/list/index.md'; +import List from '@site/static/usage/v9/toggle/list/index.mdx'; @@ -49,7 +49,7 @@ import List from '@site/static/usage/v9/toggle/list/index.md'; 開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。 -import LabelPlacement from '@site/static/usage/v9/toggle/label-placement/index.md'; +import LabelPlacement from '@site/static/usage/v9/toggle/label-placement/index.mdx'; @@ -61,7 +61,7 @@ import LabelPlacement from '@site/static/usage/v9/toggle/label-placement/index.m スタックされたトグルは、`alignment`プロパティを使用して配置できます。ラベルとコントロールを水平方向に中央揃えする必要がある場合に便利です。 ::: -import Alignment from '@site/static/usage/v9/toggle/alignment/index.md'; +import Alignment from '@site/static/usage/v9/toggle/alignment/index.mdx'; @@ -69,7 +69,7 @@ import Alignment from '@site/static/usage/v9/toggle/alignment/index.md'; 開発者は `justify` プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。 -import Justify from '@site/static/usage/v9/toggle/justify/index.md'; +import Justify from '@site/static/usage/v9/toggle/justify/index.mdx'; @@ -79,7 +79,7 @@ import Justify from '@site/static/usage/v9/toggle/justify/index.md'; Angularでは、これはフォームバリデーションによって自動的に行われます。JavaScript、React、Vueでは、独自のバリデーションに基づいてクラスを手動で追加する必要があります。 -import HelperError from '@site/static/usage/v9/toggle/helper-error/index.md'; +import HelperError from '@site/static/usage/v9/toggle/helper-error/index.mdx'; @@ -87,7 +87,7 @@ import HelperError from '@site/static/usage/v9/toggle/helper-error/index.md'; ### Colors -import Colors from '@site/static/usage/v9/toggle/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/toggle/theming/colors/index.mdx'; @@ -95,7 +95,7 @@ import Colors from '@site/static/usage/v9/toggle/theming/colors/index.md'; CSSカスタムプロパティは、標準CSSと組み合わせてトグルの異なる部分をターゲットにすることができます。トグルの `width` と `height` を直接変更してトラックのサイズを変更し、`--handle-width` と `--handle-height` カスタムプロパティを使用して、ハンドルサイズをカスタマイズすることができます。 -import CSSProps from '@site/static/usage/v9/toggle/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/toggle/theming/css-properties/index.mdx'; @@ -103,7 +103,7 @@ import CSSProps from '@site/static/usage/v9/toggle/theming/css-properties/index. トグルをさらにカスタマイズするには、公開されている特定のシャドウ部分をターゲットにすることができます。これらの部分には、どのようなCSSプロパティでもスタイルを設定でき、CSSカスタムプロパティと組み合わせることも可能です。 -import CSSParts from '@site/static/usage/v9/toggle/theming/css-shadow-parts/index.md'; +import CSSParts from '@site/static/usage/v9/toggle/theming/css-shadow-parts/index.mdx'; diff --git a/docs/api/toolbar.md b/docs/api/toolbar.md index 432d05b7a6b..a53e6c748a0 100644 --- a/docs/api/toolbar.md +++ b/docs/api/toolbar.md @@ -25,7 +25,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ツールバーを正しく配置するために、[header](./header)または[footer](./footer)の内部に配置することをお勧めします。ツールバーをヘッダーに配置すると、コンテンツの上部に固定されて表示されます。フッターに配置された場合は、下側に固定されて表示されます。フルスクリーンのコンテンツは、ヘッダーやフッターにあるツールバーの後ろでスクロールします。 [title](./title) コンポーネントを使用すると、ツールバーの内側にテキストを表示することができます。 -import Basic from '@site/static/usage/v9/toolbar/basic/index.md'; +import Basic from '@site/static/usage/v9/toolbar/basic/index.mdx'; @@ -35,7 +35,7 @@ import Basic from '@site/static/usage/v9/toolbar/basic/index.md'; buttons コンポーネントは、標準の[ボタン](./button)、[戻るボタン](./back-button)、[メニューボタン](./menu-button)、またはそのいずれかを複数ラップできます。ツールバー内のボタンはデフォルトでクリアスタイルに設定されていますが、これはボタンの[`fill`](./button#fill)プロパティを使用して変更できます。この例に含まれる戻るボタンとメニューボタンのプロパティは表示目的であり、適切な使用方法についてはそれぞれのドキュメントを参照してください。 -import Buttons from '@site/static/usage/v9/toolbar/buttons/index.md'; +import Buttons from '@site/static/usage/v9/toolbar/buttons/index.mdx'; @@ -43,7 +43,7 @@ import Buttons from '@site/static/usage/v9/toolbar/buttons/index.md'; [searchbar](./searchbar)は、ツールバーの中に配置することで、コンテンツを検索することができます。ツールバーの唯一の子コンポーネントである必要があり、幅と高さを完全に占有します。 -import Searchbars from '@site/static/usage/v9/toolbar/searchbars/index.md'; +import Searchbars from '@site/static/usage/v9/toolbar/searchbars/index.mdx'; @@ -51,7 +51,7 @@ import Searchbars from '@site/static/usage/v9/toolbar/searchbars/index.md'; [セグメント](./segment)は、一般的にツールバーで、同じページ内の2つの異なるコンテンツビューを切り替えるために使用されます。ボタンなどの他のコンポーネントと一緒にツールバーに配置することができますが、タイトルと一緒に配置するべきではありません。 -import Segments from '@site/static/usage/v9/toolbar/segments/index.md'; +import Segments from '@site/static/usage/v9/toolbar/segments/index.mdx'; @@ -59,7 +59,7 @@ import Segments from '@site/static/usage/v9/toolbar/segments/index.md'; [プログレスバー](./progress-bar)は、アプリで進行中のプロセスを示すローディングインジケータとして使用されます。プログレスバーは、ツールバーの下部に配置されるため、ツールバーの中の他のコンポーネントと一緒に配置することができます。 -import ProgressBars from '@site/static/usage/v9/toolbar/progress-bars/index.md'; +import ProgressBars from '@site/static/usage/v9/toolbar/progress-bars/index.mdx'; @@ -67,13 +67,13 @@ import ProgressBars from '@site/static/usage/v9/toolbar/progress-bars/index.md'; ### Colors -import Colors from '@site/static/usage/v9/toolbar/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/toolbar/theming/colors/index.mdx'; ## CSSカスタムプロパティ -import CSSProps from '@site/static/usage/v9/toolbar/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/toolbar/theming/css-properties/index.mdx'; diff --git a/docs/developing/config.md b/docs/developing/config.md index 7d8ae90d3dd..b1a0d0e6ca3 100644 --- a/docs/developing/config.md +++ b/docs/developing/config.md @@ -55,7 +55,7 @@ import PerPlatformOverridesExample from '@site/docs/developing/config/per-platfo 場合によっては、アプリケーションロジック内で現在の Ionic モードにプログラム的にアクセスする必要があるかもしれません。これは、条件付き動作を適用したり、特定のアセットを取得したり、アクティブなスタイリングモードに基づいて他のアクションを実行したりするのに役立ちます。 -import IonicMode from '@site/static/usage/v9/config/mode/index.md'; +import IonicMode from '@site/static/usage/v9/config/mode/index.mdx'; diff --git a/docs/developing/keyboard.md b/docs/developing/keyboard.md index 76b28d38436..2acdb244b9e 100644 --- a/docs/developing/keyboard.md +++ b/docs/developing/keyboard.md @@ -28,7 +28,7 @@ import TabItem from '@theme/TabItem'; ### Usage -import Inputmode from '@site/static/usage/v9/keyboard/inputmode/index.md'; +import Inputmode from '@site/static/usage/v9/keyboard/inputmode/index.mdx'; @@ -46,7 +46,7 @@ import Inputmode from '@site/static/usage/v9/keyboard/inputmode/index.md'; ### Usage -import Enterkeyhint from '@site/static/usage/v9/keyboard/enterkeyhint/index.md'; +import Enterkeyhint from '@site/static/usage/v9/keyboard/enterkeyhint/index.mdx'; diff --git a/docs/developing/managing-focus.md b/docs/developing/managing-focus.md index 8f32b81a08b..13949e075ff 100644 --- a/docs/developing/managing-focus.md +++ b/docs/developing/managing-focus.md @@ -37,7 +37,7 @@ Ionic は、[Input](../api/input)、[Searchbar](../api/searchbar)、[Textarea](. 以下の例は、ユーザーがボタンをクリックしたときに`setFocus` API を使用して入力にフォーカスを要求する方法を示しています。 -import Basic from '@site/static/usage/v9/input/set-focus/index.md'; +import Basic from '@site/static/usage/v9/input/set-focus/index.mdx'; diff --git a/docs/layout/dynamic-font-scaling.md b/docs/layout/dynamic-font-scaling.md index 431e65b15c6..719ba8be3fb 100644 --- a/docs/layout/dynamic-font-scaling.md +++ b/docs/layout/dynamic-font-scaling.md @@ -12,7 +12,7 @@ Android の Chrome でテストしている場合は、["Accessibility Page Zoom [デバイスでのフォントサイズの変更](#changing-the-font-size-on-a-device)ガイドに従って、好みのフォントサイズを設定し、以下のデモのテキストが設定に応じて拡大または縮小するのを確認してください。 -import DynamicFontScaling from '@site/static/usage/v9/layout/dynamic-font-scaling/index.md'; +import DynamicFontScaling from '@site/static/usage/v9/layout/dynamic-font-scaling/index.mdx'; diff --git a/docs/layout/structure.md b/docs/layout/structure.md index a298df8e08a..3e7c1c7cb50 100644 --- a/docs/layout/structure.md +++ b/docs/layout/structure.md @@ -21,7 +21,7 @@ Ionic Framework は、アプリを構成するために使用できるいくつ 最もシンプルなレイアウトは、[header](../api/header.md) と [content](../api/content.md) で構成されています。アプリのほとんどのページは、一般的にこの 2 つを備えていますが、コンテンツを使用するためにヘッダーは必要ではありません。 -import Header from '@site/static/usage/v9/header/basic/index.md'; +import Header from '@site/static/usage/v9/header/basic/index.mdx';
@@ -29,7 +29,7 @@ import Header from '@site/static/usage/v9/header/basic/index.md'; ヘッダーのツールバーがコンテンツの上に表示されるのに対して、フッターはコンテンツの下に表示されます。ヘッダーとフッターは、同じページで併用することも可能です。 -import Footer from '@site/static/usage/v9/footer/basic/index.md'; +import Footer from '@site/static/usage/v9/footer/basic/index.mdx';