[SalesForce] how to display button based on conditions

I have 2 buttons prev and next

consider we have 3 pages 1,2,3
if its 1 of 3 ->prev disable,next enable
2of3–>both button enable
30f3–>prev enable and next disable
how to do that in lightning??

Best Answer

Honestly, I didn't use it in my demo and I think it looks fine without it. That said, you could enable/disable the components by using aura:if. Note that SLDS doesn't really have a "disabled" style, so it doesn't really matter. The pagination is fast enough that the user wouldn't notice if the button was disabled anyways.

<aura:component >
    <aura:attribute name="currentPageNumber" type="Integer" required="true" />
    <aura:attribute name="maxPageNumber" type="Integer" required="true" />

    <div class="slds-button-group" role="group">
        <aura:if isTrue="{!v.currentPageNumber==1}">
            <button disabled="" class="slds-button slds-button--neutral">
                First
            </button>
            <button disabled="" class="slds-button slds-button--neutral">
                Prev
            </button>
            <aura:set attribute="else">
                <button onclick="{!c.firstPage}" class="slds-button slds-button--neutral">
                    First
                </button>
                <button onclick="{!c.prevPage}" class="slds-button slds-button--neutral">
                    Prev
                </button>
            </aura:set>
        </aura:if>
        <button class="slds-button slds-button--neutral">
            {!v.currentPageNumber} / {!v.maxPageNumber}
        </button>
        <aura:if isTrue="{!v.currentPageNumber==v.maxPageNumber}">
            <button disabled="" class="slds-button slds-button--neutral">
                Next
            </button>
            <button disabled="" class="slds-button slds-button--neutral">
                Last
            </button>
            <aura:set attribute="else">
                <button onclick="{!c.nextPage}" class="slds-button slds-button--neutral">
                    Next
                </button>
                <button onclick="{!c.lastPage}" class="slds-button slds-button--neutral">
                    Last
                </button>
            </aura:set>
        </aura:if>
    </div>
</aura:component>
Related Topic