Dalam Artikel ini, kita akan melihat cara menyesuaikan Tombol agar memiliki Animasi berikut menggunakan Livewire dan mengekstrak semuanya ke dalam Komponen Blade untuk digunakan kembali di mana saja ke dalam aplikasi Anda.

Kami akan menggunakan Komponen Tombol Angin dan memperluasnya sesuai dengan kebutuhan kami. Definisinya terlihat seperti di bawah ini:

<button {{ $attributes->merge(['type' => 'submit', 'class' => 'inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:ring ring-gray-300 disabled:opacity-25 transition ease-in-out duration-150']) }}>
    {{ $slot }}
</button>

Jangan merasa terintimidasi oleh semua Kelas CSS Tailwind itu. Kami tidak akan menyentuh mereka. Kita dapat menggunakan Komponen Tombol ini di dalam Komponen Livewire kita seperti di bawah ini:

<x-button wire:click="save" wire:loading.attr="disabled">
    Save
</x-button>

Yang kami inginkan adalah setiap kali tombol ini diklik, kami ingin mengubah Teks menjadi Menyimpan. Untuk melakukan itu kita akan menggunakan wire:loading properti.

<x-button wire:click="save" wire:loading.attr="disabled">
    Save
    <span wire:loading>Saving..</span>
</x-button>

Jadi sekarang "Menyimpan.." akan ditampilkan selama tombol kirim diklik. Dan itu akan disembunyikan ketika Panggilan AJAX selesai. Namun, selama Panggilan AJAX ini "Simpan" dan "Menyimpan.." ditampilkan. Jadi kita juga perlu menyembunyikan "Simpan" selama Panggilan AJAX ini. Kita bisa melakukannya menggunakan wire:loading.remove

<x-button wire:click="save" wire:loading.attr="disabled">
    <span wire:loading.remove>Save</span>
    <span wire:loading>Saving..</span>
</x-button>

Sekarang, meskipun ini berfungsi, ini akan menyebabkan masalah yang tidak terduga ketika Anda memiliki lebih dari 1 tombol di Halaman. Jadi itu selalu merupakan praktik yang baik untuk menentukan bahwa kita hanya ingin mengubah tampilan elemen-elemen ini ketika Panggilan AJAX yang sesuai dengan metode simpan dipanggil. Kita dapat melakukannya dengan menggunakan wire:target.

<x-button wire:click="save" wire:loading.attr="disabled">
    <span wire:loading.remove wire.target="save">Save</span>
    <span wire:loading wire.target="save">Saving..</span>
</x-button>

Pada tahap ini, Anda akan melihat tombol Anda memiliki perilaku yang sama seperti yang dibagikan di awal Artikel. Namun, kami dapat lebih meningkatkan keterbacaan kode kami dengan mengekstrak kode ke Komponen Tombol kami. Kami ingin ini sesederhana berikut:

<x-button wire:click="save" loading="Saving..">
  Save
</x-button>

Pertama-tama kita akan membuat loading properti di komponen tombol kita dan menetapkannya sebagai nilai default false.

@props(['loading' => false])

Kita dapat membaca Atribut Livewire di dalam Komponen Blade kita menggunakan kode di bawah ini:

$attributes->wire('click')->value()

Anda dapat membaca lebih lanjut tentang mereka di Livewire Docs.

Ketika kedua loading properti hadir dan wire:click atribut ada, kami ingin memasukkan tag rentang kami, jika tidak, kami hanya akan menampilkan Slot. Jadi Komponen Blade kita menjadi seperti ini.

@props(['loading' => false])

<button {{ $attributes->merge(['type' => 'submit', 'class' => 'inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:ring ring-gray-300 disabled:opacity-25 transition ease-in-out duration-150']) }}>
    @if ($loading && $target = $attributes->wire('click')->value())
        <span wire:loading.remove wire:target="{{$target}}">{{$slot}}</span>
        <span wire:loading wire:target="{{$target}}">{{$loading}}</span>
    @else
        {{ $slot }} 
    @endif
</button>

Jadi sekarang kita dapat menggunakan Komponen Tombol kita menggunakan atribut pemuatan serta tanpa atribut pemuatan.