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
LeandroFerreira7mo ago
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
Matthew7mo ago
Thank you! :) Though I believe this should be mentioned in the docs
LeandroFerreira
LeandroFerreira7mo ago
send a PR 😀
Matthew
Matthew7mo ago
The content is outside of the field
No description
krekas
krekas7mo ago
Might be missing some styles
Matthew
Matthew7mo ago
possible, im looking into it rn
Dennis Koch
Dennis Koch7mo ago
The tabs are only the tab bar. The rest is on you 😅
Matthew
Matthew7mo ago
😭 whyyy
Dennis Koch
Dennis Koch7mo ago
It's not that hard to show/hide stuff in Livewire@if ($activeTab == 1)
Matthew
Matthew7mo ago
No, I can add content now Its just not displayed properly
Dennis Koch
Dennis Koch7mo ago
What is "properly" ?
Matthew
Matthew7mo ago
Its shown outside of the tabs group
Dennis Koch
Dennis Koch7mo ago
Where?
No description
Matthew
Matthew7mo ago
the content
Dennis Koch
Dennis Koch7mo ago
Use contained="false" and wrap it in a section Or is it contained="true"?
Matthew
Matthew7mo ago
neither of them worked I also tried class="fi-contained"
Dennis Koch
Dennis Koch7mo ago
It's definitely not a class. I think it's an property on the tabs components. Check the source code
Matthew
Matthew7mo 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
LeandroFerreira7mo 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
Matthew7mo 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
Matthew7mo ago
No description
Matthew
Matthew7mo ago
Ok, will try
Matthew
Matthew7mo ago
No, because when you have contained true, the UI breaks. I tried this before
No description
Dennis Koch
Dennis Koch7mo ago
Did you wrap it in a section as I said?
Solution
LeandroFerreira
LeandroFerreira7mo 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
Matthew7mo 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
No description
Dennis Koch
Dennis Koch7mo 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
Matthew7mo ago
legend. thank you ❤️ This works perfectly
Dennis Koch
Dennis Koch7mo ago
Does this look different?
Matthew
Matthew7mo ago
Danke schon Dennis 🙂 yeah, it looks just like the original as in from a form layout
Matthew
Matthew7mo ago
No description
Dennis Koch
Dennis Koch7mo ago
Okay. I thought it had more padding.
Mahdi
Mahdi7mo 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
Matthew7mo ago
pivot table?
Mahdi
Mahdi7mo ago
in form , i can solve it with section inside the tab. but i need use ->relationship('customer') in tab without section
No description
Matthew
Matthew7mo ago
No, I mean, create a pivot table it will keep for example customer_id and employee_id
Want results from more Discord servers?
Add your server