メインコンテンツまでスキップ
Version: v6

ion-modal

shadow

Modalは、アプリのコンテンツの上に表示されるダイアログであり、インタラクションを再開する前にはアプリによって消されなければならない。選択できるオプションが多い場合や、リスト内の項目をフィルタする場合、およびその他の多くのユースケースで、Selectコンポーネントとして役立ちます。

インラインモーダル(推奨)

テンプレートに直接コンポーネントを記述することで、 ion-modal を使用することができます。これにより、モーダルを表示するために必要なハンドラの数を減らすことができます。

Angular、React、Vue で ion-modal を使用する場合、渡されたコンポーネントはモーダルが解除されると破棄されます。この機能は JavaScript フレームワークによって提供されるので、JavaScript フレームワークなしで ion-modal を使用しても、渡されたコンポーネントは破棄されません。この機能が必要な場合は、代わりに modalController を使用することをお勧めします。

isOpen の使用

ion-modalisOpen プロパティを使用すると、開発者がアプリケーションの状態からモーダルの表示状態を制御することができます。つまり、 isOpentrue に設定するとモーダルが表示され、 isOpenfalse に設定するとモーダルが解除されます。

isOpen は一方向のデータバインディングを使用します。つまり、モーダルが解除されたときに自動的に false にセットされることはありません。開発者は ionModalDidDismiss または didDismiss イベントを監視して、 isOpenfalse に設定する必要があります。この理由は、ion-modal の内部がアプリケーションの状態と密に結合するのを防ぐためである。一方通行のデータバインディングでは、モーダルはリアクティブ変数が提供するboolean値だけを気にすればいいです。双方向のデータバインディングでは、モーダルはboolean値とリアクティブ変数の存在の両方を考慮する必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にします。

モーダルコントローラ

ModalController を使用すると、開発者はプログラムによって ion-modal を表示させることができます。開発者は、モーダルの表示と非表示を完全に制御することができます。

モーダルの終了を防止する

モーダルにデータを入力しているとき、誤ってデータが失われないようにする方法があると便利です。 ion-modalcanDismiss プロパティは、モーダルをいつ終了させるかを開発者がコントロールできるようにします。

canDismiss プロパティの使用方法は2つあります。

note

Note: シートモーダルでは、0 ブレークポイントが設定されていない場合、スワイプ時に canDismiss はチェックされません。しかし、Esc やハードウェアのバックボタンを押すと、チェックされます。

boolean値の設定

開発者は canDismiss にboolean値を設定することができます。 canDismisstrue の場合、ユーザーがモーダルを閉じようとすると、モーダルは閉じます。 canDismissfalse の場合、ユーザーがモーダルを閉じようとしても、モーダルは閉じません。

boolean値を設定するのは、モーダルが終了する前に特定のアクションを実行する必要がある場合に使用する必要があります。たとえば、開発者がモーダルを閉じる前に "利用規約" チェックボックスをチェックすることを要求したい場合、最初は canDismissfalse に設定し、チェックボックスがチェックされたら true に更新することが可能です。

コールバック関数を設定する

開発者は canDismiss を関数として設定することができます。この関数は、 truefalse のどちらかに解決する Promise を返さなければなりません。もし、約束が true に解決されたら、モーダルは解除されます。もし、プロミスが false に解決された場合、モーダルは解除されません。

コールバック関数を設定するのは、モーダルを終了する前に確認ダイアログを表示するなど、終了条件が複雑な場合に使用する必要があります。ユーザーがこのダイアログで選択したオプションは、モーダルの終了を続行するかどうかの判断に使用されます。

コールバック関数を設定すると、カードまたはシートモーダルの使用時にスワイプジェスチャが中断されることに注意してください。これは、Ionicが、あなたのコールバック関数が何を解決するか事前に知らないためです。

モーダルの種類

カードモーダル

開発者は、アプリのメインコンテンツの上にカードが積み重なったように表示されるカードモーダル効果を作成することができます。カードモーダルを作成するには、開発者は ion-modalpresentingElement プロパティと swipeToClose プロパティを設定する必要があります。

presentingElement プロパティは、モーダルの下に表示する要素への参照を受け取ります。これは通常、 ion-router-outlet への参照となります。

swipeToClose プロパティは、カードモーダルをスワイプして閉じることができるかどうかを制御するために使用されます。

note

The card display style is only available on iOS.

シートモーダル

マップアプリのドロワーコンポーネントに似たシートモーダルエフェクトを作成します。シートモーダルを作成するには、ion-modalbreakpointsinitialBreakpoint プロパティを設定する必要があります。

breakpoints プロパティには、スワイプしたときにシートがスナップすることができる各ブレークポイントを記述した配列を指定します。 [0, 0.5, 1]breakpoints プロパティは、シートが 0%、50%、100% の範囲でスワイプできることを意味します。0%までスワイプされると、モーダルは自動的に解除されます。

