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

Popular posts