1
0
pines/elements/tabs-examples/example-01.html
Tyler Sloan 7b41c96303 add
tabButtonActive back to tabs example 1. this is needed for dynamic classnames to work
2023-07-18 15:29:22 -04:00

46 lines
2.8 KiB
HTML

<div
x-data="{
tabSelected: 1,
tabId: $id('tabs'),
tabButtonClicked(tabButton){
this.tabSelected = tabButton.id.replace(this.tabId + '-', '');
this.tabRepositionMarker(tabButton);
},
tabRepositionMarker(tabButton){
this.$refs.tabMarker.style.width=tabButton.offsetWidth + 'px';
this.$refs.tabMarker.style.height=tabButton.offsetHeight + 'px';
this.$refs.tabMarker.style.left=tabButton.offsetLeft + 'px';
},
tabContentActive(tabContent){
return this.tabSelected == tabContent.id.replace(this.tabId + '-content-', '');
},
tabButtonActive(tabContent){
const tabId = tabContent.id.split('-').slice(-1);
return this.tabSelected == tabId;
}
}"
x-init="tabRepositionMarker($refs.tabButtons.firstElementChild);" class="relative w-full max-w-sm">
<div x-ref="tabButtons" class="relative inline-grid items-center justify-center w-full h-10 grid-cols-3 p-1 text-gray-500 bg-white border border-gray-100 rounded-lg select-none">
<button :id="$id(tabId)" @click="tabButtonClicked($el);" type="button" :class="{ 'bg-gray-100 text-gray-700' : tabButtonActive($el) }" class="relative z-20 inline-flex items-center justify-center w-full h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap">Tab1</button>
<button :id="$id(tabId)" @click="tabButtonClicked($el);" type="button" :class="{ 'bg-gray-100 text-gray-700' : tabButtonActive($el) }" class="relative z-20 inline-flex items-center justify-center w-full h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap">Tab2</button>
<button :id="$id(tabId)" @click="tabButtonClicked($el);" type="button" :class="{ 'bg-gray-100 text-gray-700' : tabButtonActive($el) }" class="relative z-20 inline-flex items-center justify-center w-full h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap">Tab3</button>
<div x-ref="tabMarker" class="absolute left-0 z-10 w-1/2 h-full duration-300 ease-out" x-cloak><div class="w-full h-full bg-gray-100 rounded-md shadow-sm"></div></div>
</div>
<div class="relative flex items-center justify-center w-full p-5 mt-2 text-xs text-gray-400 border rounded-md content border-gray-200/70">
<div :id="$id(tabId + '-content')" x-show="tabContentActive($el)" class="relative">
This is the content shown for Tab1
</div>
<div :id="$id(tabId + '-content')" x-show="tabContentActive($el)" class="relative" x-cloak>
And, this is the content for Tab2
</div>
<div :id="$id(tabId + '-content')" x-show="tabContentActive($el)" class="relative" x-cloak>
Finally, this is the content for Tab3
</div>
</div>
</div>