initialBreakpoint プロパティは、シート モーダルが表示されるときに、どのブレークポイントから開始するかを知るために必要なものです。 initialBreakpoint の値は、 breakpoints 配列にも存在する必要があります。例えば、 breakpoints の値が [0, 0.5, 1] である場合、 initialBreakpoint の値が 0.5 であれば、 breakpoints 配列に 0.5 が存在するため有効であると考えられます。 0.25breakpoints 配列に存在しないので、 initialBreakpoint の値は無効になります。

backdropBreakpoint プロパティは、 ion-backdrop がフェードインし始めるポイントをカスタマイズするために使用することができます。これは、シートの下にインタラクティブなコンテンツがあるようなインタフェースを作成する際に便利です。よくある使用例としては、シートが完全に展開されるまでマップがインタラクティブになるような、マップをオーバーレイするシートモーダルです。

note

Note: シートモーダルを使用する場合、swipeToClose プロパティは何の効果もありません。

背景コンテンツとのインタラクション

ハンドルの動作

シートモーダルでは、ブレークポイント間でシートをドラッグするために使用されるハンドルインジケータをオプションでレンダリングすることができます。 handleBehavior プロパティは、ハンドルがユーザーによってアクティブにされたときの振る舞いを設定するために使用されます。

スタイリング

モーダルはアプリケーションのルートで表示されるので、アプリ全体を覆うように表示されます。この動作は、インライン モーダルおよびコントローラから表示されるモーダルの両方に適用されます。その結果、カスタムのモーダルスタイルを特定のコンポーネントにスコープすることはできず、モーダルには適用されません。代わりに、スタイルはグローバルに適用する必要があります。ほとんどの開発者は、カスタムスタイルを global.css に配置すれば十分です。

note

IonicのAngularアプリを構築する場合、スタイルはグローバルなスタイルシートファイルに追加する必要があります。詳しくは、以下のAngularセクションの Style Placement をお読みください。

note

ion-modal は、積み重ねられたモーダルは同じサイズであるという前提で動作します。その結果、後続の各モーダルはボックスシャドウを持たず、背景の不透明度は 0 になります。これは、モーダルが追加されるたびに影や背景が濃くなるのを避けるためです。これは、CSS 変数 --box-shadow--backdrop-opacity を設定することで変更することができます。

ion-modal.stack-modal {
--box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
--backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
}

アニメーション

アニメーションビルダーを使用し、enterAnimationleaveAnimation にアニメーションを割り当てることで、表示時、非表示時のアニメーションをカスタマイズすることができます。

Custom Dialogs

While ion-modal is most often used for full-page views, cards, or sheets, it is also possible to use it for custom dialogs. This is useful if developers need an interface that is more complex than what components such as ion-alert or ion-loading provide.

A few things to keep in mind when creating custom dialogs:

  • ion-content is intended to be used in full-page modals, cards, and sheets. If your custom dialog has a dynamic or unknown size, ion-content should not be used.
  • Creating custom dialogs provides a way of ejecting from the default modal experience. As a result, custom dialogs should not be used with card or sheet modals.

Interfaces

ModalOptions

下記は modalController を使用する際に利用できるすべてのオプションです。これらのオプションは、 modalController.create() を呼び出す際に指定します。

interface ModalOptions {
component: any;
componentProps?: { [key: string]: any };
presentingElement?: HTMLElement;
showBackdrop?: boolean;
backdropDismiss?: boolean;
cssClass?: string | string[];
animated?: boolean;
swipeToClose?: boolean;

mode?: 'ios' | 'md';
keyboardClose?: boolean;
id?: string;
htmlAttributes?: { [key: string]: any };

enterAnimation?: AnimationBuilder;
leaveAnimation?: AnimationBuilder;

breakpoints?: number[];
initialBreakpoint?: number;
backdropBreakpoint?: number;
handle?: boolean;
}

ModalCustomEvent

必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、CustomEvent インターフェースの代わりにこのインターフェースを使用することが可能です。

interface ModalCustomEvent extends CustomEvent {
target: HTMLIonModalElement;
}

Accessibility

Keyboard Navigation

KeyFunction
EscDismisses the modal

スクリーンリーダー

モーダルには aria-modal 属性が適用されています。この属性は、支援技術によるナビゲーションをモーダル要素のコンテンツに制限させることがあります。その結果、次や前の項目に移動するジェスチャを使用しても、モーダルの外側の要素にフォーカスが当たらない場合があります。これは、backdropBreakpoint プロパティを使用して、シート モーダルでバックドロップを無効にした場合にも当てはまります。

開発者が手動でフォーカスを移動しても、アシストはモーダル要素のコンテンツへのナビゲーションを制限しません。ただし、Ionic では、フォーカスのトラッピングが有効になっているモーダルに対して、モーダルの外側に手動でフォーカスを移動することはサポートされていません。

