v8このページの見出しion-modalshadowModalは、アプリのコンテンツの上に表示されるダイアログであり、インタラクションを再開する前にはアプリによって消されなければならない。選択できるオプションが多い場合や、リスト内の項目をフィルタする場合、およびその他の多くのユースケースで、Selectコンポーネントとして役立ちます。使用することができます。これにより、モーダルを表示するために必要なハンドラの数を減らすことができます。使用する場合、渡されたコンポーネントはモーダルが解除されると破棄されます。使用しても、渡されたコンポーネントは破棄されません。使用することをお勧めします。プロパティを使用すると、開発者がアプリケーションの状態からモーダルの表示状態を制御することができます。設定するとモーダルが解除されます。一方向のデータバインディングを使用します。セットされることはありません。設定する必要があります。内部がアプリケーションの状態と密に結合するのを防ぐためである。通行のデータバインディングでは、モーダルはリアクティブ変数が提供するboolean値だけを気にすればいいです。双方向のデータバインディングでは、モーダルはboolean値とリアクティブ変数の存在の両方を考慮する必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にします。表示させることができます。開発者は、モーダルの表示と非表示を完全に制御することができます。AngularJavaScriptReactVueiOSMDモーダルの終了を防止する​モーダルにデータを入力しているとき、誤ってデータが失われないようにする方法があると便利です。プロパティは、モーダルをいつ終了させるかを開発者がコントロールできるようにします。canDismiss`プロパティの使用方法には、boolean値の設定とコールバック関数の設定の2種類があります。ハードウェアのバックボタンを押すと、チェックされます。boolean値を設定することができます。場合、ユーザーがモーダルを閉じようとすると、モーダルは閉じます。場合、ユーザーがモーダルを閉じようとしても、モーダルは閉じません。boolean値を設定するのは、モーダルが終了する前に特定のアクションを実行する必要がある場合に使用する必要があります。更新することが可能です。関数として設定することができます。返さなければなりません。解決されたら、モーダルは解除されます。解決された場合、モーダルは解除されません。コールバック関数を設定するのは、モーダルを終了する前に確認ダイアログを表示するなど、終了条件が複雑な場合に使用する必要があります。ユーザーがこのダイアログで選択したオプションは、モーダルの終了を続行するかどうかの判断に使用されます。コールバック関数を設定すると、カードまたはシートモーダルの使用時にスワイプジェスチャが中断されることに注意してください。これは、Ionicが、あなたのコールバック関数が何を解決するか事前に知らないためです。開発者は、ユーザがスワイプしてカードやシートのモーダルを閉じないようにしたい場合があります。でないかチェックすることで実現できます。コールバックの動作をカスタマイズする必要があるかもしれません。このカスタマイズは、たとえば、モーダル内のフォームが無効な場合にモーダルが却下されないようにしたい場合に特に便利です。コールバックを管理する条件を更新するために、関数コールバック、イベントエミッション、その他のリアクティビティメカニズムなどのさまざまなテクニックを使用できます。開発者は、アプリのメインコンテンツの上にカードが積み重なったようにモーダルが表示されるカードモーダルエフェクトを作成できます。プロパティを設定する必要があります。開発者は、アプリのメインコンテンツの上にカードが積み重なったように表示されるカードモーダル効果を作成することができます。プロパティを設定する必要があります。プロパティを使用して、カードモーダルをスワイプして閉じることができるかどうかを制御することができます。scrollable.開発者は、マップアプリケーションで利用可能なドロワーコンポーネントに似たシートモーダルエフェクトを作成することができます。プロパティを設定する必要があります。breakpointsプロパティには、スワイプしたときにシートがスナップすることができる各ブレークポイントを示す配列が渡されます。0%、50%、100%を表示することができることを示します。モーダルが0%にスワイプされると、モーダルは自動的にディスクローズされます。ハードウェアの戻るボタンを押すことで解除することができることに注意してください。モーダルが表示されるときに、どのブレークポイントから開始するかを知るために必要なものです。配列にも存在する必要があります。存在するため有効であると考えられます。フェードインし始めるポイントをカスタマイズするために使用することができます。これは、シートの下にインタラクティブなコンテンツがあるようなインタフェースを作成する際に便利です。ある使用例としては、シートが完全に展開されるまでマップがインタラクティブになるような、マップをオーバーレイするシートモーダルです。viewport.AngularJavaScriptReactVueiOSMDハンドルの動作​シートモーダルでは、ブレークポイント間でシートをドラッグするために使用されるハンドルインジケータをオプションでレンダリングすることができます。プロパティは、ハンドルがユーザーによってアクティブにされたときの振る舞いを設定するために使用されます。AngularJavaScriptReactVueiOSMDスタイリング​モーダルはアプリケーションのルートで表示されるので、アプリ全体を覆うように表示されます。モーダルおよびコントローラから表示されるモーダルの両方に適用されます。その結果、カスタムのモーダルスタイルを特定のコンポーネントにスコープすることはできず、モーダルには適用されません。代わりに、スタイルはグローバルに適用する必要があります。注記IonicのAngularアプリを構築する場合、スタイルはグローバルなスタイルシートファイルに追加する必要があります。積み重ねられたモーダルは同じサイズであるという前提で動作します。これは、モーダルが追加されるたびに影や背景が濃くなるのを避けるためです。設定することで変更することができます。アニメーションをカスタマイズすることができます。Dialogs​ion-modalは、フルページビュー、カード、シートに使用されることが多いですが、カスタムダイアログに使用することも可能です。これは、ion-alertやion-loadingなどのコンポーネントが提供するものより複雑なインターフェースを必要とする開発者に便利です。AngularJavaScriptReactVueiOSMDカスタムダイアログを作成する際に注意すべき点がいくつかあります。フルページモダル、カード、シートで使用することを意図しています。使用するべきではありません。カスタムダイアログを作成することは、デフォルトのモーダルエクスペリエンスから逃れる方法を提供します。そのため、カスタムダイアログは、カードやシートのモーダルでは使用しないでください。使用する際に利用できるすべてのオプションです。呼び出す際に指定します。インターフェースの代わりにこのインターフェースを使用することが可能です。そのため、開発者はモーダルに適切なラベル付けを行う必要があります。設定すると、内部のテキストをモーダル自体のラベルに使用することができます。使ってモーダルと関連付けることができます。属性が適用されています。この属性は、支援技術によるナビゲーションをモーダル要素のコンテンツに制限させることがあります。その結果、次や前の項目に移動するジェスチャを使用しても、モーダルの外側の要素にフォーカスが当たらない場合があります。モーダルでバックドロップを無効にした場合にも当てはまります。開発者が手動でフォーカスを移動しても、アシストはモーダル要素のコンテンツへのナビゲーションを制限しません。フォーカスのトラッピングが有効になっているモーダルに対して、モーダルの外側に手動でフォーカスを移動することはサポートされていません。information.フォーカスのトラッピング​モーダルが表示されると、フォーカスは表示されたモーダルの内側に閉じ込められます。ユーザーは、モーダル内の他のインタラクティブ要素にフォーカスを合わせることができますが、モーダルが表示されている間は、モーダルの外側のインタラクティブ要素にフォーカスを合わせることができません。モーダルを表示するアプリケーションでは、最後に表示されたモーダルにフォーカスが移動します。モーダルは、フォーカスのトラッピングの対象にはなりません。プロパティが使用されているとき、ユーザがモーダルの後ろのコンテンツとインタラクトできるようにします。までは無効になり、それ以降は有効になります。バックドロップが無効になると、ユーザーはポインタやキーボードを使用して、シートモーダルの外側の要素を操作することができるようになります。使用により、デフォルトではシートモーダルの外側にフォーカスを当てないかもしれません。2つのインタラクティブなコンテキスト間をジャンプする原因となるため、ここでは避けることをお勧めします。コンテンツは、閉じられるとアンマウントされます。プロパティを使用して、モーダルがマウントされると同時にコンテンツをマウントすることができます。コンテンツがすでにマウントされているので、アプリケーションの応答性を最適化することができます。使用する際に、以下の点に注意する必要があります。この機能は、既存のパフォーマンスの問題に対処するための最後の手段として使用すべきです。この機能を使用する前に、パフォーマンスのボトルネックを特定し、解決するように努めてください。パフォーマンスの問題を予測するためにこの機能を使用しないでください。この機能は、JavaScriptフレームワークを使用している場合にのみ必要です。フレームワークを使用していない開発者は、レンダリングするコンテンツをモーダルに渡すことができ、コンテンツは自動的にレンダリングされます。この機能はインラインモーダルでのみ動作します。作成されたモーダルは先に作成されないので、インナーコンテンツも作成されません。フックはすべて、モーダルが表示されたときではなく、モーダルがマウントされたときに実行されます。PartsCSSカスタムプロパティSlotsこのページを。