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

lightning:overlayLibrary

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

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

モーダル

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

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

1<aura:component>    
2    <lightning:overlayLibrary aura:id="overlayLib"/>
3    <lightning:button name="modal" label="Show Modal" onclick="{!c.handleShowModal}"/>
4</aura:component>

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

1({    
2    handleShowModal: function(component, evt, helper) {
3        var modalBody;
4        $A.createComponent("c:modalContent", {},
5                           function(content, status) {
6                               if (status === "SUCCESS") {
7                                   modalBody = content;
8                                   component.find('overlayLib').showCustomModal({
9                                       header: "Application Confirmation",
10                                       body: modalBody, 
11                                       showCloseButton: true,
12                                       cssClass: "mymodal",
13                                       closeCallback: function() {
14                                           alert('You closed the alert!');
15                                       }
16                                   })
17                                   
18                               }
19                               
20                           });
21    }
22})

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

1<aura:component>
2    <lightning:icon size="medium" iconName="action:approval" alternativeText="Approved" />
3    Your application has been approved.
4</aura:component>

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

1handleShowModalFooter : function (component, event, helper) {
2    var modalBody;
3    var modalFooter;
4    $A.createComponents([
5        ["c:modalContent",{}],
6        ["c:modalFooter",{}]
7    ],
8    function(components, status){
9        if (status === "SUCCESS") {
10            modalBody = components[0];
11            modalFooter = components[1];
12            component.find('overlayLib').showCustomModal({
13               header: "Application Confirmation",
14               body: modalBody, 
15               footer: modalFooter,
16               showCloseButton: true,
17               cssClass: "my-modal,my-custom-class,my-other-class",
18               closeCallback: function() {
19                   alert('You closed the alert!');
20               }
21           })
22        }
23    }
24   );
25}

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

1<aura:component>
2    <lightning:overlayLibrary aura:id="overlayLib"/>
3    <lightning:button name="cancel" label="Cancel" onclick="{!c.handleCancel}"/>
4    <lightning:button name="ok" label="OK" variant="brand" onclick="{!c.handleOK}"/>
5</aura:component>

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

1({
2    handleCancel : function(component, event, helper) {
3        //closes the modal or popover from the component
4        component.find("overlayLib").notifyClose();
5    },
6    handleOK : function(component, event, helper) {
7        //do something
8    }
9})

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

1component.find('overlayLib').showCustomModal({
2   //modal attributes
3}).then(function (overlay) {
4    //closes the modal immediately
5    overlay.close();
6});

モーダルは、Lightning Design System のモーダルからスタイル設定を継承します。

属性

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

メソッド

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

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

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

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

ポップオーバー

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

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

1<aura:component>    
2    <lightning:overlayLibrary aura:id="overlayLib"/>
3    <lightning:button name="popover" label="Show Popover" onclick="{!c.handleShowPopover}"/>    
4    <div class="mypopover" onmouseover="{!c.handleShowPopover}">Popover should display if you hover over here.</div>
5</aura:component>

クライアント側コントローラは、ポップオーバーを表示します。この例ではポップオーバー本文に文字列を渡しますが、上のモーダルの例のようにカスタムコンポーネントを渡すこともできます。追加するカスタム CSS クラスは、cMyCmp クラスを伴う必要があります。c は名前空間、MyCmp はポップオーバーを作成するコンポーネントの名前です。このクラスを追加すると、カスタムスタイル設定の範囲が正しく設定されます。

1({
2    handleShowPopover : function(component, event, helper) {
3        component.find('overlayLib').showCustomPopover({
4            body: "Popovers are positioned relative to a reference element",
5            referenceSelector: ".mypopover",
6            cssClass: "popoverclass, cMyCmp"
7        }).then(function (overlay) {
8            setTimeout(function(){ 
9                //close the popover after 3 seconds
10                overlay.close(); 
11            }, 3000);
12        });
13    }
14})

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

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

1.THIS.popoverclass {
2    min-height: 100px;
3}

ポップオーバーは、Lightning Design System のポップオーバーからスタイル設定を継承します。

ポップオーバー修飾クラスを追加するには、cssClass に含めます。次の例では、ダークテーマの slds-popover_walkthrough クラスを追加します。ポインタは非表示で、slds-nubbin_left クラスに置き換えられます。ポインタを非表示にするには、次の CSS ルールを追加します。

1.THIS.no-pointer .pointer{
2    visibility: hidden;
3}

cssClass 属性を更新します。cMyCmp クラスは名前空間とコンポーネント名に対応し、大文字と小文字が区別されます。

1cssClass: "slds-nubbin_left,slds-popover_walkthrough,no-pointer,cMyCmp"

属性

属性名	属性型	説明
`body`	Object	ポップオーバーの本文。
`referenceSelector`	Object	ポップオーバーを追加する参照要素ポップオーバーは参照要素の右に追加されます。
`cssClass`	String	ポップオーバーの CSS クラスのカンマ区切りリスト。表示されるマークアップにのみ適用されます。