F
FilamentMatthew

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''">...
L
LeandroFerreira17d 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...
M
Matthew17d ago
Thank you! :) Though I believe this should be mentioned in the docs
L
LeandroFerreira17d ago
send a PR 😀
M
Matthew17d ago
The content is outside of the field
No description
K
krekas17d ago
Might be missing some styles
M
Matthew17d ago
possible, im looking into it rn
DK
Dennis Koch17d ago
The tabs are only the tab bar. The rest is on you 😅
M
Matthew17d ago
😭 whyyy
DK
Dennis Koch17d ago
It's not that hard to show/hide stuff in Livewire@if ($activeTab == 1)
M
Matthew17d ago
No, I can add content now Its just not displayed properly
DK
Dennis Koch17d ago
What is "properly" ?
M
Matthew17d ago
Its shown outside of the tabs group
DK
Dennis Koch17d ago
Where?
No description
M
Matthew17d ago
the content
DK
Dennis Koch17d ago
Use contained="false" and wrap it in a section Or is it contained="true"?
M
Matthew17d ago
neither of them worked I also tried class="fi-contained"
DK
Dennis Koch17d ago
It's definitely not a class. I think it's an property on the tabs components. Check the source code
M
Matthew17d 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
L
LeandroFerreira17d 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>
M
Matthew17d 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>
M
Matthew17d ago
No description
M
Matthew17d ago
Ok, will try
M
Matthew17d ago
No, because when you have contained true, the UI breaks. I tried this before
No description
DK
Dennis Koch17d ago
Did you wrap it in a section as I said?
Solution
L
LeandroFerreira17d 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>
M
Matthew17d 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
DK
Dennis Koch17d 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>
M
Matthew17d ago
legend. thank you ❤️ This works perfectly
DK
Dennis Koch17d ago
Does this look different?
M
Matthew17d ago
Danke schon Dennis 🙂 yeah, it looks just like the original as in from a form layout
M
Matthew17d ago
No description
DK
Dennis Koch17d ago
Okay. I thought it had more padding.
M
Mahdi12d 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([
// ...
]),
])
M
Matthew12d ago
pivot table?
M
Mahdi12d ago
in form , i can solve it with section inside the tab. but i need use ->relationship('customer') in tab without section
No description
M
Matthew12d 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
More Posts
How do I make the bar chart widget to take the full height here?Listener on *resource* (not page)I know listeners on Pages are easy enough - but I can't get them to work on a resource. Essentially Why is this bad? Sending export completion notification to the UI as well as to the database.I played around with the built in filament/packages/actions/src/Exports/Jobs/ExportCompletion.php haCall $livewire->js in header actions?I have this table action which just opens a link with a token, it uses the livewire component to exesticky table headerHello, I've searched this question here and all the solutions did not work, they did do something buDateTimePicker not working hourFormat propertyI'm trying to develop my page with a DateTimePicker able to switch between AM/PM hours, a 12hr formaHow to get data from custom Livewire component that is part of form?I have this Livewire component in my form in an action. How can I get data from that Livewire componRelationManager table action not workingIn a `RelationManager`, the following action works as a header action, but not as a row action. ClicUnderstanding the DatabaseNotificationsSent event. Not seeing websocket notifications in admin panelI have Echo and Soketi running for real time notifications, where I want to dispatch filaments builtHow to enforce client loads newest theme.css?We build the theme CSS on each deploy. How can we tell clients to ignore local cache, and load the nWhat to use: Repeater or Key-valueI have checked the docs of both repeater and key-value form builder fields. I liked both. I am confReferenceError: selectedRows is not definedI have a custom filament page. Super simple: an infolist and a table ``` <x-filament-panels::page> Macro is not working when testing with PestHello all I am using this plugin https://github.com/outer-web/filament-translatable-fields and when Why the authenticate rateLimit &throttled not work ?Why the authenticate rateLimit &throttled not work ?TextColumn action->button not working as expected```php Tables\Columns\TextColumn::make('asdas') ->label('See 2 items') ->action( TabFilament resource not showing on websitei made a migration, model and now a resource i followed a tutorial to see how i can make a resource How to translate filament filepond placeholder?I've tried to find it in the vendor, but idk how to translate itFill Select on relationmanager creation formHow can i pre-fill parent relation selector on a create form on a relationmananger? On the Practice Help with github actionsI copied the workflow file from filament: ```yml name: phpstan on: push: pull_request: jobs: File upload preview green gradientHow do I remove the green gradient so that I can see the whole logo while uploading it ? ```<?php