Sample Code:
<aura:component implements="force:appHostable" >
<div class="slds-box slds-theme_default">
<lightning:buttonMenu alternativeText="Toggle menu">
<lightning:menuItem label="Menu Item 1" value="menuitem1"/>
<lightning:menuItem label="Menu Item 2" value="menuitem2"/>
<lightning:menuItem label="Menu Item 3" value="menuitem3"/>
</lightning:buttonMenu>
<br/><br/>
<div style="width:90px;">
<ui:menu >
<ui:menuTriggerLink aura:id="trigger" label="Select Menu"/>
<ui:menuList class="actionMenu" aura:id="actionMenu">
<ui:actionMenuItem aura:id="item1" label="Menu1"/>
<ui:actionMenuItem aura:id="item2" label="Menu2"/>
<ui:actionMenuItem aura:id="item3" label="Menu3"/>
<ui:actionMenuItem aura:id="item4" label="Menu4"/>
</ui:menuList>
</ui:menu>
</div>
</div>
</aura:component>
Output:
Button Menu:
Menu:
<aura:component implements="force:appHostable" >
<div class="slds-box slds-theme_default">
<lightning:buttonMenu alternativeText="Toggle menu">
<lightning:menuItem label="Menu Item 1" value="menuitem1"/>
<lightning:menuItem label="Menu Item 2" value="menuitem2"/>
<lightning:menuItem label="Menu Item 3" value="menuitem3"/>
</lightning:buttonMenu>
<br/><br/>
<div style="width:90px;">
<ui:menu >
<ui:menuTriggerLink aura:id="trigger" label="Select Menu"/>
<ui:menuList class="actionMenu" aura:id="actionMenu">
<ui:actionMenuItem aura:id="item1" label="Menu1"/>
<ui:actionMenuItem aura:id="item2" label="Menu2"/>
<ui:actionMenuItem aura:id="item3" label="Menu3"/>
<ui:actionMenuItem aura:id="item4" label="Menu4"/>
</ui:menuList>
</ui:menu>
</div>
</div>
</aura:component>
Output:
Button Menu:
Menu:
No comments:
Post a Comment