Dynamic multiple tabs in lwc Salesforce - Salesforce Globe For You
LWC Component: dynamicTabsInLWC
dynamicTabsInLWC.html
<template>
<lightning-tabset>
<template for:each={lstTabs} for:item="tab">
<lightning-tab label={tab.Name} key={tab.Name}>
{tab.Id}
</lightning-tab>
</template>
</lightning-tabset>
</template>
dynamicTabsInLWC.js
import { LightningElement,track } from 'lwc';
export default class DynamicTabsInLWC extends LightningElement {
@track lstTabs = [
{
Id: 1,
Name: 'Tab 1'
},
{
Id: 2,
Name: 'Tab 2'
},
{
Id: 3,
Name: 'Tab 3'
},
];
}
dynamicTabsInLWC.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>48.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
Note:dynamically populate lstTabs variaable as per your requirement.
Output: