Блог

У меня есть две кнопки в tailwindcss в моем

 <div class="flex flex-row">

<button class="-ml-px relative inline-flex items-center space-x-2 px-4 py-4 border border-blue-300 text-sm font-medium rounded-l-md text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-blue-500">
<span>Add</span>
</button>

<button class="-ml-px relative inline-flex items-center space-x-2 px-4 py-4 border border-gray-300 text-sm font-medium text-gray-900 bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-blue-500">
<span>Set</span>
</button>

</div>
 

одна кнопка синяя, а другая серая.
Я хочу переключать цвет при нажатии на кнопку Set, а также при повторном нажатии кнопки «Назад», чтобы добавить кнопку.

Как я уже упоминал, Livewire предназначен для взаимодействия с серверным кодом. Если вы хотите стилизовать элементы интерфейса после взаимодействия с интерфейсом, используйте фреймворк JS, такой как AlpineJS или обычный CSS.

Если вы действительно просто хотите изменить цвет фокуса, вы можете выбрать вариант ответа @Digvijay:

 <div class="flex space-x-4">
  <button class="flex px-4 py-2 bg-gray-100 text-gray-900 cursor-pointer hover:bg-blue-200 focus:text-blue-700 focus:bg-blue-200 focus:outline-none focus:ring-blue-600" tabindex="1">Add</button>
  <button class="flex px-4 py-2 bg-gray-100 text-gray-900 cursor-pointer hover:bg-blue-200 focus:text-blue-700 focus:bg-blue-200 focus:outline-none focus:ring-gray-600" tabindex="2">Set</button>
</div>
 

(см https://play.tailwindcss.com/mwspfpsTuU )

Если вы хотите, чтобы цвета сохранялись даже после потери фокуса, вы можете использовать что-то подобное с AlpineJS:

 <div x-data="{ highlightedButton: '' }" class="flex space-x-4">
  <button @click="highlightedButton='add'" class="flex px-4 py-2 bg-gray-100 text-gray-900 hover:bg-blue-200" :class="{'bg-blue-400': highlightedButton === 'add'}" tabindex="1">Add</button>
  <button @click="highlightedButton='set'" class="flex px-4 py-2 bg-gray-100 text-gray-900 hover:bg-blue-200" :class="{'bg-blue-400': highlightedButton === 'set'}" tabindex="2">Set</button>
</div>
 

И, наконец, если вы все равно отслеживаете состояние добавления / установки в компоненте Livewire (что трудно сказать, потому что в вашей разметке вообще нет кода livewire), то сделайте это так, как @AliAli описал в своем ответе. 🙂

Редактировать: если кто-нибудь пришел к этому ответу, это решение, когда требуется сохранение состояния кнопки, в других случаях вам следует следовать ответу @Lupinity Labs.

Вы можете использовать прослушиватели событий Livewire для изменения интерфейса.

Сначала объявите переменные внутри PHP-модели Livewire, например:

 public $isSetClicked = false;
public $isAddClicked = false;
 

Затем функции decalre для обработки события onClick:

 public function SetClicked()
    {
     //this will give you toggling behavior
     $this->isSetClicked == false ? $this->isSetClicked = true : $this->isSetClicked = false;
}
 

и объявляют AddClicked таким же образом.

Затем внутри вашего шаблона Livewire добавьте события к кнопкам, например:

 <button wire:click="SetClicked()" class="{{$isSetClicked  ? "color-class" : "other-color-class"}} the rest of your css classes">
 

Чтобы переключать атрибуты HTML с помощью livewire, например class, id, href и так далее, вам нужно работать с AlpineJS внутри livewire (docs). Например, вы хотите изменить некоторый атрибут класса CSS элемента, изменив некоторое внутреннее состояние (модель) внутри вашего компонента livewire. Например, нажав на какую-либо ссылку.

/app/Http/Livewire/YourLivewireComponent.php

 <?php
namespace AppHttpLivewire;
use LivewireComponent;

class YourLivewireComponent extends Component
{
    public $classChanged = false;

    public function render()
    {
        return view('livewire.your-liveweire-component');
    }

    public function myClickFunction()
    {
        $this->classChanged = true;
    }
}
 

/resources/views/livewire/your-livewire-component.blade.php

 <a href="#" wire:click="myClickFunction">Click me</a>
<div x-data="{ alpine_class_changed: @entangle('classChanged') }" class="some classes" x-bind:class="alpine_class_changed ? 'my_add_class' : ''">some text</div>
 

/resources/views/somelaraveltemplate.blade.php

 <p>some HTML code</p>
@livewire('your-liveweire-component')
 

Вам нужно будет использовать tabindex. Проверьте изменение фокуса на рабочем примере кнопки.

 <div class="flex space-x-4">
  <div class="flex px-4 py-2 bg-blue-600 text-blue-100 cursor-pointer hover:bg-blue-700 focus:text-blue-700 focus:bg-blue-200 focus:outline-none focus:ring-blue-600" tabindex="1">Add</div>
  <div class="flex px-4 py-2 bg-gray-100 text-gray-600 cursor-pointer hover:bg-gray-200 focus:text-gray-100 focus:bg-gray-600 focus:outline-none focus:ring-gray-600" tabindex="1">Set</div>
</div>