F
Filament•4w ago
JungleOnly

Changing <x-filament:button> color on click of the button

Hi folks, I'm trying to build a tabbed Blade-View of some of my livewire components. 
<x-filament::page>
    <div x-data="{ tab: 'new-employees' }">

        <div class="flex space-x-2 mb-4">
            <x-filament::button color="gray" class="text-white px-4 py-1 rounded"
                x-bind:class="tab === 'new-employees' ? 'bg-green-600' : 'bg-gray-400'" 
                @click="tab = 'new-employees'">
                Neue Mitarbeiter
            </x-filament::button>

            <x-filament::button color="gray" class="text-white px-4 py-1 rounded"
                x-bind:class="tab === 'facility-changes' ? 'bg-green-600' : 'bg-gray-400'"
                @click="tab = 'facility-changes'">
                Einrichtungswechsel
            </x-filament::button>

            <x-filament::button color="gray" class="text-white px-4 py-1 rounded"
                x-bind:class="tab === 'employment-changes' ? 'bg-green-600' : 'bg-gray-400'"
                @click="tab = 'employment-changes'">
                Anstellungstypwechsel
            </x-filament::button>

        </div>

        <div>
            <br>
        </div>

        <div>
            <div x-show="tab === 'new-employees'"> @livewire('new-employee-table') </div>
            <div x-show="tab === 'facility-changes'"> @livewire('facility-change-table') </div>
            <div x-show="tab === 'employment-changes'"> @livewire('employment-change-table') </div>
        </div>

    </div>
</x-filament::page>
<x-filament::page>
    <div x-data="{ tab: 'new-employees' }">

        <div class="flex space-x-2 mb-4">
            <x-filament::button color="gray" class="text-white px-4 py-1 rounded"
                x-bind:class="tab === 'new-employees' ? 'bg-green-600' : 'bg-gray-400'" 
                @click="tab = 'new-employees'">
                Neue Mitarbeiter
            </x-filament::button>

            <x-filament::button color="gray" class="text-white px-4 py-1 rounded"
                x-bind:class="tab === 'facility-changes' ? 'bg-green-600' : 'bg-gray-400'"
                @click="tab = 'facility-changes'">
                Einrichtungswechsel
            </x-filament::button>

            <x-filament::button color="gray" class="text-white px-4 py-1 rounded"
                x-bind:class="tab === 'employment-changes' ? 'bg-green-600' : 'bg-gray-400'"
                @click="tab = 'employment-changes'">
                Anstellungstypwechsel
            </x-filament::button>

        </div>

        <div>
            <br>
        </div>

        <div>
            <div x-show="tab === 'new-employees'"> @livewire('new-employee-table') </div>
            <div x-show="tab === 'facility-changes'"> @livewire('facility-change-table') </div>
            <div x-show="tab === 'employment-changes'"> @livewire('employment-change-table') </div>
        </div>

    </div>
</x-filament::page>
This code is currently working flawlessly in terms of switching around the tabs by clicking on the corresponding buttons. What's not working is switching up the button's color in the @click action. Can someone provide help that previously solved this problem? Thank you for any input!
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?