Skip to content

Instantly share code, notes, and snippets.

@gminero
Created August 13, 2019 12:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gminero/3fd4a4168a8903a9c9d900e3801855a3 to your computer and use it in GitHub Desktop.
Save gminero/3fd4a4168a8903a9c9d900e3801855a3 to your computer and use it in GitHub Desktop.
lwc-tabset-blueprint
.tab-container {
display:flex;
align-items: center;
justify-content: center;
}
.tab-container li{
align-self: center;
}
<template>
<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>
<li class="slds-tabs_default__item" title="Item Three" 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-3" id="tab-default-3__item">Item Three</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 id="tab-default-3" class="slds-tabs_default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-3__item">Item Three Content</div>
</div>
</template>
import { LightningElement } from 'lwc';
export default class Tabset extends LightningElement {
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')
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment