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