March 31, 2021

Popover Dialog using Aura Lightning Component

Primary component:
<aura:component implements="force:appHostable" >
    <aura:attribute name="showBool" type="boolean" default="false"/>
    <lightning:card>
        <a onmouseover="{!c.show}">View</a><br/>
        <aura:if isTrue="{!v.showBool}">
            <section aria-describedby="dialog-body-id-98" aria-labelledby="dialog-heading-id-103" class="slds-popover slds-popover_pane slds-nubbin_top-left" role="dialog">
                <lightning:button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog" onclick="{!c.hide}">
                    Close
                </lightning:button>
                <header class="slds-popover__header">
                    <h2 class="slds-text-heading_small" id="dialog-heading-id-103">Header Title</h2>
                </header>
                <div class="slds-popover__body slds-popover__body_small" id="dialog-body-id-98">
                    <c:contentComponent/>
                </div>
                <footer class="slds-popover__footer">
                    <p>Footer Item</p>
                </footer>
            </section>
        </aura:if>
    </lightning:card>
</aura:component>

Primary Component Controller:
({
    
show : function( component, event, helper ) {
        
        component.set( "v.showBool", true );
}, 
    
    hide : function( component, event, helper ) {
        component.set( "v.showBool", false );
}
    
})

contentComponent:
<aura:component >
    <lightning:card>
        <aura:set attribute="title">
            <lightning:icon iconName="standard:knowledge" size="small"/>
            Sample Title
        </aura:set>
        <div class="slds-text-longform">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </lightning:card>
</aura:component>

Output:


No comments:

Post a Comment