lightning:overlayLib

 

 

 

lightning:overlayLib

: 컴포넌트에서 모달 및 팝오버를 열고 닫을 때 사용할 수 있는 메소드에 대한 액세스 제공

 

Modal & Popover

: 현재 앱 창에 메세지를 표시하는 오버레이

Modal - 앱의 전경에 다이얼로그를 표시해 사용자의 워크플로우를 중단하고 메세지의 주의를 끔

Popover - 참조 요소에 마우스를 놓으면 관련 정보가 표시됨, 버튼 클릭과 같은 상호 작용으로도 Popover 열 수 O

 

Modal/Popover를 트리거하는 컴포넌트에 <lightning:overlayLibrary aura:id="overlayLib"/> 태그 포함하기

aura:id = 고유한 로컬 ID

하나의 컴포넌트에 하나의 태그만 있으면 여러 메세지 열 수 O

 

Modal/Popover를 닫는 컴포넌트에도 태그 달기!!

 

Displaying Modals

버튼을 클릭해 modal을 여는 컴포넌트 c:modalOpener의 예시

(버튼을 클릭하면 다른 컴포넌트에 정의된 custom body가 있는 modal이 표시됨)

 

modalOpener.cmp

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

 

modalOpenerController.js

modalOpenerController.js client측 컨트롤러가 modal을 표시함

({
    handleShowModal: function(component, evt, helper) {
    	var modalBody;
        $A.createComponent("c:modalContent", {},	//$A.createComponent() => custom body 생성
        	function(content, status) {
                    if(status === "SUCCESS") {
                        modalBody = content;
                        //위 코드에서 overlayLibrary 태그가 있는 aura:id에 해당하는 값을 component.find(~~).showCustomModal 사용해 modal parameter 넘기기
                        component.find('overlayLib').showCustomModal({	
                            header: "Application Confirmation",
                                body: modalBody,
                                showCloseButton: true,
                                cssClass: "mymodal",
                                closeCallback: function() {
                                    alert('You closed the alert!');
                                }
                            })
            		}
		});
    }
})

 

modalContent.cmp

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

c:modalContent는 아이콘과 메세지를 표시하는 custom 컴포넌트

 

 

modalOpenerController.js 에서 showCloseButton 파라미터가 true로 세팅되면 X 버튼이 표시됨

cssClass 파라미터가 modal에 적용할 클래스를 지정함

 

cssClass 파라미터를 사용해 추가하는 모든 custom CSS 클래스에는 cMyCmp 클래스가 있어야 함 ( 이 예에서는 cModalOpener )

c : namespace , MyCmp => modal을 만드는 컴포넌트의 이름

이 클래스를 추가하면 custom 스타일 지정 스코프가 적절하게 지정됨

 

closeCallback 파라미터는 modal이 닫힐 때 함수를 호출하도록 함

이벤트 발생이 대표적인 사용 사례

 

Displaying Popovers

Popover는 참조 요소라는 특정 요소와 관련된 상황별 정보를 표시

Escape 키를 누르면 Popover 닫힘

자동으로 닫히도록 시간 설정 O

 

Popover는 Modal보다 커스터마이징을 적게 제공

body와 CSS는 커스터마이징이 가능하지만 header/footer는 제공 X

 

Popover는 Lightning Design System의 popovers에서 스타일 상속

 

button과 div 참조 요소를 포함하는 예제 컴포넌트 c:popoverOpener

버튼을 클릭하면 popover가 표시됨. div 위에 마우스를 올려놓아도 popover 표시됨

 

popoverOpener.cmp

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

 

 

popoverOpenerController.js

({
    handleShowPopover : function(component, event, helper) {
        component.find('overlayLib').showCustomPopover({	//popover 파라미터 전달. 'overlayLib' = aura:id
            body: "Popovers are positioned relative to a reference element",
            referenceSelector: ".popover1",	//div 참조 요소에 지정된 클래스 selector (위에 div class="popover1")
            //cssClass 매개변수 사용해 추가하는 custom CSS 클래스 popoverclass + Popover 생성하는 컴포넌트 cPopoverOpener
            cssClass: "popoverclass,cPopoverOpener"
        }).then(function (overlay) {
            component._overlay = overlay;
            setTimeout(function(){
                //close the popover after 3 seconds
                if (component._overlay) {
                    component._overlay.close();
                }
            }, 3000);
        });
    }
})

popoverOpenerController.js client측 컨트롤러는 popover를 표시함

String을 popover body 파라미터로 전달

 

 

popoverclass

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

minimun height 지정

 

.THIS.no-pointer {
    visibility: hidden;
}

pointer 안 보이게 하기

 

 

cssClass 파라미터 업데이트 하기

cssClass: "slds-nubbin_left, slds-popover_walkthrough, no-pointer, cPopoverOpener"
//slds-nubbin_left : pointer가 안 보이고 교체됨
//slds-popover_walkthrough : 다크 테마

 

 

 

 

 

 

 

출처 : developer.salesforce.com - Overlay Library

lightning:overlayLibrary - documentation - Salesforce Lightning Component Library