4

I am looking to track when the tabs are changed using the lightning-tabset component. The aura version used to have the onselect callback, but there is no equivalent in LWC. Do I have to recreate my own version with a proper callback or is there some other method that I can use?

1 Answer 1

7

Edit: there is an example for the active event under documentation (section Add Content To Tab Programmatically):

https://developer.salesforce.com/docs/component-library/bundle/lightning-tabset/documentation

Template:

<template>
    <lightning-tabset>
        <lightning-tab label="Item One" value="1" onactive={handleActive}>
            Here's the content for Item One: {tabContent}
        </lightning-tab>
        <lightning-tab label="Item Two" value="2" onactive={handleActive}>
            Here's the content for Item Two: {tabContent}
        </lightning-tab>
    </lightning-tabset>
</template>

Controller:

import { LightningElement } from 'lwc';

export default class ActiveTabExample extends LightningElement {
    tabContent = '';

    handleActive(event) {
        const tab = event.target;
        this.tabContent = `Tab ${event.target.value} is now active`;
    }
}

Old Answer:

The Tab Component have an active Event which is fired everytime their content gets activated.

Example: https://developer.salesforce.com/docs/component-library/tools/playground/iLdDbNpDm/1/edit

Note though that it is not documentated (and i don`t know if it is just missing or by purpose). It is used though for the lazy loading example so i guess you should be fine

If that not fulfill your needs then you have to implement a custom component.

2
  • Exactly what I was looking for. Thank you so much! Jul 1, 2019 at 15:15
  • The link is dead now that the playground is gone. Can an example of this code be added to the answer?
    – nbrown
    Dec 12, 2023 at 16:02

You must log in to answer this question.

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