SHARE
TWEET

Untitled

a guest Jan 12th, 2017 63 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <aura:component >
  2.     <aura:attribute name="label" type="String" default=""/>
  3.     <aura:attribute name="options" type="Aura.Component[]" default="" description="the li components of the ul"/>
  4.  
  5.     <!-- when an option is clicked... -->
  6.     <aura:handler name="onSelectPicklistOption" event="c:onSelectPicklistOptionEvent" action="{!c.handleSelectOption}"/>
  7.  
  8.     <div aura:id="picklist" class="slds-picklist slds-dropdown-trigger slds-dropdown-trigger--click">
  9.         <!-- detail excluded -->
  10.         {!v.options}
  11.     </div>    
  12. </aura:component>
  13.    
  14. ({
  15.     handleSelectOption: function(component, event, helper) {
  16.         console.log('handleSelectOption')
  17.     }
  18. })
  19.    
  20. <aura:component >
  21.     <!-- Picklist option selected -->
  22.     <aura:registerEvent name="onSelectPicklistOption" type="c:onSelectPicklistOptionEvent"/>
  23.  
  24.     <li role="presentation">
  25.         <span onclick="{!c.toggle}">
  26.         </span>
  27.     </li>
  28. </aura:component>
  29.    
  30. ({
  31.     toggle : function(component, event, helper) {
  32.         // select this one and de-select the others
  33.         var selectOptionEvent = component.getEvent("onSelectPicklistOption");
  34.         selectOptionEvent.setParams({
  35.             "option": component
  36.         });
  37.         selectOptionEvent.fire();
  38.     }
  39. })
  40.    
  41. <aura:component>
  42.     <c:picklist label="Pick an option">
  43.         <aura:set attribute="options">
  44.             <c:picklistOption text="test0" label="Test0"/>
  45.             <c:picklistOption text="test1" label="Test1"/>
  46.         </aura:set>
  47.     </c:picklist>
  48. </aura:component>
RAW Paste Data
Top