この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

lightning:overlayLibrary

lightning:overlayLibrary は、関連情報とフィードバックを簡単に表示できるようにします。このコンポーネントでは、API バージョン 41.0 以降が必要です。このコンポーネントは、Lightning Experience、Salesforce1、および Lightning コミュニティでのみサポートされています。

メッセージをモーダルおよびポップオーバーで表示できます。モーダルでは、アプリケーションの前面にダイアログを表示し、ユーザのワークフローを中断してメッセージに注意を引き付けます。ポップオーバーでは、参照要素にマウスポインタが置かれると、関連情報を表示します。メッセージをトリガするコンポーネントに <lightning:overlayLibrary aura:id="overlayLib"/> タグを 1 つ含めます。aura:id は、一意のローカル ID です。1 つのタグのみで複数のメッセージに対応します。

モーダル

モーダルは、終了しない限り、ページのその他の要素をすべてブロックします。ユーザがアプリケーションを操作できる状態に戻るには、モーダルを確認する必要があります。モーダルは、ボタンまたはリンクのクリックを含む、ユーザ操作によってトリガされます。モーダルのヘッダー、本文、フッターをカスタマイズできます。Esc キーを押すか、終了ボタンをクリックすると、モーダルは閉じます。

ボタンを含む例を次に示します。クリックされると、ボタンはカスタム本文を含むモーダルを表示します。

クライアント側コントローラは、モーダルを表示します。モーダルを作成および表示するには、component.find('overlayLib').showCustomModal() を使用してモーダル属性を渡します。overlayLib は、lightning:overlayLibrary インスタンスの aura:id に整合します。

c:modalContent は、アイコンとメッセージを表示するカスタムコンポーネントです。

footer 属性を使用して、独自のフッターを渡せます。次の例では、$A.createComponents() を使用してカスタム本文とフッタを作成します。

c:modalFooter は、2 つのボタンを表示するカスタムコンポーネントです。

ボタンのクリック時の動作をクライアント側コントローラで定義します。

showCustomModal() はプロミスを返します。これは、表示時にモーダルへの参照を取得する場合に便利です。

属性

属性名	属性型	説明
`header`	Object	モーダルの最上部に表示されるヘッダー。
`body`	Object	モーダルの本文。
`footer`	Object	モーダルフッター。
`showCloseButton`	Boolean	モーダルに終了ボタンを表示するかどうかを指定します。デフォルトは、`true` です。
`cssClass`	String	モーダルの CSS クラス。
`closeCallback`	Function	モーダルが閉じられたときにコールされるコールバック。

メソッド

プロミスによって返されるモーダルインスタンスでは、次のメソッドを使用できます。

close(): モーダルを閉じて廃棄します。

hide(): モーダルをビューで非表示します。

show(): モーダルを表示します。

ポップオーバー

ポップオーバーは参照要素にコンテキスト情報を表示するもので、モーダルのように他の要素を中断しません。ポップオーバーは、参照要素にマウスポインタが置かれたり、要素がクリックされたりすると表示されます。Esc キーを押すと、ポップオーバーは閉じます。ポップオーバーのデフォルトの位置設定は、参照要素の右です。

ボタンと、参照 div 要素を含む例を次に示します。クリックされると、ボタンはポップオーバーを表示します。div 要素にマウスポインタが置かれた場合も、ポップオーバーは表示されます。

クライアント側コントローラは、ポップオーバーを表示します。この例ではポップオーバー本文に文字列を渡しますが、上のモーダルの例のようにカスタムコンポーネントを渡すこともできます。

ポップオーバーを作成および表示するには、component.find('overlayLib').showCustomPopover() を使用してポップオーバー属性を渡します。overlayLib は、lightning:overlayLibrary インスタンスの aura:id に整合します。

CSS クラスは、ポップオーバーの高さの最小値を設定します。

属性

属性名	属性型	説明
`body`	Object	モーダルの本文。
`referenceSelector`	Object	ポップオーバーを追加する参照要素ポップオーバーは参照要素の右に追加されます。
`cssClass`	String	モーダルの CSS クラス。