See https://w3c.github.io/aria/#aria-modal for more information.

フォーカスのトラッピング

モーダルが表示されると、フォーカスは表示されたモーダルの内側に閉じ込められます。ユーザーは、モーダル内の他のインタラクティブ要素にフォーカスを合わせることができますが、モーダルが表示されている間は、モーダルの外側のインタラクティブ要素にフォーカスを合わせることができません。複数のスタック モーダルを表示するアプリケーションでは、最後に表示されたモーダルにフォーカスが移動します。

backdropBreakpoint プロパティによって背景が無効にされたシート モーダルは、フォーカスのトラッピングの対象にはなりません。

シートモーダル

シートモーダルでは、backdropBreakpoint プロパティが使用されているとき、ユーザがモーダルの後ろのコンテンツとインタラクトできるようにします。バックドロップは、指定された backdropBreakpoint までは無効になり、それ以降は有効になります。

バックドロップが無効になると、ユーザーはポインタやキーボードを使用して、シートモーダルの外側の要素を操作することができるようになります。入力支援は、aria-modal の使用により、デフォルトではシートモーダルの外側にフォーカスを当てないかもしれません。オートフォーカスなどの機能は、ユーザーに警告することなく、支援技術が 2つのインタラクティブなコンテキスト間をジャンプする原因となるため、ここでは避けることをお勧めします。

パフォーマンス

インナー コンテンツのマウント

インラインの ion-modal のコンテンツは、閉じられるとアンマウントされます。このコンテンツがレンダリングに時間がかかる場合、開発者は keepContentsMounted プロパティを使用して、モーダルがマウントされると同時にコンテンツをマウントすることができます。これにより、モーダルが開かれたときにインナー コンテンツがすでにマウントされているので、アプリケーションの応答性を最適化することができます。

開発者は keepContentsMounted を使用する際に、以下の点に注意する必要があります。

  • この機能は、既存のパフォーマンスの問題に対処するための最後の手段として使用すべきです。この機能を使用する前に、パフォーマンスのボトルネックを特定し、解決するように努めてください。さらに、パフォーマンスの問題を予測するためにこの機能を使用しないでください。

  • この機能は、JavaScriptフレームワークを使用している場合にのみ必要です。フレームワークを使用していない開発者は、レンダリングするコンテンツをモーダルに渡すことができ、コンテンツは自動的にレンダリングされます。

  • この機能はインラインモーダルでのみ動作します。 modalController で作成されたモーダルは先に作成されないので、インナーコンテンツも作成されません。

  • インナー コンポーネントの JavaScript Framework ライフサイクル フックはすべて、モーダルが表示されたときではなく、モーダルがマウントされたときに実行されます。

プロパティ

animated

DescriptionIf true, the modal will animate.
Attributeanimated
Typeboolean
Defaulttrue

backdropBreakpoint

DescriptionA decimal value between 0 and 1 that indicates the point after which the backdrop will begin to fade in when using a sheet modal. Prior to this point, the backdrop will be hidden and the content underneath the sheet can be interacted with. This value is exclusive meaning the backdrop will become active after the value specified.
Attributebackdrop-breakpoint
Typenumber
Default0

backdropDismiss

DescriptionIf true, the modal will be dismissed when the backdrop is clicked.
Attributebackdrop-dismiss
Typeboolean
Defaulttrue

breakpoints

DescriptionThe breakpoints to use when creating a sheet modal. Each value in the array must be a decimal between 0 and 1 where 0 indicates the modal is fully closed and 1 indicates the modal is fully open. Values are relative to the height of the modal, not the height of the screen. One of the values in this array must be the value of the initialBreakpoint property. For example: [0, .25, .5, 1]
Attributeundefined
Typenumber[] | undefined
Defaultundefined

canDismiss

DescriptionDetermines whether or not a modal can dismiss when calling the dismiss method.

If the value is true or the value's function returns true, the modal will close when trying to dismiss. If the value is false or the value's function returns false, the modal will not close when trying to dismiss.
Attributecan-dismiss
Type(() => Promise<boolean>) | boolean | undefined
Defaultundefined

enterAnimation

DescriptionAnimation to use when the modal is presented.
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) | undefined
Defaultundefined

handle

DescriptionThe horizontal line that displays at the top of a sheet modal. It is true by default when setting the breakpoints and initialBreakpoint properties.
Attributehandle
Typeboolean | undefined
Defaultundefined

handleBehavior

DescriptionThe interaction behavior for the sheet modal when the handle is pressed.

Defaults to "none", which means the modal will not change size or position when the handle is pressed. Set to "cycle" to let the modal cycle between available breakpoints when pressed.

