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•3mo 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...

Matthew•3mo ago

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

LeandroFerreira•3mo ago

send a PR 😀

Matthew•3mo ago

The content is outside of the field

krekas•3mo ago

Might be missing some styles

Matthew•3mo ago

possible, im looking into it rn

Dennis Koch•3mo ago

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

Matthew•3mo ago

😭 whyyy

Dennis Koch•3mo ago

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

Matthew•3mo ago

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

Dennis Koch•3mo ago

What is "properly" ?

Matthew•3mo ago

Its shown outside of the tabs group

Dennis Koch•3mo ago

Where?

Matthew•3mo ago

the content

Dennis Koch•3mo ago

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

Matthew•3mo ago

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

Dennis Koch•3mo ago

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

Matthew•3mo 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•3mo 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>

Matthew•3mo 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>

Matthew•3mo ago

Ok, will try

Matthew•3mo ago

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

Dennis Koch•3mo ago

Did you wrap it in a section as I said?

Solution

LeandroFerreira•3mo 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>

Matthew•3mo 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•3mo 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>

Matthew•3mo ago

legend. thank you ❤️ This works perfectly

Dennis Koch•3mo ago

Does this look different?

Matthew•3mo ago

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

Matthew•3mo ago

Dennis Koch•3mo ago

Okay. I thought it had more padding.

Mahdi•3mo 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([
                // ...
            ]),
    ])

Matthew•3mo ago

pivot table?

Mahdi•3mo ago

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

Matthew•3mo 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