Merhaba! Ben Aykhan, 1999 doğumlu bir Azerbaycanlıyım ve 2017 yılından bu yana programlamayla ilgileniyorum. Teknolojinin büyülü dünyası beni her zaman etkilemiştir ve bu merakımı kendi blogumda paylaşarak daha geniş bir kitleyle buluşturmayı amaçlıyorum.
"Livewire alert Nasıl indirilir ve kullanılır?"
Livewire Alert, Livewire bileşenleriyle sorunsuz bir şekilde entegre olabilen basit bir uyarı aracı paketidir. SweetAlert2'yi altyapı olarak kullanır ve özel JavaScript'e ihtiyaç duymadan SweetAlert2'nin işlevselliğini size sunar. bu makalede livewire 2.x versiyonunu kullanacağız. Bunun livewire 3.x versiyonundan tek farkı livewire 3.x versiyonunda $listeners özelliğinin kaldırılmasıdır. $listeners yerine neler kullanılması gerektiğini bilmiyorsanız buradan daha detaylı olarak baka bilirsiniz
İnteraktif Demo için buraya göz atabilirsiniz: Livewire Alert Interactive Demo
Interaktif demo ile kod yazmadanda herşeyi düzenleye bilir ve kullana bilirsiniz, yanlız bazı özelliklerin kurulumunu ve nasıl eklenebileceğini anlamak için mekaleyi sonuna kadar okumakta fayda vardır.
composer require jantinnerezo/livewire-alert
Daha sonra, @livewireScripts'den sonraki şablonunuza script bileşenini ekleyin.
SweetAlert2 betiği varsayılan olarak dahil edilmediğinden, livewire alert betisinden önce onu dahil ettiğinizden emin olun.
<body>
@livewireScripts
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<x-livewire-alert::scripts />
</body>
Livewire-alert.js'yi yayınlamak için betiyi manuel olarak da ekleyebilirsiniz:
php artisan vendor:publish --tag=livewire-alert:assets
Ardından, view'inizde, <x-livewire-alert::scripts /> bileşeni ile içerideki betiyi içeri almak yerine yayınlanan betiyi içerebilirsiniz.
<script src="{{ asset('vendor/livewire-alert/livewire-alert.js') }}"></script>
<x-livewire-alert::flash />
Gereksinimler Bu paket, Livewire bileşenleriyle kullanılmak üzere tasarlanmıştır. Yalnızca Livewire projeleriyle kullanmak üzere tasarlanmıştır.
- PHP 7.2 veya daha yükseği
- Laravel 7, 8, 9 ve 10
- Livewire
- SweetAlert2
Kullanım Livewire Alert'ı LivewireAlert özelliğini kullanarak kullanabilirsiniz.
use Jantinnerezo\LivewireAlert\LivewireAlert;
class Index extends Component
{
use LivewireAlert;
public function submit()
{
$this->alert('success', 'Basic Alert');
}
}
Farklı uyarı simgelerini görüntüleme:
$this->alert('success', 'Success is approaching!');
$this->alert('warning', 'The world has warned you.');
$this->alert('info', 'The fact is you know your name :D');
$this->alert('question', 'How are you today?');
Toast bildirim tedavisini devre dışı bırakma:
$this->alert('info', 'This is not as toast alert', [
'toast' => false
]);
Uyarıyı konumlandırma:
$this->alert('info', 'Centering alert', [
'position' => 'center'
]);
Bir uyarının pozisyonları:
- top
- top-start
- top-end
- center
- center-start
- center-end
- bottom
- bottom-start
- bottom-end
Butonlar SweetAlert2'nin varsayılan olarak gösterilmeyen 3 düğmesi vardır.
Onay düğmesini göstermek için, onay düğmesini gösterme ayarını geçmesi ve true olarak ayarlaması yeterlidir.
$this->alert('question', 'How are you today?', [
'showConfirmButton' => true
]);
Onay düğmesi metnini değiştirme:
$this->alert('question', 'How are you today?', [
'showConfirmButton' => true,
'confirmButtonText' => 'Good'
]);
Onay düğmesine tıklandığında bir olay ekleyin. İlk olarak, onay düğmesine tıklandığında tetiklenecek bir işlev oluşturun:
public function confirmed()
{
// Bir şey yap
}
Bu işlevi kaydedilmiş olay dinleyicileri dizisine eklemeyi unutmayın.
protected $listeners = [
'confirmed'
];
Veya
public function getListeners()
{
return [
'confirmed'
];
}
Ve ardından olayın yapılandırmasına onConfirmed anahtarını geçirin.
$this->alert('question', 'How are you today?', [
'showConfirmButton' => true,
'confirmButtonText' => 'Good',
'onConfirmed' => 'confirmed'
]);
Ayrıca, olaya alert yanıtını almak için bir parametre geçirebilirsiniz.
$this->alert('warning', 'Please enter password', [
'showConfirmButton' => true,
'confirmButtonText' => 'Submit',
'onConfirmed' => 'confirmed',
'input' => 'password',
'inputValidator' => '(value) => new Promise((resolve) => '.
' resolve('.
' /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#$^+=!*()@%&]).{8,}$/.test(value) ?'.
' undefined : "Error in password"'.
' )'.
')',
'allowOutsideClick' => false,
'timer' => null
]);
public function confirmed($data)
{
// Input değerini alın ve istediğiniz herhangi bir işlemi yapın
$password = $data['value'];
}
Aynı şeyi reddet ve iptal düğmesini göstermek için yapın. Her düğme için bir işlev oluşturun ve bunu olay dinleyicilerine kaydedin.
public function denied()
{
// Reddedildiğinde yapılacak bir şey
}
public function cancelled()
{
// İptal edildiğinde yapılacak bir şey
}
public function getListeners()
{
return [
'denied',
'dismissed'
];
}
Düğmelerin gösterilip gösterilmeyeceğini belirten showDenyButton ve showCancelButton'ı true olarak ayarlamayı unutmayın.
$this->alert('warning', 'Alert with deny and cancel button', [
'showDenyButton' => true,
'denyButtonText' => 'Deny',
'showCancelButton' => true,
'cancelButtonText' => 'Cancel',
'onDenied' => 'denied',
'onDismissed' => 'cancelled'
]);
Yalnızca belirli bir bileşene olayları göndermek için olayı doğrudan geçirmek yerine, bileşene ve dinleyicilere sahip bir dizi geçirin.
'onConfirmed' => [
'component' => 'livewire-component',
'listener' => 'confirmed'
];
Her seferinde onay uyarısı yapılandırması tanımlamak istemiyor musunuz? Confirm yöntemini kullanın.
Varsayılan onay ayarlarını her zaman değiştirebilir ve yapılandırabilirsiniz.
$this->confirm('Are you sure do want to leave?', [
'onConfirmed' => 'confirmed',
]);
Flash Bildirim Alert'ı bir flash bildirimi olarak da kullanabilirsiniz. Dördüncü parametrede yönlendirme rotasını iletebilirsiniz, varsayılan olarak /'ye yönlendirir.
$this->flash('success', 'Successfully submitted form', [], '/');
Yapılandırma Livewire-alert.php yapılandırma dosyasını yayınlayarak varsayılan uyarı yapılandırmasını geçersiz kılabilirsiniz.
php artisan vendor:publish --tag=livewire-alert:config
[
'alert' => [
'position' => 'top-end',
'timer' => 3000,
'toast' => true,
'text' => null,
'showCancelButton' => false,
'showConfirmButton' => false
],
'confirm' => [
'icon' => 'warning',
'position' => 'center',
'toast' => false,
'timer' => null,
'showConfirmButton' => true,
'showCancelButton' => true,
'cancelButtonText' => 'No',
'confirmButtonColor' => '#3085d6',
'cancelButtonColor' => '#d33'
]
]
Özelleştirmeler Alert stilini özelleştirebilirsiniz, özel sınıflarınızı geçirerek TailwindCSS ile mükemmel bir şekilde çalışır.
[
'customClass' => [
'container' => '',
'popup' => '',
'header' => '',
'title' => '',
'closeButton' => '',
'icon' => '',
'image' => '',
'content' => '',
'htmlContainer' => '',
'input' => '',
'inputLabel' => '',
'validationMessage' => '',
'actions' => '',
'confirmButton' => '',
'denyButton' => '',
'cancelButton' => '',
'loader' => '',
'footer' => ''
]
];
Daha fazla özelleştirme ve yapılandırma ayrıntıları için lütfen SweetAlert2'ye göz atın.
Bu detaylı rehber, Livewire Alert'ı kullanmanın temellerini ve çeşitli özelliklerini anlatarak, web geliştiricilerin Livewire projelerinde uyarıları sorunsuz bir şekilde yönetmelerine olanak tanır. SweetAlert2'nin gücünü Livewire ile birleştirerek, kullanıcı dostu bildirimler oluşturmak artık daha kolay. Eğer web uygulamalarınızda etkileşimli ve şık uyarılar kullanmak istiyorsanız, Livewire Alert'ı anlamak ve kullanmak, projelerinize değer katacaktır. Yaratıcı ve etkili bir şekilde kullanabileceğiniz Livewire Alert ile web uygulamalarınızı daha çekici ve kullanıcı dostu hale getirebilirsiniz.
#Laravel
#Laravel haqqında bilgiler
#Laravel haqqında bilgi
#Livewire
#Livewire nedir?
#Livewire ne işe yarar?
#Livewire nasıl kullanılır?
#Livewire nasıl kurulur?
#Laravel kütüphaneleri
#Laravel paketleri
#Laravel 10
#Livewire alert
#Livewire alert kullanımı
#Livewire alert kurulum
#Livewire alert hakkında
#Livewire alert nasıl kullanılır
#Livewire alert tipleri
#Laravel-livewire
#Laravel-livewire nedir
#Laravel-livewire nasıl kullanılır
#Laravel-livewire kurulumu
#Laravel-livewire kullanımı
Aykhan Gasimzade
Full Stack Developer
Beni izleyebilirsin
New Mix Club All Rights Reserved © 2024