In the developer docs they have a really cool Listbox-looking thing where you select an item (with nice hover effects and everything) and then it changes the content of several other components.
For example: https://developer.salesforce.com/docs/component-library/bundle/lightning:tile/example#lightningcomponentdemo:exampleTile
You can select a different example and it changes the card next to the content and the card with the code in it below.
That is exactly what I need. How do I implement that?
I have a component displaying a list of items to select, and another component that displays details based on what is selected. The first fires an event that the other listens to and updates its data accordingly.
My question is more about styling. How do I get the first component's list to look like the list in the docs?
So here's my markup:

<ul>
    <aura:iteration items="{!v.itemsArray}" var="item">
        <li class="slds-item">
            <lightning:tile>
                <p class="slds-text-heading--medium slds-p-horizontal--medium" onclick="{!c.itemClicked}">
                {!item.Name}
                </p>
            </lightning:tile>
        </li>
    </aura:iteration>
</ul>

The itemClicked function in the controller fires an event that the other components are listening for.
But I want to style it like that listbox thing. I could do it myself, it's probably nothing more than

.my-clicky-class{
    cursor:pointer;
}
.my-clicky-class:hover{
    background-color: #ccccc
}

But I'd rather use the build-in slds classes.

  • I am really not sure about the question. lightning:tile is a base component you can simply use - there's the code example right where your link points to. Since you don't want to change how the tile looks - I am really at loss how to help here. – Christian Szandor Knapp Dec 2 at 10:51
  • @ChristianSzandorKnapp what about the hover effects? Which class (if you know) gives me that? Also I'll need cursor:pointer because there's no href. Also, I'm talking about the Example Options card... – AvailableName Dec 2 at 11:11
  • Please share your current code and point to where ant what you want to achieve – Itai Shmida Dec 3 at 6:52
up vote 0 down vote accepted

Well, I grabbed the classes off the site I linked.

<ul class="slds-listbox slds-listbox_vertical">
    <aura:iteration items="{!v.itemsArray}" var="item">
        <li class="slds-listbox__item" onclick="{!c.itemClicked}">
            <p class="slds-listbox__option slds-listbox__option_plain slds-media slds-media_small"  data-selected-index="{!index}">
                {!item.Name}
            </p>
        </li>
    </aura:iteration>
</ul>

I'm sure there's an easier way to get the correct styling, but this is what I came up with.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.