0

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.

3
  • 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. Commented Dec 2, 2018 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... Commented Dec 2, 2018 at 11:11
  • Please share your current code and point to where ant what you want to achieve Commented Dec 3, 2018 at 6:52

1 Answer 1

1

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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .