إشعارات Toast في Livewire

إشعارات Toast:

الإرسال من المكون

public function save()
{
    Post::create($this->data);
    $this->dispatch('toast', message: 'تم الحفظ!', type: 'success');
}

حاوية Toast

<div x-data="{ toasts: [] }"
     @toast.window="toasts.push($event.detail); 
                    setTimeout(() => toasts.shift(), 3000)">
    <template x-for="toast in toasts">
        <div :class="toast.type">
            <span x-text="toast.message"></span>
        </div>
    </template>
</div>

مع الرسوم المتحركة

<div x-show="toasts.length"
     x-transition:enter="transition ease-out"
     x-transition:leave="transition ease-in">

شارك هذه المقالة:

مقالات ذات صلة

دليل شامل لمصادقة API باستخدام Laravel Sanctum

أنشئ مصادقة API آمنة باستخدام Laravel Sanctum لتطبيقات SPA والموبايل.

تحديد معدل الطلبات في Laravel: احمِ تطبيقك

نفّذ تحديد معدل الطلبات لحماية تطبيق Laravel من إساءة الاستخدام.

مكونات Blade في Laravel: بناء واجهات قابلة لإعادة الاستخدام

أنشئ مكونات قوية قابلة لإعادة الاستخدام باستخدام Laravel Blade.

التعليقات (0)

يرجى تسجيل الدخول لترك تعليق. تسجيل الدخول

لا توجد تعليقات بعد. كن أول من يعلق!

.comment-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color, #6366f1), var(--secondary-color, #7c3aed)); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 0.9rem; } .comment-avatar-sm { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color, #6366f1), var(--secondary-color, #7c3aed)); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 0.7rem; }

العودة إلى جميع المقالات

hljs.highlightAll(); .prose pre { background: #282c34; border-radius: 8px; padding: 1rem; overflow-x: auto; margin: 1.5rem 0; direction: ltr; text-align: left; } .prose pre code { background: transparent; padding: 0; font-size: 0.9rem; line-height: 1.6; color: #abb2bf; font-family: 'Fira Code', 'Monaco', 'Consolas', monospace; direction: ltr; text-align: left; } .prose code:not(pre code) { background: #f1f5f9; padding: 0.2rem 0.4rem; border-radius: 4px; font-size: 0.875em; color: #e11d48; direction: ltr; unicode-bidi: isolate; } .prose h2 { margin-top: 2rem; margin-bottom: 1rem; scroll-margin-top: 100px; } .prose h3 { scroll-margin-top: 100px; } .prose p { margin-bottom: 1rem; line-height: 1.8; } .toc-wrapper { border-left: 3px solid var(--primary-color, #6366f1); } [dir="rtl"] .toc-wrapper { border-left: none; border-right: 3px solid var(--primary-color, #6366f1); } .toc-link:hover { color: var(--primary-color, #6366f1) !important; }