filament tabs from blade dont have content

How can I add content to the tabs directly from blade? As it is now, Its just the tab items themselves

    <x-filament::tabs x-data="{ activeTab: 'tab1' }">
        <x-filament::tabs.item alpine-active="activeTab === 'tab1'" x-on:click="activeTab = 'tab1'">
            Details
        </x-filament::tabs.item>

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

    </x-filament::tabs>

    <x-filament::tabs x-data="{ activeTab: 'tab1' }">
        <x-filament::tabs.item alpine-active="activeTab === 'tab1'" x-on:click="activeTab = 'tab1'">
            Details
        </x-filament::tabs.item>

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

    </x-filament::tabs>

Solution:

```html <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''">...

Jump to solution

36 Replies

LeandroFerreira•9mo ago

https://github.com/filamentphp/filament/discussions/8587#discussioncomment-7043804

GitHub

Add content to the tabs blade component · filamentphp filament · Di...

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-fi...

MatthewOP•9mo ago

Thank you! :) Though I believe this should be mentioned in the docs

LeandroFerreira•9mo ago

send a PR 😀

MatthewOP•9mo ago

The content is outside of the field

krekas•9mo ago

Might be missing some styles

MatthewOP•9mo ago

possible, im looking into it rn

Dennis Koch•9mo ago

The tabs are only the tab bar. The rest is on you 😅

MatthewOP•9mo ago

😭 whyyy

Dennis Koch•9mo ago

It's not that hard to show/hide stuff in Livewire@if ($activeTab == 1)

MatthewOP•9mo ago

No, I can add content now Its just not displayed properly

Dennis Koch•9mo ago

What is "properly" ?

MatthewOP•9mo ago

Its shown outside of the tabs group

Dennis Koch•9mo ago

Where?

MatthewOP•9mo ago

the content

Dennis Koch•9mo ago

Use contained="false" and wrap it in a section Or is it contained="true"?

MatthewOP•9mo ago

neither of them worked I also tried class="fi-contained"

Dennis Koch•9mo ago

It's definitely not a class. I think it's an property on the tabs components. Check the source code

MatthewOP•9mo ago

Yep, that what im doing rn tryng to understand whats going on If I overwrite the item blade from vendor (as a test), then the UI breaks. NOt sure if thats intentional

LeandroFerreira•9mo ago

try

<x-filament::tabs contained="true"...

<x-filament::tabs contained="true"...

<div class="fi-fo-tabs-tab p-6">
    <p>content 1...</p>
</div>

<div class="fi-fo-tabs-tab p-6">
    <p>content 1...</p>
</div>

MatthewOP•9mo ago

@props([
    'contained' => true, <--- Overwrote this
    'label' => null,
])

<nav
    {{
        $attributes
            ->merge([
                'aria-label' => $label,
                'role' => 'tablist',
            ])
            ->class([
                'fi-tabs flex max-w-full gap-x-1 overflow-x-auto',
                'fi-contained border-b border-gray-200 px-3 py-2.5 dark:border-white/10' => $contained,
                'mx-auto rounded-xl bg-white p-2 shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10' => ! $contained,
            ])
    }}
>
    {{ $slot }}
</nav>

@props([
    'contained' => true, <--- Overwrote this
    'label' => null,
])

<nav
    {{
        $attributes
            ->merge([
                'aria-label' => $label,
                'role' => 'tablist',
            ])
            ->class([
                'fi-tabs flex max-w-full gap-x-1 overflow-x-auto',
                'fi-contained border-b border-gray-200 px-3 py-2.5 dark:border-white/10' => $contained,
                'mx-auto rounded-xl bg-white p-2 shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10' => ! $contained,
            ])
    }}
>
    {{ $slot }}
</nav>

MatthewOP•9mo ago

Ok, will try

MatthewOP•9mo ago

No, because when you have contained true, the UI breaks. I tried this before

Dennis Koch•9mo ago

Did you wrap it in a section as I said?

Solution

LeandroFerreira•9mo ago

<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\''">
            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 class="fi-fo-tabs-tab p-6">
        <div x-show="tab === 'tab1'">
            content 1...
        </div>

        <div x-show="tab === 'tab2'">
            content 2...
        </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\''">
            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 class="fi-fo-tabs-tab p-6">
        <div x-show="tab === 'tab1'">
            content 1...
        </div>

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

MatthewOP•9mo ago

Oh oops. Didnt see it. Yeah, with section it technically works. I also added class="m-[-1rem]" in the div to remove the borders

Dennis Koch•9mo ago

<x-filament::section>
    <x-filament::tabs contained>
        <x-filament::tabs.item wire:click="$set('activeTab', 'info')" :active="$activeTab == 'info'">
            Tab 1
        </x-filament::tabs.item>

        <x-filament::tabs.item wire:click="$set('activeTab', 'files')" :active="$activeTab == 'files'">
            Tab
        </x-filament::tabs.item>
    </x-filament::tabs>

    Your Tab contents
</x-filament::section>

<x-filament::section>
    <x-filament::tabs contained>
        <x-filament::tabs.item wire:click="$set('activeTab', 'info')" :active="$activeTab == 'info'">
            Tab 1
        </x-filament::tabs.item>

        <x-filament::tabs.item wire:click="$set('activeTab', 'files')" :active="$activeTab == 'files'">
            Tab
        </x-filament::tabs.item>
    </x-filament::tabs>

    Your Tab contents
</x-filament::section>

MatthewOP•9mo ago

legend. thank you ❤️ This works perfectly

Dennis Koch•9mo ago

Does this look different?

MatthewOP•9mo ago

Danke schon Dennis 🙂 yeah, it looks just like the original as in from a form layout

MatthewOP•9mo ago

Dennis Koch•9mo ago

Okay. I thought it had more padding.

Mahdi•8mo ago

How i can Saving data to relationships using tabs

 ->relationship('customer')

 ->relationship('customer')

Tabs::make('Tabs')
    ->tabs([
        Tabs\Tab::make('customer')
            ->schema([
                // ...
            ]),
        Tabs\Tab::make('Employee')
            ->schema([
                // ...
            ]),
    ])

Tabs::make('Tabs')
    ->tabs([
        Tabs\Tab::make('customer')
            ->schema([
                // ...
            ]),
        Tabs\Tab::make('Employee')
            ->schema([
                // ...
            ]),
    ])

MatthewOP•8mo ago

pivot table?

Mahdi•8mo ago

in form , i can solve it with section inside the tab. but i need use ->relationship('customer') in tab without section

MatthewOP•8mo ago

No, I mean, create a pivot table it will keep for example customer_id and employee_id

Gaming

Programming

filament tabs from blade dont have content