Laravel 和 Livewire 在单击时更改按钮样式

Question

我的 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>

一个按钮是蓝色的，另一个是灰色的。 当我点击设置按钮时我想切换颜色，当我再次点击返回添加按钮时也一样。

Answer 1

正如我所提到的，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 组件中的 Add / Set 状态（这很难说，因为您的标记中根本没有 livewire 代码），然后像@AliAli 在他的回答中描述的那样做。 :-)

Answer 2

编辑： 如果有人提出这个答案，这是需要存储按钮状态时的解决方案，在其他情况下，您应该遵循@Lupinity Labs 的答案。

您可以使用 Livewire 事件侦听器来更改前端。

首先，在 Livewire PHP 模型中声明变量，如：

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">

Answer 3

要使用 livewire 切换 HTML 属性，例如 class、id、href 等，您必须在 livewire (docs) 中使用 AlpineJS。例如，您想通过更改 livewire 组件中的某个内部状态（模型）来更改某些元素 CSS class 属性。例如通过单击某个链接。

/app/Http/Livewire/YourLivewireComponent.php

<?php
namespace App\Http\Livewire;
use Livewire\Component;

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')

Answer 4

您需要使用 tabindex。结帐focus change on button 工作示例。

<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>