generated from boboko/starter
52 lines
1.8 KiB
PHP
52 lines
1.8 KiB
PHP
@props(['tabs' => [], 'size' => 'md', 'active' => null])
|
|
@php
|
|
$sizeClasses = match($size) {
|
|
'lg' => 'text-[36px] font-extrabold [--slide-h:5px]',
|
|
default => 'text-xl font-bold [--slide-h:3px]',
|
|
};
|
|
$activeId = $active ?? ($tabs[0]['id'] ?? null);
|
|
@endphp
|
|
|
|
{{--
|
|
Usage:
|
|
<x-ui.tabs :tabs="[
|
|
['id' => 'description', 'label' => 'Description'],
|
|
['id' => 'info', 'label' => 'Additional information'],
|
|
['id' => 'reviews', 'label' => 'Reviews (0)'],
|
|
]">
|
|
<x-slot name="description">...</x-slot>
|
|
<x-slot name="info">...</x-slot>
|
|
<x-slot name="reviews">...</x-slot>
|
|
</x-ui.tabs>
|
|
--}}
|
|
|
|
<div data-controller="tabs" {{ $attributes }}>
|
|
<div class="flex gap-10 mb-8" role="tablist">
|
|
@foreach($tabs as $tab)
|
|
<button
|
|
type="button"
|
|
role="tab"
|
|
data-tabs-target="button"
|
|
data-action="click->tabs#show"
|
|
data-panel="{{ $tab['id'] }}"
|
|
class="underline-slide font-display pb-1 {{ $sizeClasses }} {{ $tab['id'] === $activeId ? 'is-active' : '' }}"
|
|
aria-selected="{{ $tab['id'] === $activeId ? 'true' : 'false' }}"
|
|
aria-controls="tab-panel-{{ $tab['id'] }}"
|
|
id="tab-btn-{{ $tab['id'] }}"
|
|
>{{ $tab['label'] }}</button>
|
|
@endforeach
|
|
</div>
|
|
|
|
@foreach($tabs as $tab)
|
|
@php $panelKey = $tab['id']; $panel = $$panelKey ?? null; @endphp
|
|
<div
|
|
role="tabpanel"
|
|
data-tabs-target="panel"
|
|
id="tab-panel-{{ $tab['id'] }}"
|
|
aria-labelledby="tab-btn-{{ $tab['id'] }}"
|
|
tabindex="0"
|
|
@if($tab['id'] !== $activeId) hidden @endif
|
|
>{{ $panel }}</div>
|
|
@endforeach
|
|
</div>
|