Theme Layout Lightning Component for Community Cloud in Salesforce

Lightning Component:

<aura:component implements="forceCommunity:themeLayout" 
                access="global" 
                description="Home Page Theme Layout">

    <aura:attribute name="search" type="Aura.Component[]" required="false"/>
    <aura:attribute name="profileMenu" type="Aura.Component[]" required="false"/>
    <aura:attribute name="navBar" type="Aura.Component[]" required="false"/>
    <aura:attribute name="logoComp" type="Aura.Component[]" required="false"/>
    <aura:attribute name="footer" type="Aura.Component[]" />
    
    <div class="slds">
        <div class="slds-grid slds-grid_vertical-align-center">
            <div class="slds-size_1-of-4">
                {!v.logoComp}
            </div>
            <div class="slds-size_3-of-4 slds-grid slds-wrap">
                <div class="slds-size_2-of-3">
                {!v.navBar}
                </div>
                <div class="slds-size_1-of-3">
                {!v.profileMenu}
                </div>
                <div class="slds-size_3-of-3">
                {!v.search}
                </div>
            </div>
        </div>
        <div class="mainContentArea">
            {!v.body}
        </div>
        <footer id="footer">
            {!v.footer}
        </footer>
    </div>
</aura:component>

Output:


Cheers!!!

No comments:

Post a Comment