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

أظهر إشعارات لزوارك عبر مكونات النخب (toast‎s)، وهي رسائل تنبيه قابلة للتخصيص بسهولة.

النخب هي إشعارات مُصمّمة لمحاكاة الإشعارات الفورية التي انتشرت في أنظمة تشغيل الجوالات وسطح المكتب. وقد بُنِيت باستخدام flexbox، لذا يسهُل محاذاتها وضبطها.

نظرة عامة

هذه أشياء ينبغي أن تعرفها عند استخدام مكونات النخب:

إن أردت بناء JavaScript من المصدر، فاعلم أنّ ذلك يتطلب util.js.
النخب اختيارية لأسباب تتعلق بالأداء، لذا يجب عليك تهيئتها بنفسك.
يرجى ملاحظة أنك مسؤول عن تحديد مواضع النخب
إن لم تعيّن الخاصية autohide: false، فستُخفى النخب تلقائيًا.

ملحوظة: تأثير الحركة الخاص بهذه المكونة يعتمد على استعلام الوسائط prefers-reduced-motion، راجع صفحة سهولة الوصول لمزيد من المعلومات

أمثلة

أمثلة قاعدية

ننصح باستخدام ترويسة ومتن في مكونات النخب لجعلها واضحة ومتوقعة. تستخدم ترويسات النخب display: flex، ممّا يسهّل محاذاة محتوياتها بفضل أدوات التحكم في الهامش وأدوات flexbox .

تتمتع النخب بمرونة عالية، ولا تتطلب إلا القليل من الترميز. إذ تتطلب النخب كحدّ أدنى عنصرًا واحدًا لاحتواء محتوياتها. ننصح كذلك بإضافة زر استبعاد.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>قبل 11 دقيقة</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    مرحبا بالعالم، هذه رسالة نخب
  </div>
</div>

الشفافية

مكونات النخب شبه شفافة، لذلك تمتزج مع المكونات التي تظهر فوقها. بالنسبة للمتصفحات التي تدعم خاصية filter-backdrop، ستحاول أيضًا طمس العناصر الموجودة تحت مكون النخب.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">قبل 11 دقيقة</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    مرحبا بالعالم، هذه رسالة نخب
  </div>
</div>

تكديس مكونات النخب

إن عُرِضت عدّة مكونات نخب في الوقت نفسه، فإنّ Bootstrap ستكدسها رأسيًا لتجعلها قابلة للقراءة.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">الآن</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    أرأيت؟ هكذا تماما
  </div>
</div>

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">قبل ثانيتين</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    ستُكدس مكونات النخب تلقائيا
  </div>
</div>

التموضع

حدد مواضع مكونات النخب عبر أنماط CSS مخصصة. غالبًا ما يُستخدم الجزء العلوي الأيمن والجزء العلوي الأوسط للإشعارات. إذا كنت ستكتفي بعرض نخب واحد فقط في كل مرة، فضع أنماط تحديد الموضع مباشرة على النخب ‎.toast‎.

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div class="toast" style="position: absolute; top: 0; right: 0;">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>قبل 11 دقيقة</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      مرحبا بالعالم، هذه رسالة نخب
    </div>
  </div>
</div>

إن كنت تتوقع أن تستخدم عدة إشعارات، فضعها في غلاف حتى يسهُل تكديسها.

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <!-- الموضع -->
  <div style="position: absolute; top: 0; right: 0;">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">الآن</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        أرأيت، هكذا تماما
      </div>
    </div>

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">قبل ثانيتين</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        ستُكدّس مكونات النخب تلقائيا
      </div>
    </div>
  </div>
</div>

يمكنك أيضًا التوسع في تصميم النخب باستخدام أدوات Flexbox لمحاذاة النخب أفقيًا و / أو عموديًا.

<!-- حاوية مرنة لمحاذاة مكونات النخب -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">

  <!-- ضع النخب هنا -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>قبل 11 دقيقة</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
     مرحبا بالعالم، هذه رسالة نخب
    </div>
  </div>
</div>

سهولة الوصول

