LWC Visual Pickers
Picker size is determined by slds-visual-picker_small, slds-visual-picker_medium
and slds-visual-picker_large size classes along side slds-visual-picker class.
Single select picker works with input type radio and multi select with input type checkbox.
visualPicker.html
<template>
<lightning-card title="Visual Pickers">
<div class="slds-box slds-p-around_none slds-m-top_x-small slds-m-bottom_medium slds-m-horizontal_none">
<lightning-layout multiple-rows>
<lightning-layout-item size="6" padding="around-small">
<div class="custom-box slds-box slds-p-around_medium slds-text-align_center">
<lightning-card title="Single select non coverable">
<template for:each={items1} for:item="item">
<div class={item.pickerSize} key={item.idx}>
<input type="radio" id={item.idx} value={item.label} name="set1"
onchange={handleSet1Change} disabled={item.disabled} />
<label for={item.idx}>
<span
class="slds-visual-picker__figure slds-visual-picker__text slds-align_absolute-center">
<span>
<lightning-icon icon-name={item.icon} alternative-text="Event"
size="large"></lightning-icon>
</span>
</span>
<lightning-icon variant="inverse"
class="slds-icon_container slds-visual-picker__text-check"
icon-name="utility:check" alternative-text="check" size="x-small"
title="small size"></lightning-icon>
<span class="slds-visual-picker__body">
<span class="slds-text-title">{item.label}</span>
</span>
</label>
</div>
</template>
<p slot="footer">Selected : {set1Selected}</p>
</lightning-card>
</div>
</lightning-layout-item>
<lightning-layout-item size="6" padding="around-small">
<div class="custom-box slds-box slds-p-around_medium slds-text-align_center">
<lightning-card title="Multi select non coverable">
<template for:each={items2} for:item="item">
<div class={item.pickerSize} key={item.idx}>
<input type="checkbox" id={item.idx} value={item.label} name="set2"
onchange={handleSet2Change} disabled={item.disabled} />
<label for={item.idx}>
<span
class="slds-visual-picker__figure slds-visual-picker__text slds-align_absolute-center">
<span>
<lightning-icon icon-name={item.icon} alternative-text="Event"
size="large"></lightning-icon>
</span>
</span>
<lightning-icon variant="inverse"
class="slds-icon_container slds-visual-picker__text-check"
icon-name="utility:check" alternative-text="check" size="x-small"
title="small size"></lightning-icon>
<span class="slds-visual-picker__body">
<span class="slds-text-title">{item.label}</span>
</span>
</label>
</div>
</template>
<p slot="footer">Selected : {set2Selected}</p>
</lightning-card>
</div>
</lightning-layout-item>
<lightning-layout-item size="6" padding="around-small">
<div class="custom-box slds-box slds-p-around_medium slds-text-align_center">
<lightning-card title="Single select coverable">
<template for:each={items3} for:item="item">
<div class={item.pickerSize} key={item.idx}>
<input type="radio" id={item.idx} value={item.label} name="set3"
onchange={handleSet3Change} disabled={item.disabled} />
<label for={item.idx}>
<span
class="slds-visual-picker__figure slds-visual-picker__icon slds-align_absolute-center">
<span class="slds-is-selected">
<span class="slds-icon_container">
<lightning-icon icon-name="action:check" alternative-text="check"
size="large"></lightning-icon>
</span>
</span>
<span class="slds-is-not-selected">
<span class="slds-icon_container">
<lightning-icon icon-name={item.icon} alternative-text="Event"
size="large"></lightning-icon>
</span>
</span>
</span>
<span class="slds-visual-picker__body">
<span class="slds-text-title">{item.label}</span>
</span>
</label>
</div>
</template>
<p slot="footer">Selected : {set3Selected}</p>
</lightning-card>
</div>
</lightning-layout-item>
<lightning-layout-item size="6" padding="around-small">
<div class="custom-box slds-box slds-p-around_medium slds-text-align_center">
<lightning-card title="Multi select coverable">
<template for:each={items4} for:item="item">
<div class={item.pickerSize} key={item.idx}>
<input type="checkbox" id={item.idx} value={item.label} name="set4"
onchange={handleSet4Change} disabled={item.disabled} />
<label for={item.idx}>
<span
class="slds-visual-picker__figure slds-visual-picker__icon slds-align_absolute-center">
<span class="slds-is-selected">
<span class="slds-icon_container">
<lightning-icon icon-name="action:check" alternative-text="check"
size="large"></lightning-icon>
</span>
</span>
<span class="slds-is-not-selected">
<span class="slds-icon_container">
<lightning-icon icon-name={item.icon} alternative-text="Event"
size="large"></lightning-icon>
</span>
</span>
</span>
<span class="slds-visual-picker__body">
<span class="slds-text-title">{item.label}</span>
</span>
</label>
</div>
</template>
<p slot="footer">Selected : {set4Selected}</p>
</lightning-card>
</div>
</lightning-layout-item>
</lightning-layout>
</div>
</lightning-card>
</template>
visualPicker.js
import { LightningElement, track } from 'lwc';
export default class VisualPickers extends LightningElement {
@track set1Selected;
@track set2Selected;
@track set3Selected;
@track set4Selected;
@track items1 = [{
idx : 0,
icon : 'standard:lead',
label : 'Set 1 Option 1 (large)',
disabled : '',
pickerSize : 'slds-visual-picker slds-visual-picker_large'
},{
idx : 1,
icon : 'standard:contact',
label : 'Set 1 Option 2 (medium)',
disabled : '',
pickerSize : 'slds-visual-picker slds-visual-picker_medium'
},{
idx : 2,
icon : 'standard:account',
label : 'Set 1 Option 3 (small)',
disabled : 'disabled',
pickerSize : 'slds-visual-picker slds-visual-picker_small'
}];
@track items2 = [{
idx : 3,
icon : 'standard:lead',
label : 'Set 2 Option 1 (small)',
disabled : '',
pickerSize : 'slds-visual-picker slds-visual-picker_small'
},{
idx : 4,
icon : 'standard:contact',
label : 'Set 2 Option 2 (medium)',
disabled : '',
pickerSize : 'slds-visual-picker slds-visual-picker_medium'
},{
idx : 5,
icon : 'standard:account',
label : 'Set 2 Option 3 (large)',
disabled : 'disabled',
pickerSize : 'slds-visual-picker slds-visual-picker_large'
}];
@track items3 = [{
idx : 9,
icon : 'standard:lead',
label : 'Set 4 Option 1 (small)',
disabled : '',
pickerSize : 'slds-visual-picker slds-visual-picker_small'
},{
idx : 10,
icon : 'standard:contact',
label : 'Set 4 Option 2 (medium)',
disabled : '',
pickerSize : 'slds-visual-picker slds-visual-picker_medium'
},{
idx : 11,
icon : 'standard:account',
label : 'Set 4 Option 3 (large)',
disabled : 'disabled',
pickerSize : 'slds-visual-picker slds-visual-picker_large'
}];
@track items4 = [{
idx : 6,
icon : 'standard:lead',
label : 'Set 3 Option 1 (large)',
disabled : '',
pickerSize : 'slds-visual-picker slds-visual-picker_large'
},{
idx : 7,
icon : 'standard:contact',
label : 'Set 3 Option 2 (medium)',
disabled : '',
pickerSize : 'slds-visual-picker slds-visual-picker_medium'
},{
idx : 8,
icon : 'standard:account',
label : 'Set 3 Option 3 (small)',
disabled : 'disabled',
pickerSize : 'slds-visual-picker slds-visual-picker_small'
}];
handleSet1Change(e){
this.set1Selected = e.target.value;
}
handleSet2Change(e){
let x = [];
this.template.querySelectorAll('[name="set2"]').forEach(c => {
if(c.checked)
x.push(c.value);
});
this.set2Selected = x.toString();
}
handleSet3Change(e){
this.set3Selected = e.target.value;
}
handleSet4Change(e){
let x = [];
this.template.querySelectorAll('[name="set4"]').forEach(c => {
if(c.checked)
x.push(c.value);
});
this.set4Selected = x.toString();
}
}
Comments
Post a Comment