Skip to content

Instantly share code, notes, and snippets.

@umutyerebakmaz
Created September 2, 2021 13:45
Show Gist options
  • Save umutyerebakmaz/2e7a9b27b3a46d2a2995a5b6a5b2a128 to your computer and use it in GitHub Desktop.
Save umutyerebakmaz/2e7a9b27b3a46d2a2995a5b6a5b2a128 to your computer and use it in GitHub Desktop.
Example of Tab Component made using AlpineJS only
<div x-data="{ openTab: 1 }" class="flex flex-col-reverse">
<div class="hidden mt-6 w-full max-w-2xl mx-auto sm:block lg:max-w-none">
<div class="grid grid-cols-4 gap-6" aria-orientation="horizontal" role="tablist">
@foreach ($product->productImages as $productImage)
<button x-on:click="{ openTab = {{ $loop->iteration }} }" id="tabs-1-tab-{{ $loop->iteration }}"
class="relative h-24 bg-white rounded-md flex items-center justify-center text-sm font-medium uppercase text-gray-900 cursor-pointer hover:bg-gray-50 focus:outline-none focus:ring focus:ring-offset-4 focus:ring-opacity-50"
aria-controls="tabs-1-panel-{{ $loop->iteration }}"
:tabindex="openTab === {{ $loop->iteration }} ? 0 : -1"
:aria-selected="openTab === {{ $loop->iteration }} ? 'true' : 'false'"
role="tab"
type="button">
<span class="sr-only">
Angled view
</span>
<span class="absolute inset-0 rounded-md overflow-hidden">
<img src="{{ asset('/uploads/images') . '/' . $productImage->image }}" alt="{{ $productImage->image }}"
class="w-full h-full object-center object-cover">
</span>
<span class="ring-transparent absolute inset-0 rounded-md ring-2 ring-offset-2 pointer-events-none"
:class="{ 'ring-indigo-500': openTab === {{ $loop->iteration }}, 'ring-transparent': openTab !== {{ $loop->iteration }} }"
aria-hidden="true"></span>
</button>
@endforeach
</div>
</div>
<div class="w-full aspect-w-1 aspect-h-1">
@foreach ($product->productImages as $productImage)
<div x-show="openTab === {{ $loop->iteration }}" id="tabs-1-panel-{{ $loop->iteration }}"
aria-labelledby="tabs-1-tab-{{ $loop->iteration }}" role="tabpanel" tabindex="0">
<img src="{{ asset('/uploads/images') . '/' . $productImage->image }}" alt="{{ $productImage->image }}"
class="w-full h-full object-center object-cover sm:rounded-lg">
</div>
@endforeach
</div>
</div>
@shoemoney
Copy link

Thank you for sharing!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment