1

I am trying to loop through a list in a LWC for each element in the list to display that as a tab. Hereis the code I have so far: JS:

import { LightningElement, track } from 'lwc';

export default class App extends LightningElement {
  
   test = ["Test1","Test2"]

   
}

Heres my HTML:

<template>
<template for:each={test} for:item="layer1">
<div key={layer1}>
<div class="slds-tabs_default">
<ul class="slds-tabs_default__nav" role="tablist">
<li class="slds-tabs_default__item slds-is-active" title="Item One" role="presentation">
<a class="slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="true" aria-controls= {layer1} id= {layer1}> {layer1}</a>
</li>
</ul>
<div id= {layer1} class="slds-tabs_default__content slds-show" role="tabpanel" aria-labelledby= {layer1}>{layer1} Content</div>
</div>
</div>
</template>
</template>

It is showing up like this though: enter image description here

I am not able to use SLDS and I am using my own styling thus cannot use the base components like lightning-tabset

enter image description here

2

Always use base components before you try building your own.

There is a lighnting-tabset component that makes this easier.

<template>
   <lightning-tabset>
      <template for:each={test} for:item="layer">
        <lightning-tab label="Item One" key={layer}>
           {layer}
        </lightning-tab>
      </template>
     </lightning-tabset>
   </template>

The controller

 import { LightningElement, track } from 'lwc';

 export default class App extends LightningElement {

     test = ["Test1","Test2"]
  }

Update: Custom LWC Version - Highly recommended to avoid this unless you plan to use custom CSS.

Explore Styling Hooks before you go down this custom path

If you want to purely use LDS and JavaScript and want to go the custom route explore the below sample code

<template>
<div class="slds-tabs_default">
    <ul class="slds-tabs_default__nav" role="tablist">
        <template for:each={test} for:item="layer">
            <li class="slds-tabs_default__item slds-is-active" title="Item One" role="presentation" key={layer}>
                <a class="slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="true" aria-controls= {layer} id= {layer}>{layer}</a>
            </li>
        </template>
    </ul>
    <template for:each={test} for:item="layer">
        <div id={layer} class="slds-tabs_default__content slds-show" role="tabpanel" aria-labelledby="Test1" key={layer}> Content</div>
    </template>
   </div>
</template>

Edit 2 Updated code

   <template>
     <div class="slds-tabs_default">
       <ul class="slds-tabs_default__nav" role="tablist">
        <template for:each={tabs} for:item="layer">
            <li class="slds-tabs_default__item slds-is-active" title="Item One" role="presentation" key={layer.Id}>
                <a class="slds-tabs_default__link" href="javascript:void(0);" role="tab" tabindex="0"
                    aria-selected="true" aria-controls={layer} id={layer.Id} data-link={layer.Id}
                    onclick={handleClick}>{layer.title}</a>
            </li>
        </template>
    </ul>
    <div class="tabs">
        <template for:each={tabs} for:item="layer">
            <div id={layer.Id} class={layer.cssClass} data-id={layer.Id} role="tabpanel" aria-labelledby={layer.Id}
                key={layer.Id}>
                {layer.Content}
            </div>
           </template>
       </div>
     </div>
  </template>

JS Controller

 import {
    LightningElement,
    track
  } from 'lwc';

export default class App extends LightningElement {

  tabs = [{
    title: 'Test1',
    Content: 'Content1',
    Id: '1',
    cssClass: 'slds-tabs_default__content slds-show'
}, {
    title: 'Test2',
    Content: 'Content2',
    Id: '2',
    cssClass: 'slds-tabs_default__content slds-hide'
}];

handleClick(event) {
    this.tabs = this.tabs.map(tab => {
        if(tab.Id === event.target.dataset.link) {
            tab.cssClass = 'slds-tabs_default__content slds-show';
        } else {
            tab.cssClass = 'slds-tabs_default__content slds-hide';
        }
        return tab;
      });
    }
  }

To play with this component, use this url

8
  • Unfortunately, I am unable to use this because I have to use a design system called Newport which is forked from the Lightning Design System and we cannot use the base components which is why I am trying to use the LDS so i can just switch it over to the newport after i can loop through it correctly. Here is link to the newport tab I can trying to create thenest-vlocity-storybook.netlify.app/?path=/story/… And then I am trying to loop through a list there Dec 4 '20 at 20:38
  • 1
    @DrakeDavenport why don't you add that you are not able to use SLDS and you are using your own styling. At least it will provide more content Dec 4 '20 at 20:39
  • I added it, is there anyway to do this without using the base components? Dec 4 '20 at 20:43
  • @DrakeDavenport just updated the answer! Check it out! Dec 4 '20 at 20:58
  • Thanks, this fixed the issue of them being side by side and not one over the other, but both tabs are clicked and it is showing the content on both tabs for each tab. I will add picture of what it looks like now in the salesforce playground in the regular question Dec 4 '20 at 21:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.