Filament•9mo ago

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•9mo ago

waleedGRT•9mo ago

Empty 😢

Dennis Koch•9mo 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•9mo 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•9mo ago

It's the tab pills. Not the actual tab content

waleedGRT•9mo ago

Okay, its working

Hugo•8mo 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•8mo 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•8mo 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

Gaming

Programming

Tabs Blade component content