[tabs] use :current for custom activation

[ArvidDeJong]

I frequently use tabs without changing the URL, and it would be great to have an option to manually set which tab is active.

Perhaps this option already exists, but I haven’t been able to find it in the documentation.

[jeffchown]

@ArvidDeJong If I understand correctly, you can just wire:model a property to your tabs.

e.g.

public string $currentTab = 'account';

then in your Blade:

<flux:tabs wire:model="currentTab">
    <flux:tab name="profile">Profile</flux:tab>
    <flux:tab name="account">Account</flux:tab>
    <flux:tab name="billing">Billing</flux:tab>
</flux:tabs>

[ArvidDeJong]

Thank you for your response and the suggestion! This is exactly what I’m looking for, but unfortunately, it’s still not working as expected on my end.

I’ve been working full-time with Livewire for a few years now, so I think I might be overlooking something small. Here’s the code I’m currently using:

In my controller:

public string $currentView = 'rights';

In my Blade file:

<flux:tabs class="mb-4 px-4" wire:model="currentView">
    <flux:tab name="update" href="{{ route('staff.update', ['staff' => $staff]) }}">Profile</flux:tab>
    <flux:tab name="rights" href="{{ route('staff.rights', ['staff' => $staff]) }}">Rights</flux:tab>
</flux:tabs>

I’ve also tried a different setup, without href attributes in the <flux:tab> tags:

<flux:tabs class="mb-4 px-4" wire:model="currentView">
    <flux:tab>Profile</flux:tab>
    <flux:tab name="rights">Rights</flux:tab>
</flux:tabs>

Despite these adjustments, I’m still not getting the desired behavior. Do you have any suggestions for debugging or potential details I might be missing?

Thanks in advance! 🙏

[jeffchown]

@ArvidDeJong First thing I see is the public string $currentView = 'rights'; you say is in your Controller. It should be in your Livewire component.

Other than that, I can't tell what you are trying to accomplish from your code snippet.
Can you describe the desired behaviour? It also might be easier to help if you can provide a Volt component that people can cut & paste that duplicates the issue.

[ArvidDeJong]

Sorry, my fault, i ment Livewire component

namespace App\Livewire\Staff;

use App\Models\Staff;
use Flux\Flux;
use Livewire\Component;

class StaffRights extends Component
{
    use StaffTrait;

    public string $currentView = 'rights';
    
    // bla bla
 }

[ju5t]

This does seem to work for me. I'm using Volt for brevity here.

<?php
\Livewire\Volt\state(['tab' => 'account']);
?>

<div class="flex p-6">
    <div class="space-x-0 space-y-3 lg:space-y-3 lg:space-x-0 lg:mt-0">
        <flux:tab.group>
            <flux:tabs wire:model="tab">
                <flux:tab name="profile">Profile</flux:tab>
                <flux:tab name="account">Account</flux:tab>
                <flux:tab name="billing">Billing</flux:tab>
            </flux:tabs>

            <flux:tab.panel name="profile">...</flux:tab.panel>
            <flux:tab.panel name="account">...</flux:tab.panel>
            <flux:tab.panel name="billing">...</flux:tab.panel>
        </flux:tab.group>
    </div>
</div>

[ArvidDeJong]

I'm not sure why it didn't work before, but it's working fine now:

<flux:tabs class="mt-8 px-4" wire:model="showTab">
    <flux:tab name="active" wire:click="$set('showTab','active')">
        Active
    </flux:tab>
    <flux:tab name="trashed" wire:click="$set('showTab','trashed')">
        Trashed 
        <flux:badge color="zinc">
            {{ $trashed }}
        </flux:badge>
    </flux:tab>
</flux:tabs>