5

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>
Improve this question
3
  • 1
    For styling question drop a screenshot and explain clearly what you did .The second point is not so clear
    – Mohith Shrivastava
    Nov 1, 2016 at 22:31
  • Hi Mohith, could you please look into my second question as well
    – Deep Singhal
    Nov 4, 2016 at 3:37
  • Just updated the answer with code for styling .Hope that helps you
    – Mohith Shrivastava
    Nov 4, 2016 at 4:14

1 Answer 1

Reset to default
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

Improve this answer
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?
    – Deep Singhal
    Nov 2, 2016 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.
    – Deep Singhal
    Nov 2, 2016 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, 2016 at 16:08

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .