مكوِّن النخب Toasts في إطار العمل Bootstrap

استفد من رسائل التنبيه المرنة التي يوفّرها إطار العمل Bootstrap لإظهار رسائل تغذيّة راجعة للإجراءات النمطيّة التي يقوم بها الزوّار.

أمثلة

تتوفّر التنبيهات Alerts بصيغة نصوص غير محدودة الطول، كما تتوفّر بصيغة أزرار تجاهل اختياريّة. استخدم واحدًا من أصناف السيّاق الثمانيّة الإجباريّة من أجل الحصول على تنسيق صحيح للتنبيهات (مثلًا للتنبيه على نجاح إجراء ‎.alert-success). استخدم مُلحَق تنبيهات jQuery إنْ أردت توفير أزرار تجاهل سطريّة Inline.

<div class="alert alert-primary" role="alert">
   هذا تنبيه أوّليّّ —تحقّق منه!
</div>
<div class="alert alert-secondary" role="alert">
  هذا تنبيه ثانويّ —تحقّق منه!
</div>
<div class="alert alert-success" role="alert">
  هذا تنبيه على نجاح إجراء —تحقّق منه!
</div>
<div class="alert alert-danger" role="alert">
  هذا تنبيه على خطر —تحقّق منه!
</div>
<div class="alert alert-warning" role="alert">
   هذا تنبيه للاحتياط —تحقّق منه!
</div>
<div class="alert alert-info" role="alert">
  هذا تنبيه لإعطاء معلومات —تحقّق منه!
</div>
<div class="alert alert-light" role="alert">
  هذا تنبيه خفيف —تحقّق منه!
</div>
<div class="alert alert-dark" role="alert">
  هذا تنبيه غامق —تحقّق منه!
</div>

توصيل المعنى إلى التقنيّات المساعدة

يقتصر المعنى - عند الاقتصار على استخدام اللّون لنقله – على الدّلالة البصريّة، وبالتالي لن يصل المعنى المطلوب إلى التقنيّات المساعدة للزوّار (مثل قارئات الشاشة). تأكّد من أنّ المعلومة التي يشير إليها اللّون إمّا بديهيّة من المحتوى نفسِه (أيّ النصّ المرئي) أو أنّها أُضيفت بوسائل بديلة مثل نصّ مخفيّ بالصّنف ‎.sr-only.

لون الرابط

استخدم الصّنف الخدمي‎.alert-link لتوفير روابط متماشية مع التنسيقات ضمن التنبيهات.

<div class="alert alert-primary" role="alert"> هذا تنبيه أوّليّ يوجد به <a href="#" class="alert-link">مثال على رابط</a>. جرّب النقر عليه.
</div>
<div class="alert alert-secondary" role="alert">
  هذا تنبيه ثانويّ يوجد به <a href="#" class="alert-link">مثال على رابط</a>. جرّب النقر عليه.
</div>
<div class="alert alert-success" role="alert">
  هذا تنبيه على نجاح إجراء يوجد به <a href="#" class="alert-link">مثال على رابط</a>. جرّب النقر عليه.
</div>
<div class="alert alert-danger" role="alert">
  هذا تنبيه على خطر يوجد به <a href="#" class="alert-link">مثال على رابط</a>. جرّب النقر عليه.
</div>
<div class="alert alert-warning" role="alert">
  هذا تنبيه للاحتيّاط يوجد به <a href="#" class="alert-link">مثال على رابط</a>. جرّب النقر عليه.
</div>
<div class="alert alert-info" role="alert">
  هذا تنبيه لإعطاء ملعومات يوجد به <a href="#" class="alert-link">مثال على رابط</a>. جرّب النقر عليه.
</div>
<div class="alert alert-light" role="alert">
  هذا تنبيه خفيف يوجد به <a href="#" class="alert-link">مثال على رابط</a>. جرّب النقر عليه.
