I need to show list of cases retreived. Once the list is visible, there are two things i need to do with css that i am struggling with –
- When mouse is hovered over a list item, it's border should become blue
- When a list item is selected (clicked), it's background color should change to dark blue. Which also implies that if a different list item is selected, previously selected item should go back to it's original background color.
Here is a sample picture that shows the desired result. There is an item that is clicked on, and there is an item that has mouse hove (blue boundary)
As far as implementation goes, i have a parent component – maMyCasesListView, and a child component maCaseListItem
Parent component's job is to get list of cases from server. Then iterate over them. In each iteration, it passes the case to child component, which then displays the relevant details.
Parent component code maMyCasesListView
HTML
<template>
<div class="container slds-p-around_large slds-scrollable_y">
<div class="slds-text-title_caps slds-text-title_bold slds-p-bottom_medium">My Cases</div>
<div>
<template if:true={cases.data}>
<lightning-layout class="slds-grid slds-grid_vertical" horizontal-align="left">
<template for:each={cases.data} for:item="currentcase">
<c-ma-case-list-item
class="slds-p-top_medium slds-p-bottom_medium"
key={currentcase.Id}
macase={currentcase}
onselect={handleSelect}
></c-ma-case-list-item>
</template>
</lightning-layout>
</template>
</div>
</div>
</template>
Javascript
import { LightningElement, wire } from 'lwc';
import getCaseList from '@salesforce/apex/MA_CasesStore.getCaseList';
export default class MaMyCasesListView extends LightningElement {
selectedcase;
@wire(getCaseList) cases;
handleSelect(event) {
const caseId = event.detail;
this.selectedcase = this.cases.data.find(
(macase) => macase.Id === caseId
);
const selectEvent = new CustomEvent('caseselect', {
detail: caseId
});
// Fire the custom event
this.dispatchEvent(selectEvent);
}
}
Code of child component-
HTML
<template>
<div onclick={handleClick}>
<lightning-layout horizontal-align="left" class="slds-grid slds-grid_vertical slds-text-align--left">
<lightning-layout-item horizontal-align="left" class="slds-text-align--left">
<b>{macase.Subject}</b>
</lightning-layout-item>
<lightning-layout-item class="slds-text-align--left slds-m-top_small">
<lightning-layout>
<lightning-layout-item horizontal-align="left" size="4">{macase.Status}</lightning-layout-item>
<lightning-layout-item horizontal-align="right">{macase.CaseNumber}</lightning-layout-item>
</lightning-layout>
</lightning-layout-item>
</lightning-layout>
</div>
</template>
Javascript
import { LightningElement, api } from 'lwc';
export default class MaCaseListItem extends LightningElement {
@api macase;
handleClick(event) {
const selectEvent = new CustomEvent('select', {
detail: this.macase.Id
});
// Fire the custom event
this.dispatchEvent(selectEvent);
}
}
Best Answer
Since Rahul's answer didn't address the border on mouse hover (and I was working on this anyway), I'm going to give you a second answer.
Key points:
selected
property totrue
on the selected child componenttrue
and B) all others have that property set tofalse
.slds-theme_inverse
orslds-theme_alt-inverse
to easily give your div a dark background and white text (as long as you like the colors Salesforce chose)border: 2px solid #1589ee;
, probably (#1589ee
is defined as Salesforce's brand border color in Lightning Design System)border: 2px solid transparent;
Here's a Playground Link with a working prototype.
And here's another updated version of your code:
Parent HTML
Parent JS:
Child HTML
Child JS
Child CSS