صُمِّمت مكونات النخب لتقاطع المستخدم مقاطعة سريعة، إن أردت مساعدة الزوار الذين يستخدمون قارئات شاشة والتقنيات المساعدة المماثلة، يجب عليك تغليف مكونات النخب في منطقة حية aria-live. يتم الإعلان تلقائيًا عن التغييرات التي تطرأ على المناطق الحية (مثل عمليات إدخال / تحديث مكونات النخب) من قبل برامج قراءة الشاشة دون الحاجة إلى تشتيت تركيز المستخدم أو مقاطعته. احرص - علاوة على ذلك - على تضمين aria-atomic = "true"‎ لتتأكد من الإعلان عن مكونات النخب دائمًا كوحدة (ذرية) واحدة، بدلاً من الاكتفاء بالإعلان عما تمّ تغييره (والذي قد يؤدّي إلى مشاكل في حال اكتفيت بتحديث جزء فقط من محتوى النخب، أو في حال عرض محتوى النخب نفسه في وقت لاحق). إذا كانت المعلومات المعروضة مهمة للعملية، كأن تعرض قائمة بالأخطاء في استمارة يملؤها الزائر، حينئذ قد يكون الأفضل أن تستخدم مكوّنات التنبيه بدلاً من النخب.

تذكر أنّ المنطقة الحية يجب أن تكون موجودة في الترميز قبل إنشاء مكونات النخب أو تحديثها. إذا أنشأتهما ديناميكيًا في الوقت نفسه ثمّ أدرجتهما في الصفحة، فلن تعلن عنهما التقنيات المساعدة عموما.

تحتاج أيضًا إلى تعديل الدور role ومستوى aria-live بناءً على المحتوى. إذا كانت الرسالة المعروضة مهمة، مثل عرض رسالة خطأ، فاستخدم role = "alert" aria-live = "assertive"‎، وإلا فاستخدم الخاصيات role = "status" aria-live = "polite"‎.

في أثناء تغير المحتوى المعروض، تأكد من تحديث مهلة التأخير حتى يتسنّى للناس الوقت الكافي لقراءة محتوى النخب.

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

في حال استخدام autohide: false، سيكون عليك إضافة زر إغلاق للسماح للمستخدمين بإغلاق النخب.

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>قبل 11 دقيقة</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    مركبا بالعالم، هذه رسالة نخب
  </div>
</div>

سلوك JavaScript

طريقة الاستخدام

يمكنك تهيئة النخب عبر JavaScript:

$('.toast').toast(option)

خيارات

يمكن تمرير الخيارات عبر خاصيات البيانات أو جافا سكربت. فيما بخص خاصيات البيانات، ألحق اسم الخيار بـ data-‎، كما في data-animation = ""‎.

الاسم	النوع	القيمة المبدئيّة	الوصف
`animation` (التحريك)	قيمة منطقيّة	`true`	تطبيق تأثير الخفوت في CSS على مكون النخب.
`autohide` (الإخفاء التلقائي)	قيمة منطقيّة	`true`	الإخفاء التلقائي للنخب
`delay` (تأخير)	عدد	`500`	تأخير إخفاء النخب (ملي ثانية)

توابع

تنبيه: التوابع غير المتزامنة والانتقالات

توابع واجهة التطبيقات جميعها غير متزامنة وتشغّل انتقالا. تعود هذه التوابع لشفرة الاستدعاء مباشرةً بعد بدء الانتقال، لكن قبل أن ينتهي. علاوةً على ذلك، يُتجاهل استدعاء تابع على مكوِّن في طور الانتقال. راجع صفحة javascript لمزيد من التفاصيل.

‎$().toast(options)‎

ربط معالج نخب (toast handler) بمجموعة عناصر.

‎.toast('show')‎

إظهار مكوّن النخب والعودة إلى المُستدعي قبل إظهار النخب فعليا (أي قبل وقوع الحدث shown.bs.toast). عليك استدعاء هذا التابع يدويًا وإلا فلن يظهر النخب.

$('#element').toast('show')

‎.toast('hide')‎ إخفاء مكون النخب والعودة إلى المُستدعي قبل إخفاء النخب فعليا (أي قبل وقوع الحدث hidden.bs.toast). عليك استدعاء هذا التابع يدويًا في حال عيّنت قيمة الخاصية autohide إلى false.

$('#element').toast('hide')

‎.toast('dispose')‎ إخفاء مكون النخب. سيبقى مكون النخب في شجرة DOM، بيد أنّه لن يظهر بعدها.

$('#element').toast('dispose')

الأحداث

نوع الحدث	الوصف
`show.bs.toast`	يُطلَق هذا الحدث مباشرةً بعد استدعاء التابع `show`.
`shown.bs.toast`	يُطلَق هذا الحدث عندما يصبح مكون النخب ظاهرا للزائر.
`hide.bs.toast`	يُطلَق هذا الحدث مباشرةً بعد استدعاء التابع `hide` .
`hidden.bs.toast`	يُطلَق هذا الحدث عندما يكتمل إخفاء مكون النخب عن الزائر .

$('#myToast').on('hidden.bs.toast', function () {
  // افعل شيئا ما
})

مصادر

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