I am re-styling existing VF pages. I have an inputField that is rendered as multiSelectPickList. I tried using 'slds-dueling-list', but I am not sure the code is right. There is no example code on the inputField with SLDS style class on lightning design system site. Does anyone has sample code?
1 Answer
You can still extract the code that they use to generate that particular HTML markup. The only issue is that it's still in development and may change.
Just right-click and select "Inspect" (or similar for non-chrome browsers).
You will then be able to copy the HTML code.
Here is the code I extracted to build my own DuellingPicklist implementation, with the SVG buttons replaced with lightning:icons
. The code is static but with some effort, you should be able recreate this functionality.
By some effort, I mean quite a lot. My version is over 500 loc in helper class.
Here is the static code:
<div class="slds-dueling-list">
<div class="slds-assistive-text" id="drag-live-region" aria-live="assertive"/>
<div class="slds-assistive-text" id="option-drag-label">Press space bar when on an item, to move it within the list. CMD plus left and right arrow keys, to move items between lists.</div>
<div class="slds-dueling-list__column">
<span class="slds-form-element__label" id="label-3">First Category</span>
<div class="slds-dueling-list__options" role="application">
<ul aria-describedby="option-drag-label" aria-labelledby="label-3" aria-multiselectable="true" class="slds-listbox slds-listbox_vertical" role="listbox">
<li role="presentation" class="slds-listbox__item">
<div class="slds-listbox__option slds-listbox__option_plain slds-media slds-media_small slds-media_inline" aria-selected="false" draggable="true" role="option" tabindex="0">
<span class="slds-media__body">
<span class="slds-truncate" title="Option 1">Option 1</span>
</span>
</div>
</li>
</ul>
</div>
</div>
<div class="slds-dueling-list__column">
<button class="slds-button slds-button_icon-container slds-button_icon-small" title="Right" >
<lightning:icon iconName="utility:right" size="small" class="slds-button__icon slds-button__icon_large" />
<span class="slds-assistive-text">Move Selection to Second Category</span>
</button>
<button class="slds-button slds-button_icon-container slds-button_icon-small" title="Left" >
<lightning:icon iconName="utility:left" size="small" class="slds-button__icon slds-button__icon_large" />
<span class="slds-assistive-text">Move Selection to First Category</span>
</button>
</div>
<div class="slds-dueling-list__column">
<span class="slds-form-element__label" id="label-4">Second Category</span>
<div class="slds-dueling-list__options" role="application">
<ul aria-describedby="option-drag-label" aria-labelledby="label-4" aria-multiselectable="true" class="slds-listbox slds-listbox_vertical" role="listbox">
<li role="presentation" class="slds-listbox__item">
<div class="slds-listbox__option slds-listbox__option_plain slds-media slds-media_small slds-media_inline" aria-selected="false" draggable="true" role="option" tabindex="0">
<span class="slds-media__body">
<span class="slds-truncate" title="Option 4">Option 4</span>
</span>
</div>
</li>
</ul>
</div>
</div>
<div class="slds-dueling-list__column">
<button class="slds-button slds-button_icon-container slds-button_icon-small" title="Up" >
<lightning:icon iconName="utility:up" size="small" class="slds-button__icon slds-button__icon_large" />
<span class="slds-assistive-text">Move Selection up</span>
</button>
<button class="slds-button slds-button_icon-container slds-button_icon-small" title="Down" >
<lightning:icon iconName="utility:down" size="small" class="slds-button__icon slds-button__icon_large" />
<span class="slds-assistive-text">Move Selection down</span>
</button>
</div>
</div>
-
Thank you Casper. Just wondering if it is possible to use it with no SLDS, I mean the normal Visual Force way only for this component? I tried that too but since slds is applied at page level, the arrow buttons still do not show as expected. Commented Apr 26, 2018 at 14:38
-
No, I don't think so. You'll need to build a custom duelling select list and add it using lightning out. You can use this markup above + combined with my duellng select list here: github.com/rapsacnz/DualSelect. Commented Apr 26, 2018 at 17:16