Tabs Blade component content

I'm utilizing the Tabs Blade component within a Livewire component, but the content isn't being displayed. Here's the code, and I'm hoping someone can identify why it's not functioning as expected.
<div>
<x-filament::tabs label="Content tabs" x-data="{ activeTab: 'tab1' }" contained="false">
<x-filament::tabs.item alpine-active="activeTab === 'tab1'" x-on:click="activeTab = 'tab1'" active>
Tab 1
<x-slot name="badge">
5
</x-slot>
<x-slot name="content">
<h1> Content</h1> // THIS NOT WORKING
</x-slot>
</x-filament::tabs.item>
<x-filament::tabs.item alpine-active="activeTab === 'tab2'" x-on:click="activeTab = 'tab2'">
Tab 2
</x-filament::tabs.item>
<x-filament::tabs.item alpine-active="activeTab === 'tab3'" x-on:click="activeTab = 'tab3'">
Tab 2
</x-filament::tabs.item>
</x-filament::tabs>
</div>
<div>
<x-filament::tabs label="Content tabs" x-data="{ activeTab: 'tab1' }" contained="false">
<x-filament::tabs.item alpine-active="activeTab === 'tab1'" x-on:click="activeTab = 'tab1'" active>
Tab 1
<x-slot name="badge">
5
</x-slot>
<x-slot name="content">
<h1> Content</h1> // THIS NOT WORKING
</x-slot>
</x-filament::tabs.item>
<x-filament::tabs.item alpine-active="activeTab === 'tab2'" x-on:click="activeTab = 'tab2'">
Tab 2
</x-filament::tabs.item>
<x-filament::tabs.item alpine-active="activeTab === 'tab3'" x-on:click="activeTab = 'tab3'">
Tab 2
</x-filament::tabs.item>
</x-filament::tabs>
</div>
9 Replies
waleedGRT
waleedGRTOP13mo ago
No description
waleedGRT
waleedGRTOP13mo ago
Empty 😢
Dennis Koch
Dennis Koch13mo ago
The Blade component is only responsible for rendering the tab bar. The rest is on you. Just use x-show to toggle the right content
waleedGRT
waleedGRTOP13mo ago
It's weird that the tab component doesn't have a content parameter, but I'll try to fix that with x-show.
Dennis Koch
Dennis Koch13mo ago
It's the tab pills. Not the actual tab content
waleedGRT
waleedGRTOP13mo ago
Okay, its working
Hugo
Hugo12mo ago
Hi @waleedGRT, I have the same problem, could you please give me the solution for the x-show ? I can't get the x-show to work..
ChesterS
ChesterS12mo ago
@Hugo Here's a small example
<div x-data="{activeTab : $wire.$entangle('activeTab') }">
<x-filament::tabs label="Content tabs">
<x-filament::tabs.item
:active="$activeTab === 'tab_1'"
wire:click="$set('activeTab', 'tab_1')"
>
@lang('Tab 1')
</x-filament::tabs.item>

<x-filament::tabs.item
:active="$activeTab === 'tab_2'"
wire:click="$set('activeTab', 'tab_2')"
>
@lang('Tab 2')
</x-filament::tabs.item>
</x-filament::tabs>

<div>
<div x-show="activeTab == 'tab_1'">
Content here
</div>
<div x-show="activeTab == 'tab_2'">
More content
</div>
</div>
</div>
<div x-data="{activeTab : $wire.$entangle('activeTab') }">
<x-filament::tabs label="Content tabs">
<x-filament::tabs.item
:active="$activeTab === 'tab_1'"
wire:click="$set('activeTab', 'tab_1')"
>
@lang('Tab 1')
</x-filament::tabs.item>

<x-filament::tabs.item
:active="$activeTab === 'tab_2'"
wire:click="$set('activeTab', 'tab_2')"
>
@lang('Tab 2')
</x-filament::tabs.item>
</x-filament::tabs>

<div>
<div x-show="activeTab == 'tab_1'">
Content here
</div>
<div x-show="activeTab == 'tab_2'">
More content
</div>
</div>
</div>
and in your component add
#[Url]
public ?string $activeTab = 'tab_1'; // Put your default tab here
#[Url]
public ?string $activeTab = 'tab_1'; // Put your default tab here
You can probably do it with JS/Alpine only. Up to you.
Hugo
Hugo12mo ago
Nice thanks! I've just found a solution of my own, I'll share it anyway:
<x-filament-panels::page>

<x-filament::tabs>

@foreach($tabs as $key => $tab)
<x-filament::tabs.item
alpine-active="$wire.activeTab == '{{$key}}'"
wire:click="$set('activeTab', '{{$key}}')"
>
{{$tab}}
</x-filament::tabs.item>
@endforeach

</x-filament::tabs>


<div x-show="$wire.activeTab == '1'">
@livewire(\App\Filament\Resources\VolunteerResource\Widgets\VolunteerEngagementTable::class, ['volunteer' => $volunteer])
</div>

<div x-show="$wire.activeTab == '2'">
@livewire(\App\Filament\Resources\EstablishmentResource\Widgets\EstablishmentTable::class, ['volunteer' => $volunteer])
</div>

<div x-show="$wire.activeTab == '3'">
@livewire(\App\Filament\Resources\VolunteerResource\Widgets\VolunteerAdministrationTable::class, ['volunteer' => $volunteer])
</div>

<div x-show="$wire.activeTab == '4'">
@livewire(\App\Filament\Resources\ActivityResource\Widgets\ActivityTable::class, ['volunteer' => $volunteer])
</div>

</x-filament-panels::page>
<x-filament-panels::page>

<x-filament::tabs>

@foreach($tabs as $key => $tab)
<x-filament::tabs.item
alpine-active="$wire.activeTab == '{{$key}}'"
wire:click="$set('activeTab', '{{$key}}')"
>
{{$tab}}
</x-filament::tabs.item>
@endforeach

</x-filament::tabs>


<div x-show="$wire.activeTab == '1'">
@livewire(\App\Filament\Resources\VolunteerResource\Widgets\VolunteerEngagementTable::class, ['volunteer' => $volunteer])
</div>

<div x-show="$wire.activeTab == '2'">
@livewire(\App\Filament\Resources\EstablishmentResource\Widgets\EstablishmentTable::class, ['volunteer' => $volunteer])
</div>

<div x-show="$wire.activeTab == '3'">
@livewire(\App\Filament\Resources\VolunteerResource\Widgets\VolunteerAdministrationTable::class, ['volunteer' => $volunteer])
</div>

<div x-show="$wire.activeTab == '4'">
@livewire(\App\Filament\Resources\ActivityResource\Widgets\ActivityTable::class, ['volunteer' => $volunteer])
</div>

</x-filament-panels::page>
With $activeTab = '1' in my component. Thanks for your help
Want results from more Discord servers?
Add your server