Source

الخبز المحمص

دفع الإخطارات للزائرين من خلال نخب ورسالة تنبيه خفيفة الوزن وقابلة للتخصيص بسهولة.

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

ملخص

أشياء يجب معرفتها عند استخدام البرنامج المساعد Toast:

  • إذا كنت تقوم ببناء JavaScript من المصدر ، فهذا يتطلبutil.js .
  • يتم الاشتراك في الخبز المحمص لأسباب تتعلق بالأداء ، لذلك يجب عليك تهيئتها بنفسك .
  • سوف تختبئ الخبز المحمص تلقائيًا إذا لم تحددها autohide: false.

أمثلة

أساسي

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

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

<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 mins ago</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">
    Hello, world! This is a toast message.
  </div>
</div>

شفاف

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

<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 mins ago</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">
    Hello, world! This is a toast message.
  </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">just now</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">
    See? Just like this.
  </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">2 seconds ago</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">
    Heads up, toasts will stack automatically
  </div>
</div>

تحديد مستوى

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

التمهيد قبل 11 دقيقة
مرحبا بالعالم! هذه رسالة نخب. 
<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 mins ago</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">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

بالنسبة للأنظمة التي تنشئ المزيد من الإشعارات ، فكر في استخدام عنصر التفاف حتى يمكن تكديسها بسهولة.

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <!-- Position it -->
  <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">just now</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">
        See? Just like this.
      </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">2 seconds ago</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">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

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

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">

  <!-- 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>11 mins ago</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">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

إمكانية الوصول

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

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

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

نظرًا لأن المحتوى الذي تعرضه يتغير ، تأكد من تحديث delayالمهلة لضمان حصول الأشخاص على وقت كافٍ لقراءة الخبز المحمص.

<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 mins ago</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">
    Hello, world! This is a toast message.
  </div>
</div>

سلوك JavaScript

إستعمال

تهيئة الخبز المحمص عبر JavaScript:

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

خيارات

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

اسم يكتب تقصير وصف
الرسوم المتحركة قيمة منطقية حقيقي تطبيق انتقال تلاشي CSS إلى الخبز المحمص
اخفاء تلقائي قيمة منطقية حقيقي إخفاء الخبز المحمص تلقائيًا
تأخير رقم 500 تأخير إخفاء الخبز المحمص (مللي ثانية)

طُرق

الطرق غير المتزامنة والانتقالات

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

راجع وثائق JavaScript الخاصة بنا للحصول على مزيد من المعلومات .

$().toast(options)

يرفق معالج التوست بمجموعة عنصر.

.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استدعاء أسلوب المثيل.
معروض. نخب يتم تشغيل هذا الحدث عندما يصبح الخبز المحمص مرئيًا للمستخدم.
اخفاء يتم تشغيل هذا الحدث فورًا عند hideاستدعاء أسلوب المثيل.
نخب مخفي يتم تشغيل هذا الحدث عند انتهاء إخفاء الخبز المحمص عن المستخدم. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something…
})