So I am looking to populate a picklist with values from a controller. Currently I can pass it to visualforce by passing a simple list. However, I suspect, with the SLDS it requires an iterator of sorts.
https://www.lightningdesignsystem.com/components/menus/#flavor-picklist
Controller method to return list of select option
public List<selectOption> getDates(){
List<date> dates = new List<date>();
dates.add(new selectoption('1/1/2016'));
dates.add(new selectoption('1/2/2016'));
dates.add(new selectoption('1/3/2016'));
return dates;
}
Visualforce to consume dates
<apex:selectList size="1" id="type">
<apex:selectOptions value="{!dates}" />
</apex:selectList>
The SLDS examples only show hard-coding
<div class="slds-dropdown slds-dropdown--left">
<ul class="dropdown__list slds-dropdown--length-5" role="menu">
<li class="slds-dropdown__item">
<a href="javascript:void(0);" role="menuitem">
<p class="slds-truncate">
<svg aria-hidden="true" class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--x-small">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>Option A</p>
</a>
</li>
<li class="slds-dropdown__item">
<a href="javascript:void(0);" role="menuitem">
<p class="slds-truncate">
<svg aria-hidden="true" class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--x-small">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
</svg>Option B</p>
</a>
</li>
How can I iterate through to create these dynamic options?