Persist current tab while using Tabs Blade component

Hello, I am using Tabs Blade component inside the filament panel page,

<x-filament::tabs>
    <x-filament::tabs.item
        :active="$activeTab === 'tab1'"
        wire:click="$set('activeTab', 'tab1')"
    >
        Tab 1
    </x-filament::tabs.item>
 
    {{-- Other tabs --}}
</x-filament::tabs>

<x-filament::tabs>
    <x-filament::tabs.item
        :active="$activeTab === 'tab1'"
        wire:click="$set('activeTab', 'tab1')"
    >
        Tab 1
    </x-filament::tabs.item>
 
    {{-- Other tabs --}}
</x-filament::tabs>

Is there any way i can Persist the current tab in the URL's query string? Thank you 🙂

Solution:

For those who are looking for this solution, There is no direct filament way to do this, you need some manual alpine to make this work. in page class,...

Jump to solution

1 Reply

Solution

Sanchit Patil•3mo ago

For those who are looking for this solution, There is no direct filament way to do this, you need some manual alpine to make this work. in page class,

public function mount(int|string $record): void
{
    $this->record = $this->resolveRecord($record);
    
    //Add this code
    if (request()->has('tab')) {
        $this->activeTab = request('tab');
    }
}

public function mount(int|string $record): void
{
    $this->record = $this->resolveRecord($record);
    
    //Add this code
    if (request()->has('tab')) {
        $this->activeTab = request('tab');
    }
}

in the view file,

<div class="rounded-lg lg:col-span-2" x-data="{
    activeTab: @entangle('activeTab'),
    updateUrl() {
        const url = new URL(window.location.href);
        url.searchParams.set('tab', this.activeTab);
        history.pushState(null, '', url);
    }
}"
x-init="$watch('activeTab', () => updateUrl());">

<div class="rounded-lg lg:col-span-2" x-data="{
    activeTab: @entangle('activeTab'),
    updateUrl() {
        const url = new URL(window.location.href);
        url.searchParams.set('tab', this.activeTab);
        history.pushState(null, '', url);
    }
}"
x-init="$watch('activeTab', () => updateUrl());">

Gaming

Programming

Persist current tab while using Tabs Blade component