Created
August 13, 2019 12:06
-
-
Save gminero/3fd4a4168a8903a9c9d900e3801855a3 to your computer and use it in GitHub Desktop.
lwc-tabset-blueprint
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.tab-container { | |
display:flex; | |
align-items: center; | |
justify-content: center; | |
} | |
.tab-container li{ | |
align-self: center; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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