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?
[SalesForce] Lightning Tabset tab change callback (LWC)
Related Solutions
It is very easy to put focus on specific tab on Tabset control in LWC... here is below running snippet
import { LightningElement, track } from 'lwc';
export default class TabsetBasic extends LightningElement {
handleClick(){
this.template.querySelector('lightning-tabset').activeTabValue = 'Item Three';
}
}
<template>
<lightning-tabset variant="scoped" active-tab-value ="">
<lightning-tab label="Item One" value="Item One">
One Content !
</lightning-tab>
<lightning-tab label="Item Two" value="Item Two" title="2nd tab extended title">
Two Content !
</lightning-tab>
<lightning-tab label="Item Three" value="Item Three">
Three Content !
</lightning-tab>
</lightning-tabset>
<lightning-button onclick={handleClick} label="Click Me"></lightning-button>
</template>
Personally, I try to avoid lwc components as soon as custom css is involved because of restrictions imposed by shadow dom
This gist leverages the slds tabs blueprint
I simply declared the .tab-container as flex, aligned the items to center, and each li item is also self centered.
example.html
<div class="slds-tabs_default">
<ul class="slds-tabs_default__nav tab-container" role="tablist">
<li class="slds-tabs_default__item slds-is-active" title="Item One" role="presentation" onclick={tabClick}>
<a class="slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-default-1" id="tab-default-1__item">Item One</a>
</li>
<li class="slds-tabs_default__item" title="Item Two" role="presentation" onclick={tabClick}>
<a class="slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="false" aria-controls="tab-default-2" id="tab-default-2__item">Item Two</a>
</li>
</ul>
<div id="tab-default-1" class="slds-tabs_default__content slds-show" role="tabpanel" aria-labelledby="tab-default-1__item">Item One Content</div>
<div id="tab-default-2" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-2__item">Item Two Content</div>
</div>
(sample method to toggle css classes for activating tabs - you can easily achieve the same for the content tabs)
example.js
tabClick(e){
const allTabs = document.querySelectorAll('ul>li');
allTabs.forEach( (elm, idx) =>{
console.log(elm);
elm.classList.remove("slds-is-active")
})
e.currentTarget.classList.add('slds-is-active')
}
example.css
.tab-container {
display:flex;
align-items: center;
justify-content: center;
}
.tab-container li{
align-self: center;
}
Preview:
Best 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.