</div>
<div class="alert alert-dark" role="alert">
  هذا تنبيه غامق يوجد به <a href="#" class="alert-link">مثال على رابط</a>. جرّب النقر عليه.
</div>

عناصر HTML داخل التنبيهات

يمكن أن تحتوي التنبيهات على عناصر HTML مثل الترويسات، والفقرات والخطوط الفاصلة (<hr>).

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">جيّد جدّا!</h4>
  <p>لقد فعلتها، لقد قرأت هذه الرسالة التنبيهيّة المهمّة،  هذه. النصّ في هذا المثال طويل نوعًا مّا لترى كيف يعمل التباعد مع هذا النوع من المحتوى داخل التنبيهات</p>
  <hr>
  <p class="mb-0">استخدم أدوات الهوامش كلّ ما دعت الحاجة، حتى تبقى الأمور رائعةً ومُرتّبة</p>
</div>

تجاهل التنبيهات

يمكن باستخدام مُلحَق JavaScript الخاصّ بالتنبيهات إضافة أزرار تجاهل على نفس السّطر:

تأكّد من تحميل مُلحَق التنبيهات، أو النسخة المُجمَّعة من JavaScript الخاصّة بإطار العمل Bootstrap.
إن كنت تُجمِّع JavaScript بنفسك من المصدر فانتبه إلى أنّ المُلحَق يحتاج إلى الملفّ Util. هذا الملفّ مُضمَّن في النسخة المُجمَّعة.
أضف زرّ تجاهل والصّنف ‎.alert-dismissible الذي يضيف حاشية إضافيّة إلى اليمين ويحدّد موضع الزرّ ‎.close .
أضف الخاصيّة ‎data-dismiss="alert"‎ إلى زرّ التجاهل الذي يفعّل الوظيفة في JavaScript. تأكّد من استخدام العنصُر <button> لتطبيق زرّ التجاهل من أجل الحصول على سلوك مناسب على جميع الأجهزة.
تأكّد من إضافة الصّنفيْن ‎.fade و ‎.show إلى التنبيه لإضافة تأثيرات عليه بعد النقر على زرّ التجاهل.

جرّب المثال التالي:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>انتبه!</strong> يجب أن تتحقّق من بعضٍ من الحقول الموجودة في الأسفل.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

سلوك JavaScript

المُنشِّطات Triggers

يمكن تفعيل إمكانيّة تجاهل تنبيه بواسطة JavaScript:

$('.alert').alert()

كما يمكن استخدام خاصيّات data على زرّ داخل التنبيه كما في المثال الأخير ضمن فقرة التجاهل:

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

انتبه إلى أنّ إغلاق تنبيه يحذفه من كائن المستند DOM.

التوابع

التابع	الوصف
`‎$().alert()‎`	يجعل التنبيه يُنصِت لأحداث النقر على العناصر الأبناء التي لديها الخاصيّة `data-dismiss="alert"` . (ليس ضروريًّا عند استخدام التمهيد التلقائي Auto-initialization في واجهة التطبيقات data-api.)
`‎$().alert('close')`	يغلق تنبيهًا بحذف من كائن المستنَد DOM. إن كان الصّنفان ‎`.fade` و `‎.show` موجوديْن فإن التنبيه سيخبو قبل أن يختفي.
`‎$().alert('dispose')`	يحذف التنبيه من العنصُر.

$(".alert").alert('close')

الأحداث Events

يعرض مُلحَق التنبيهات في Bootstrap بضعة أحداث للتعامل مع وظيفة التنبيه.

الحدث	الوصف
`close.bs.alert`	ينطلق هذا الحدث مباشرةً بعد استدعاء التابع `close` .
`closed.bs.alert`	ينطلق هذا الحدث مباشرةً بعد استدعاء التابع `close` .

$('#myAlert').on('closed.bs.alert', function () {
  // افعل شيئًا هنا …
})

مصادر

صفحة Alerts في توثيق Bootstrap.