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

您将需要使用 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>

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 用于与后端代码交互。如果你想在前端交互之后设置前端元素的样式，请使用像 AlpineJS 或普通的 JS 框架 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 在他的回答。 :-)

Answer 4

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

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

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

Laravel and Livewire change button style on click

laravel

tailwind-css

laravel-livewire