Add content to the tabs blade component

[MarJose123]

I've followed the Tabs Blade Components documentation but I'm not sure how and where do I need to put the content of my tab.

<x-filament::tabs label="Content tabs">
    <x-filament::tabs.item>
        Tab 1
    </x-filament::tabs.item>
 
    <x-filament::tabs.item>
        Tab 2
    </x-filament::tabs.item>
 
    <x-filament::tabs.item>
        Tab 2
    </x-filament::tabs.item>
</x-filament::tabs>

[leandrocfe]

I think you need to use the Alpine or Livewire to achieve this

<div x-data="{ tab: 'tab1' }">
    <x-filament::tabs label="Content tabs">
        <x-filament::tabs.item @click="tab = 'tab1'" :alpine-active="'tab === \'tab1\''">
            Tab 1
        </x-filament::tabs.item>

        <x-filament::tabs.item @click="tab = 'tab2'" :alpine-active="'tab === \'tab2\''">
            Tab 2
        </x-filament::tabs.item>

    </x-filament::tabs>

    <div>
        <div x-show="tab === 'tab1'">
            content 1...
        </div>

        <div x-show="tab === 'tab2'">
            content 2...
        </div>
    </div>
</div>

[MarJose123]

Thanks!

[fikurimax]

I tried to use x-transition along with the x-show but why is it like flashing, instead of smooth transitioning

[kwekubright]

I think you need to use the Alpine or Livewire to achieve this

<div x-data="{ tab: 'tab1' }">
    <x-filament::tabs label="Content tabs">
        <x-filament::tabs.item @click="tab = 'tab1'" :alpine-active="'tab === \'tab1\''">
            Tab 1
        </x-filament::tabs.item>

        <x-filament::tabs.item @click="tab = 'tab2'" :alpine-active="'tab === \'tab2\''">
            Tab 2
        </x-filament::tabs.item>

    </x-filament::tabs>

    <div>
        <div x-show="tab === 'tab1'">
            content 1...
        </div>

        <div x-show="tab === 'tab2'">
            content 2...
        </div>
    </div>
</div>

Please can you direct me to where in the filamentphp documentation i can find infomation on blade component implementation. Looks like i cant find a detailed documentation

[krekas]

https://filamentphp.com/docs/3.x/support/blade-components/tabs

[bilalelhaj]

how can someone render the active tab dynamically for example in a foreach loop?

@foreach($translations as $index => $translation)
    <x-filament::tabs.item
        @click="tab = 'tab{{ $index }}'"
        :alpine-active="'tab === \'tab{{ $index }}\''"
    >
        {{ \Str::upper($translation->language->code) }}
    </x-filament::tabs.item>
@endforeach

this above isnt working properly

[laabir]

<x-filament-panels::page x-data="{ activeTab: 'YourFirstTabLabel' }">
    <x-filament::tabs>
        @foreach ($this->getTabs() as $tab)
            <x-filament::tabs.item alpine-active="activeTab === '{{ $tab->getLabel() }}'" icon="{{ $tab->getIcon() }}"
                x-on:click="activeTab = '{{ $tab->getLabel() }}'">
                {{ $tab->getLabel() }}
            </x-filament::tabs.item>
        @endforeach
    </x-filament::tabs>

    @foreach ($this->getTabs() as $tab)
        <div x-show="activeTab === '{{ $tab->getLabel() }}'">
            @include('filament.resources.your.folder.structure' . '.' . strtolower($tab->getLabel()))
        </div>
    @endforeach
</x-filament-panels::page>