خدمة إشعارات Toast لـ Angular | ng-hub-ui-toast
خدمة إشعارات toast من نوع standalone لـ Angular مع Signals وملاحظات دورة الحياة وشريط تقدّم وستة مواضع وتنسيق سمات كامل بمتغيرات CSS.
نظرة عامة
لماذا تبحث الفِرَق عن هذه المكتبة
استخدم ng-hub-ui-toast عندما تحتاج إلى طبقة إشعارات أمرية بلا إعداد تتعايش مع بنية Angular المستقلة standalone وتمنحك خطافات دورة حياة قائمة على Observable جاهزة للعمل.
التثبيت
npm install ng-hub-ui-toastانتقل إلى
مثالي لـ
- ملاحظات إرسال النماذج
- إشعارات المزامنة في الخلفية
- تنبيهات الأخطاء
- تحذيرات انتهاء الجلسة
حول toast
ng-hub-ui-toast هي خدمة toast مدفوعة بالـ signals لتطبيقات Angular 22+ المستقلة standalone. استدعِ success() أو error() أو warning() أو info() من أي مكوّن أو خدمة؛ تُركَّب حاوية التراكب بشكل كسول عند إطلاق أول إشعار. يُعيد كل استدعاء HubToastRef مع الملاحظات onShown وonHidden وonTap وطريقتي manualClose() / resetTimeout(). اضبط الإعدادات الافتراضية عالميًا باستخدام provideToast() وتجاوز أي خيار لكل استدعاء.
أدلّة الميزات
أنواع toast الأساسية
أربعة أنواع دلالية — success وerror وwarning وinfo — كل منها مرتبط برمز اللون المطابق في نظام التصميم.
أمثلة:
الأنواع الأساسية
الأنواع الأساسية
خيارات الإعداد
تحكّم في مهلة الصرف التلقائي، وشريط التقدّم، وزر الإغلاق، وسلوك النقر للصرف لكل استدعاء أو عالميًا عبر provideToast().
أمثلة:
خيارات الإعداد
خيارات الإعداد
تحديد الموضع
ستة مواضع ثابتة على الشاشة: top/bottom مدمجة مع right أو left أو center.
أمثلة:
تحديد الموضع
تحديد الموضع
إزالة التكرار
يتجاهل preventDuplicates بصمت الإشعارات الجديدة التي تطابق رسالة ونوعًا ظاهرين بالفعل.
أمثلة:
منع التكرار
منع التكرار
Click the button multiple times. With preventDuplicates enabled, only one toast with the same message will appear.
التحكّم في السعة
يحدّ maxOpened من المكدّس الظاهر؛ ويقرّر autoDismiss ما إذا كان سيُزال الأقدم أم سيُتجاهل الجديد بصمت عند بلوغ الحد.
أمثلة:
الحد الأقصى المفتوح وautoDismiss
الحد الأقصى المفتوح وautoDismiss
When autoDismiss is false, new toasts are silently dropped once the cap is reached. When true, the oldest toast is removed to make room.
ملاحظات دورة الحياة
يُتيح كل HubToastRef الملاحظات onShown وonHidden وonTap بالإضافة إلى manualClose() وresetTimeout() للتحكّم الأمري.
أمثلة:
ملاحظات دورة الحياة
ملاحظات دورة الحياة
تنسيق السمات بمتغيرات CSS
كل تفصيل بصري — الخلفية والاستدارة والظل والحشو وشريط التقدّم — هو خاصية مخصصة --hub-toast-* يمكن تجاوزها من أي عنصر سَلَف أو ورقة أنماط.
أمثلة:
تنسيق السمات بمتغيرات CSS
تنسيق السمات بمتغيرات CSS
Active token overrides (applied to this demo's container):
--hub-toast-border-radius: 0.75rem;
--hub-toast-shadow: 0 4px 20px rgba(0,0,0,.18);
--hub-toast-padding-x: 1.25rem;
--hub-toast-padding-y: 1rem;
--hub-toast-font-size: 0.9rem; Tokens are injected from the page's stylesheet or from a style binding on any ancestor element — the container reads them via CSS inheritance.
الميزات الرئيسية
التغييرات الأخيرة
Version 22.1.0 - 6/19/26, 12:00 AM
changed: Lowered the Angular peer dependency floor to `>=21.0.0`; the library now installs and runs in Angular 21 applications. No source or API changes.
Version 22.0.0 - 6/17/26, 12:00 AM
added: Initial release: `ToastService` with `success()`, `error()`, `warning()`, `info()`, `show()`, `remove()`, `clear()`.
added: `HubToastRef` with `onShown`, `onHidden`, `onTap` observables and `manualClose()` / `resetTimeout()`.
added: `ToastComponent` with signal-based auto-dismiss timer, progress bar and close button.
added: `ToastContainerComponent` with six position classes.
added: Accent system: `@each` loop for built-in types; `color-mix` open default for custom types.
added: `provideToast()` standalone provider function.
added: Angular animations: slide-in from edge on enter, fade-out on dismiss.