F
Filament•2mo ago
Matthew

Creating tabs from blade view

I want to create a tab schema from a blade component. I followed the documentation and have this 
<x-filament::tabs x-data="{ activeTab: 'tab1' }" vertical>
    <x-filament::tabs.item
        alpine-active="activeTab === 'tab1'"
        x-on:click="activeTab = 'tab1'"
    >
        Tab 1
    </x-filament::tabs.item>

    <x-filament::tabs.item
        alpine-active="activeTab === 'tab2'"
        x-on:click="activeTab = 'tab2'"
    >
        Tab 12121
    </x-filament::tabs.item>

    <x-filament::tabs.item
        alpine-active="activeTab === 'tab3'"
        x-on:click="activeTab = 'tab3'"
    >
        Tab 3
    </x-filament::tabs.item>
</x-filament::tabs>
<x-filament::tabs x-data="{ activeTab: 'tab1' }" vertical>
    <x-filament::tabs.item
        alpine-active="activeTab === 'tab1'"
        x-on:click="activeTab = 'tab1'"
    >
        Tab 1
    </x-filament::tabs.item>

    <x-filament::tabs.item
        alpine-active="activeTab === 'tab2'"
        x-on:click="activeTab = 'tab2'"
    >
        Tab 12121
    </x-filament::tabs.item>

    <x-filament::tabs.item
        alpine-active="activeTab === 'tab3'"
        x-on:click="activeTab = 'tab3'"
    >
        Tab 3
    </x-filament::tabs.item>
</x-filament::tabs>
This however only shows the tab but how do I add the content of each tab? This is my solution: 
 <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10" x-data="{ tab: 'tab1' }">
    <x-filament::tabs label="Content tabs" contained="true">
        <x-filament::tabs.item @click="tab = 'tab1'" :alpine-active="'tab === \'tab1\''">
            Details
        </x-filament::tabs.item>

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

        <x-filament::tabs.item @click="tab = 'tab3'" :alpine-active="'tab === \'tab3\''">
            Summary
        </x-filament::tabs.item>
    </x-filament::tabs>

    <div class="fi-fo-tabs-tab p-6">
        <div x-show="tab === 'tab1'">
            @include(...)
        </div>

        <div x-data x-init="@this.call('loadCastData')" x-show="tab === 'tab2'">
            @include(...)
        </div>

        <div x-data x-show="tab === 'tab3'">
            @include(...)
        </div>
    </div>
</div>
 <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10" x-data="{ tab: 'tab1' }">
    <x-filament::tabs label="Content tabs" contained="true">
        <x-filament::tabs.item @click="tab = 'tab1'" :alpine-active="'tab === \'tab1\''">
            Details
        </x-filament::tabs.item>

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

        <x-filament::tabs.item @click="tab = 'tab3'" :alpine-active="'tab === \'tab3\''">
            Summary
        </x-filament::tabs.item>
    </x-filament::tabs>

    <div class="fi-fo-tabs-tab p-6">
        <div x-show="tab === 'tab1'">
            @include(...)
        </div>

        <div x-data x-init="@this.call('loadCastData')" x-show="tab === 'tab2'">
            @include(...)
        </div>

        <div x-data x-show="tab === 'tab3'">
            @include(...)
        </div>
    </div>
</div>
Is there a simpler solution?
5 Replies
Dennis Koch
Dennis Koch•2mo ago
Nope. Anything "not simple" about a this?
Matthew
MatthewOP•2mo ago
😂 I thought maybe there was slot for it or something @Dennis Koch I guess the problem is that this isnt documented. I kinda had to figure it out alone. The documentation only shows how to make a tab but not how to add content Unless im mistaken Maybe this should be added to the docs?
Dennis Koch
Dennis Koch•2mo ago
Matthew
MatthewOP•2mo ago
yeah I wouldnt mind I was thinking of having x-slot='content', but you cant have multiple slots (one is already reserved for badge). Im trying to think of a better way to do this which would have to be coded, but then the user doesnt have to add classes to style it manually
Dennis Koch
Dennis Koch•2mo ago
Why do you need a slot?

Did you find this page helpful?