How to use tabs?

[maxacarvalho]

Hi, I'm feeling very stupid at this point so please have patience with me.

I'm trying to use the tabs component but, I have no idea how.

The docs point out how to add the tabs but I have no clue about how to add content and link it to the tabs.

Any one willing to help?

Thank you

[PseudoDevs]

Where did you want to use your tab?
Custom views or on a specific resource?

If you want to use the Tabs on a custom view you can try this

<x-filament-panels::page>
    <div x-data="{ tab: 'tab1' }">
        <x-filament::tabs label="Content tabs">
            <x-filament::tabs.item @click="tab = 'tab1'" :alpine-active="'tab === \'tab1\''">
                Events
            </x-filament::tabs.item>

            <x-filament::tabs.item @click="tab = 'tab2'" :alpine-active="'tab === \'tab2\''">
                Events Role
            </x-filament::tabs.item>

        </x-filament::tabs>

        {{-- Display Events Resource Table --}}

        <div class="mt-2">
            <div x-show="tab === 'tab1'">
                <livewire:events.list-events/> // your livewire view
            </div>
            <div x-show="tab === 'tab2'">
                <livewire:events.list-events-role/>  // your livewire view
            </div>
        </div>
    </div>
    {{-- Display Events Role Resource Table --}}
</x-filament-panels::page>
`

[maxacarvalho]

Awesome, thank you!!!

[vlowe85]

This is just what i needed but have some issues..

If you put a filament form and table in separate tabs like this

       <div class="mt-6">
            <div x-show="tab === 'tab1'">
                <x-filament-panels::form wire:submit="submit">
                    {{ $this->form }}
                    <div>
                        <x-filament::button form="submit" type="submit">
                            Submit
                        </x-filament::button>
                    </div>
                </x-filament-panels::form>
            </div>

            <div x-show="tab === 'tab2'">
                {{ $this->table }}
            </div>
        </div>

And the form and table have actions, then the modals don't pop, or you might try open a modal on the form and nothing happens and switch to the table tab and you see the modal you opened earlier on the form tab.

Also the console has many Alpine Expression Error: isRecordSelected is not defined errors

[leandrocfe]

There is an example here
#8587 (comment)

[CoringaWc]

How to set the contained attribute to false?