Friday, November 8, 2019

lightning Button group in Lightning web component(lwc)

HTML Code
<template>
    <lightning-card>
    <div class="slds-m-top_medium slds-m-bottom_x-large">
        <h2 class="slds-text-heading_medium slds-m-bottom_medium">
            Simple Button group using lightning buttons.
        </h2>
        <lightning-button-group>
            <lightning-button label="Refresh" onclick={handleButtonGroup}></lightning-button>
            <lightning-button label="Edit" onclick={handleButtonGroup}></lightning-button>
            <lightning-button label="Save" onclick={handleButtonGroup}></lightning-button>
        </lightning-button-group><br/><br/>

        <p>You clicked on <b>{value}</b> button</p>
    </div>
    </lightning-card>
</template>

Javascript Controller
import { LightningElement, track } from 'lwc';

export default class ButtonGroupBasic extends LightningElement {
    @track value;
    handleButtonGroup(event) {
        console.log('label ===> '+event.target.label);
        this.value = event.target.label;
    }
}

Output

No comments:

Post a Comment