Add content for the tabs blade component

How to add the content for the blade tabs component? Checked the docs but didn't really get a grasp on the same.

11 Replies

krekas•15mo ago

About what tabs are you talking?

lodekiOP•15mo ago

I added tabs on a blade view page like this .

  <x-filament::tabs label="tenant info tabs" x-data="{ activeTab: 'Units' }">
        <x-filament::tabs.item alpine-active="activeTab === 'Units'" x-on:click="activeTab = 'Units'" icon="heroicon-s-cube-transparent">
            Units
        </x-filament::tabs.item>

        <x-filament::tabs.item alpine-active="activeTab === 'Invoices'" x-on:click="activeTab = 'Invoices'" icon="heroicon-s-newspaper">
            Invoices
        </x-filament::tabs.item>

        <x-filament::tabs.item alpine-active="activeTab === 'Payments'" x-on:click="activeTab = 'Payments'" icon="heroicon-s-banknotes">
            Payments
        </x-filament::tabs.item>

        <x-filament::tabs.item alpine-active="activeTab === 'Statement'" x-on:click="activeTab = 'Statement'" icon="heroicon-s-clipboard-document">
            Statement
        </x-filament::tabs.item>
    </x-filament::tabs>

  <x-filament::tabs label="tenant info tabs" x-data="{ activeTab: 'Units' }">
        <x-filament::tabs.item alpine-active="activeTab === 'Units'" x-on:click="activeTab = 'Units'" icon="heroicon-s-cube-transparent">
            Units
        </x-filament::tabs.item>

        <x-filament::tabs.item alpine-active="activeTab === 'Invoices'" x-on:click="activeTab = 'Invoices'" icon="heroicon-s-newspaper">
            Invoices
        </x-filament::tabs.item>

        <x-filament::tabs.item alpine-active="activeTab === 'Payments'" x-on:click="activeTab = 'Payments'" icon="heroicon-s-banknotes">
            Payments
        </x-filament::tabs.item>

        <x-filament::tabs.item alpine-active="activeTab === 'Statement'" x-on:click="activeTab = 'Statement'" icon="heroicon-s-clipboard-document">
            Statement
        </x-filament::tabs.item>
    </x-filament::tabs>

They are switching as expected .Now I wanted to show content for each tab.

krekas•15mo ago

So add content to them? Where's the problem? Be more specific

lodekiOP•15mo ago

Like suppose tab 2[ invoices ] is active ,

       <x-filament::tabs.item alpine-active="activeTab === 'Invoices'" x-on:click="activeTab = 'Invoices'" icon="heroicon-s-newspaper">
            Invoices
        </x-filament::tabs.item>

       <x-filament::tabs.item alpine-active="activeTab === 'Invoices'" x-on:click="activeTab = 'Invoices'" icon="heroicon-s-newspaper">
            Invoices
        </x-filament::tabs.item>

.Tried to add content in between the <x-filament::tabs.item> but it appears together with the tab name.The question is, which area particularly holds the content of the tab.

krekas•15mo ago

do you know how blade components work? from what i see in the docs the slot is inside x-filament::tabs.item for the tab content in your case units, invoices, etc. should be content

lodekiOP•15mo ago

This' whats being shown .

lodekiOP•15mo ago

Want to achieve something like this .

lodekiOP•15mo ago

Resolved. Thank you.

_.shapeshifter•15mo ago

can you share how did you solve it?

Cyrillus Dodi•15mo ago

can you share the solution?

lodekiOP•15mo ago

Currently away from the machine .

Gaming

Programming

Add content for the tabs blade component