F
Filament•15mo ago
waleedGRT

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
waleedGRTOP•15mo ago
No description
waleedGRT
waleedGRTOP•15mo ago
Empty 😢
Dennis Koch
Dennis Koch•15mo 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
waleedGRTOP•15mo 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 Koch•15mo ago
It's the tab pills. Not the actual tab content
waleedGRT
waleedGRTOP•15mo ago
Okay, its working
Hugo
Hugo•14mo 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
ChesterS•14mo 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
Hugo•14mo 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

Did you find this page helpful?