Livewire ile Onay İletişim Kutusu Oluşturma: Adım Adım Kılavuz

Livewire, Laravel'den ayrılmadan dinamik arayüzlerin oluşturulmasını kolaylaştıran, Laravel için tam yığınlı bir çerçevedir.

Çok az kod içeren veya hiç kod içermeyen ve JavaScript olmadan onay diyalogları oluşturma yeteneği Livewire'ın özelliklerinden biridir.

Önemli bir işlemi gerçekleştirmeden önce bir onay iletişim kutusu eklemeyi her zamankinden daha kolay hale getiren yeni 'wire:confirm' HTML yönergesini kullanarak bu blog yazısında birkaç basit adımda Livewire kullanarak bir onay iletişim kutusu oluşturma sürecinde size yol göstereceğim. tehlikeli eylem.

Livewire'ı yükleyin

Livewire'ı kullanmak için Laravel projenize kurmanız gerekir. Bunu terminalinizde aşağıdaki komutu çalıştırarak yapabilirsiniz:

composer require livewire/livewire

Bu, Livewire'ı bir bağımlılık olarak yükleyecek ve varlıklarını ve yapılandırma dosyalarını yayınlayacaktır.

Ayrıca, bazı ayarları özelleştirmenize olanak tanıyan Livewire yapılandırma dosyasını yayınlamak için isteğe bağlı olarak aşağıdaki " php artisan livewire:publish --config " komutunu da çalıştırabilirsiniz.

Yeni wire:confirm' seçeneğinin kullanılması, onay iletişim kutusunun uygulamanıza eklenmesini son derece kolaylaştırır.

Wire:click gibi bir olayla birlikte "İptal" ve "Tamam" düğmelerine sahip basit bir onay için wire:confirm komutunu kullanabilirsiniz :

<div>
    <h2>Danger zone</h2>
    <button
        type="button"
        wire:click="delete"
        wire:confirm="Are you sure you want to delete this project?"
    >
        Delete this project
    </button>
</div>

Livewire, düğmeye tıkladığınızda yerel bir tarayıcı onayı açılır penceresi başlatacaktır.

Kullanıcıdan kasıtlı olarak felaket niteliğinde bir şey yapmak istediğini doğrulamak için bir şeyler girmesini isterseniz işler biraz daha ilginç hale gelir.

<div>
    <h2>Danger zone</h2>
    {{-- ... --}}
    <button
        type="button"
        wire:click="delete"
        wire:confirm.prompt="Are you sure?\n\nType DELETE to confirm|DELETE"
    >
        Delete this project
    </button>
</div>

'|DELETE', Livewire'ın eşleşmesi beklenen istemi bilmesini sağlar.

Düğmeye tıklandığında, bir ' Prompt() ' modu görünecek ve kullanıcıdan "DELETE" yazmasını isteyecektir. Kullanıcının girişinin eşleşmesi durumunda Livewire bileşeninin ' delete() ' yöntemi çağrılacaktır.

Onay kelimesi veya cümlesi, bileşen üzerindeki dinamik bir değeri yansıtacak şekilde değiştirilebilir. Örneğin, aşağıdakileri doğrulamak için kullanıcının proje adını vermesini isteyebilirsiniz:

Her şeyin büyük harfle yapılmasının en kolayı olacağını düşündüm çünkü bir uyarı vardı: metin eşleştirmesi büyük/küçük harfe duyarlıdır. Eğer benim gösterdiğim gibi tırnak işaretleri kullanmak istiyorsanız, ' wire:confirm ' özelliğinde HTML varlıklarını kullanmalısınız.

<div>
    <h2>Danger zone</h2>
    {{-- ... --}}
    <button
        type="button"
        wire:click="delete"
        wire:confirm.prompt="Are you sure?\n\nType &quot;{{ str($project_name)->upper() }}&quot; to confirm|{{ str($project_name)->upper() }}"
    >
        Delete this project
    </button>
</div>

Neden Livewire 'wire:confirm' HTML Yönergesini Kullanmalısınız?

Web sayfanızda önemli veya tehlikeli bir eylem gerçekleştirmeden önce bir onay iletişim kutusu eklemenin basit ve etkili bir yolunu arıyorsanız, wire:confirm HTML yönergesini kullanmayı düşünmelisiniz.

Bu yönerge, Laravel kullanarak dinamik ve etkileşimli web uygulamaları oluşturmayı kolaylaştıran bir kitaplık olan Livewire çerçevesinin bir parçasıdır.

wire:confirm yönergesi, kullanıcı kendisine Livewire eylemi eklenmiş bir öğeye tıkladığında yerel tarayıcı modunda görüntülenecek bir mesajı belirtmenize olanak tanır.

Örneğin, veritabanından bir kaydı silen bir düğmeniz varsa, wire:confirm="Bunu silmek istediğinizden emin misiniz?" düğme öğesine gidin ve kullanıcı, Livewire eylemi tetiklenmeden önce eylemini onaylamasını isteyen bir iletişim kutusu görecektir.

Bu şekilde, kazara veya kötü niyetli eylemlerin gerçekleşmesini önleyebilir ve kullanıcıya ne yaptıkları konusunda daha fazla bağlam ve netlik sağlayabilirsiniz.

wire:confirm yönergesinin, JavaScript veya özel bileşenler kullanmak gibi diğer onay diyalogları ekleme yöntemlerine göre birçok avantajı vardır.

İlk olarak, farklı tarayıcılar ve platformlar arasında basit ve tutarlı olan yerel tarayıcı ' Window.confirm ' modunu kullanır.

Stil, uyumluluk veya performans sorunları hakkında endişelenmenize gerek yok.

İkincisi, kullanımı çok kolaydır ve çok az kod gerektirir.

Sadece yönergeyi ve mesajı öğeye eklemeniz gerekir; gerisini Livewire halleder.

Üçüncüsü, Livewire çerçevesiyle sorunsuz bir şekilde bütünleşir; bu, onu wire:click , wire:submit veya wire:model gibi herhangi bir Livewire eylemiyle kullanabileceğiniz anlamına gelir.

Çözüm

wire:confirm yönergesi, web sayfanıza onay diyalogları eklemek için harika bir araçtır. Kullanımı basit, etkili ve kullanışlıdır.

Kullanıcı deneyimini ve web uygulamanızın güvenliğini geliştirmenize yardımcı olabilir.

wire:confirm yönergesi ve Livewire çerçevesi hakkında daha fazla bilgi edinmek isterseniz resmi belgeleri veya GitHub deposunu ziyaret edebilirsiniz.

Umarım bu not sizi denemeye ikna etmiştir. 😊