Handle behavior is unavailable when the handle property is set to false or when the breakpoints property is not set (using a fullscreen or card modal).
Attributehandle-behavior
Type"cycle" | "none" | undefined
Default'none'

htmlAttributes

DescriptionAdditional attributes to pass to the modal.
Attributeundefined
Typeundefined | { [key: string]: any; }
Defaultundefined

initialBreakpoint

DescriptionA decimal value between 0 and 1 that indicates the initial point the modal will open at when creating a sheet modal. This value must also be listed in the breakpoints array.
Attributeinitial-breakpoint
Typenumber | undefined
Defaultundefined

isOpen

DescriptionIf true, the modal will open. If false, the modal will close. Use this if you need finer grained control over presentation, otherwise just use the modalController or the trigger property. Note: isOpen will not automatically be set back to false when the modal dismisses. You will need to do that in your code.
Attributeis-open
Typeboolean
Defaultfalse

keepContentsMounted

DescriptionIf true, the component passed into ion-modal will automatically be mounted when the modal is created. The component will remain mounted even when the modal is dismissed. However, the component will be destroyed when the modal is destroyed. This property is not reactive and should only be used when initially creating a modal.

Note: This feature only applies to inline modals in JavaScript frameworks such as Angular, React, and Vue.
Attributekeep-contents-mounted
Typeboolean
Defaultfalse

keyboardClose

DescriptionIf true, the keyboard will be automatically dismissed when the overlay is presented.
Attributekeyboard-close
Typeboolean
Defaulttrue

leaveAnimation

DescriptionAnimation to use when the modal is dismissed.
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) | undefined
Defaultundefined

mode

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" | "md"
Defaultundefined

presentingElement

DescriptionThe element that presented the modal. This is used for card presentation effects and for stacking multiple modals on top of each other. Only applies in iOS mode.
Attributeundefined
TypeHTMLElement | undefined
Defaultundefined

showBackdrop

DescriptionIf true, a backdrop will be displayed behind the modal. This property controls whether or not the backdrop darkens the screen when the modal is presented. It does not control whether or not the backdrop is active or present in the DOM.
Attributeshow-backdrop
Typeboolean
Defaulttrue

swipeToClose (deprecated)

DescriptionIf true, the modal can be swiped to dismiss. Only applies in iOS mode. Deprecated - To prevent modals from dismissing, use canDismiss instead.
Attributeswipe-to-close
Typeboolean
Defaultfalse

trigger

DescriptionAn ID corresponding to the trigger element that causes the modal to open when clicked.
Attributetrigger
Typestring | undefined
Defaultundefined

イベント

NameDescription
didDismissEmitted after the modal has dismissed. Shorthand for ionModalDidDismiss.
didPresentEmitted after the modal has presented. Shorthand for ionModalWillDismiss.
ionBreakpointDidChangeEmitted after the modal breakpoint has changed.
ionModalDidDismissEmitted after the modal has dismissed.
ionModalDidPresentEmitted after the modal has presented.
ionModalWillDismissEmitted before the modal has dismissed.
ionModalWillPresentEmitted before the modal has presented.
willDismissEmitted before the modal has dismissed. Shorthand for ionModalWillDismiss.
willPresentEmitted before the modal has presented. Shorthand for ionModalWillPresent.

メソッド

dismiss

DescriptionDismiss the modal overlay after it has been presented.
Signaturedismiss(data?: any, role?: string) => Promise<boolean>

getCurrentBreakpoint

DescriptionReturns the current breakpoint of a sheet style modal
SignaturegetCurrentBreakpoint() => Promise<number | undefined>

onDidDismiss

DescriptionReturns a promise that resolves when the modal did dismiss.
SignatureonDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>

onWillDismiss

DescriptionReturns a promise that resolves when the modal will dismiss.
SignatureonWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>

present

DescriptionPresent the modal overlay after it has been created.
Signaturepresent() => Promise<void>

setCurrentBreakpoint

DescriptionMove a sheet style modal to a specific breakpoint. The breakpoint value must be a value defined in your breakpoints array.
SignaturesetCurrentBreakpoint(breakpoint: number) => Promise<void>

CSS Shadow Parts

NameDescription
backdropThe ion-backdrop element.
contentThe wrapper element for the default slot.
handleThe handle that is displayed at the top of the sheet modal when handle="true".

CSSカスタムプロパティ

NameDescription
--backdrop-opacityOpacity of the backdrop
--backgroundBackground of the modal content
--border-colorBorder color of the modal content
--border-radiusBorder radius of the modal content
--border-styleBorder style of the modal content
--border-widthBorder width of the modal content
--heightHeight of the modal
--max-heightMaximum height of the modal
--max-widthMaximum width of the modal
--min-heightMinimum height of the modal
--min-widthMinimum width of the modal
--widthWidth of the modal

Slots

NameDescription
``Content is placed inside of the .modal-content element.