4

ScreenshotHi I have few question on SF -SLDS: 1. When should i use Ui:Button, and when should I use lightning:button? 2. I want to align slds-form-element__control with in slds-form-element to right. How to do that?

Code:

<div class="slds-grid slds-grid--wrap">
    <div class="slds-size--1-of-12"></div>
    <div class="slds-size--10-of-12 slds-container--medium slds-container--left">
        <br></br>
        <div class="slds-form--horizontal">
            <div class="slds-form-element">
                <label class="slds-form-element__label" for="expenseName">Enter Expense Name</label>
                <div class="slds-form-element__control">
                    <ui:inputText class="slds-input" aura:id="expenseName" value="{!v.expenseName}"/>
                </div>
            </div>
            <div class="slds-form-element">
                <label class="slds-form-element__label">Enter Expense Value</label>
                <div class="slds-form-element__control">
                    <ui:inputNumber class="slds-input" value="{!v.amount}"/>
                </div>
            </div> 
            <div class="slds-grid slds-grid-wrap">
                <div class="slds-size--3-of-4"></div>
                <div class="slds-size--1-of-4">
                     <div class="slds-form-element">                                   
                                    <div class="slds-form-element__control">
                                        <lightning:button class="slds-button slds-button--neutral" label="Create" onClick="{!c.createExpense}"/>
                                    </div>                  
                     </div>                    
                </div>
            </div>
        </div> 
    </div>     
    <div class="slds-size--1-of-12"></div>
</div>
3
  • 1
    For styling question drop a screenshot and explain clearly what you did .The second point is not so clear Nov 1 '16 at 22:31
  • Hi Mohith, could you please look into my second question as well Nov 4 '16 at 3:37
  • Just updated the answer with code for styling .Hope that helps you Nov 4 '16 at 4:14
7

Lightning:button automatically takes care of styling in the form of SLDS so if you are trying to not custom style the CSS use that .It integrates lightning design system style buttons .

Ui namespace type components do not provide styling so use them only if lightning namespace is not available .

Update

The press event is equivalent to the onclick event and should not have any impact and you can still assign an aura:id and use find syntax as you would use with ui:button

For the alignment of the button follow the below markup

<aura:application extends="force:slds">
<div class="slds-grid slds-grid--wrap">
<div class="slds-size--1-of-12"></div>
<div class="slds-size--10-of-12 slds-container--medium slds-container--left">
    <br></br>
    <div class="slds-form--horizontal">
        <div class="slds-form-element">
            <label class="slds-form-element__label" for="expenseName">Enter Expense Name</label>
            <div class="slds-form-element__control">
                <ui:inputText class="slds-input" aura:id="expenseName" />
            </div>
        </div>
        <div class="slds-form-element">
            <label class="slds-form-element__label">Enter Expense Value</label>
            <div class="slds-form-element__control">
                <ui:inputNumber class="slds-input"/>
            </div>
        </div> 
        <br/>
         <lightning:button class="slds-button slds-button--neutral slds-input__icon--right" label="Create" onClick="{!c.createExpense}"/>                 
    </div> 
</div>     
<div class="slds-size--1-of-12"></div>

Notice the class i have added to make it align right "slds-button slds-button--neutral slds-input__icon--right"

enter image description here

3
  • Hi Mohith, Thanks for the update on the first question. In this context, I have 2 more clarifications- 1. Lightning button does not have "Press" event, they have onClick one. Will it have any impact on functionality? 2. In UI:Components, we give aura:id and then in the controller we use Component.find(id) to get the reference of the component. How can this work with components in the lightning namespace? Nov 2 '16 at 15:49
  • Also for the second question, my objective is to right align the button with the text box. I have uploaded the code as well as the screenshot. Please suggest what would be the best way to achieve this. Nov 2 '16 at 15:56
  • 1
    I feel the one other difference is not how the events are handled, though I am curious to know the difference between press and onclick. I feel you can inherit the utilites icon using the iconName when you use a lightning:button. I assume ui:button previously had a iconImgSrc which I dont see it anymore. So the text "use lighting:button only when you need an icon-only button makes sense" only in lighting:button context. developer.salesforce.com/docs/atlas.en-us.lightning.meta/…
    – Rao
    Nov 2 '16 at 16:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.