تخطي إلى المحتوى الرئيسي انتقل إلى ملاحة المستندات
in English

الخبز المحمص

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

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

ملخص

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

  • يتم الاشتراك في الخبز المحمص لأسباب تتعلق بالأداء ، لذلك يجب عليك تهيئتها بنفسك .
  • سوف تختبئ الخبز المحمص تلقائيًا إذا لم تحددها autohide: false.
يعتمد تأثير الرسوم المتحركة لهذا المكون على prefers-reduced-motionالاستعلام عن الوسائط. راجع قسم الحركة المخفضة في وثائق إمكانية الوصول الخاصة بنا .

أمثلة

أساسي

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

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

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

يعيش

انقر فوق الزر أدناه لإظهار الخبز المحمص (الموجود مع أدواتنا المساعدة في الزاوية اليمنى السفلية) والذي تم إخفاؤه افتراضيًا باستخدام .hide.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

شفاف

الخبز المحمص شفاف قليلاً لتندمج مع ما تحته.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

التراص

يمكنك تكديس الخبز المحمص عن طريق لفه في وعاء نخب ، والذي سيضيف بعض التباعد بشكل عمودي.

<div class="toast-container">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">2 seconds ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Heads up, toasts will stack automatically
    </div>
  </div>
</div>

محتوى مخصص

قم بتخصيص الخبز المحمص الخاص بك عن طريق إزالة المكونات الفرعية ، أو تعديلها باستخدام الأدوات المساعدة ، أو عن طريق إضافة الترميز الخاص بك. لقد أنشأنا هنا نخبًا أبسط عن طريق إزالة الإعداد الافتراضي .toast-header، وإضافة رمز إخفاء مخصص من أيقونات Bootstrap ، واستخدام بعض أدوات flexbox المساعدة لضبط التخطيط.

<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
    Hello, world! This is a toast message.
   </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

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

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Take action</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
    </div>
  </div>
</div>

الألوان

بناءً على المثال أعلاه ، يمكنك إنشاء مخططات ألوان محمصة مختلفة باستخدام أدوات الألوان والخلفية الخاصة بنا . هنا أضفنا .bg-primaryوإلى ، ثم أضفنا .text-whiteإلى زر الإغلاق الخاص بنا. للحصول على حافة واضحة ، نقوم بإزالة الحد الافتراضي باستخدام ..toast.btn-close-white.border-0

<div class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

تحديد مستوى

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

التمهيد قبل 11 دقيقة
مرحبا بالعالم! هذه رسالة نخب.
<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Toast placement</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Select a position...</option>
      <option value="top-0 start-0">Top left</option>
      <option value="top-0 start-50 translate-middle-x">Top center</option>
      <option value="top-0 end-0">Top right</option>
      <option value="top-50 start-0 translate-middle-y">Middle left</option>
      <option value="top-50 start-50 translate-middle">Middle center</option>
      <option value="top-50 end-0 translate-middle-y">Middle right</option>
      <option value="bottom-0 start-0">Bottom left</option>
      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
      <option value="bottom-0 end-0">Bottom right</option>
    </select>
  </div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
  <div class="toast-container position-absolute p-3" id="toastPlacement">
    <div class="toast">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </div>
  </div>
</div>

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

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `.position-absolute`, `top-0` & `end-0` to position the toasts in the upper right corner -->
  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
  <div class="toast-container position-absolute top-0 end-0 p-3">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 w-100">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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-bs-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-bs-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

في حين أنه من الممكن تقنيًا إضافة عناصر تحكم قابلة للتركيز / قابلة للتنفيذ (مثل الأزرار أو الروابط الإضافية) في الخبز المحمص الخاص بك ، يجب عليك تجنب القيام بذلك لإخفاء الخبز المحمص تلقائيًا. حتى إذا أعطيت الخبز المحمص delayمهلة طويلة ، فقد يجد مستخدمو لوحة المفاتيح والتكنولوجيا المساعدة صعوبة في الوصول إلى الخبز المحمص في الوقت المناسب لاتخاذ إجراء (نظرًا لأن الخبز المحمص لا يتلقى التركيز عند عرضه). إذا كان يجب أن يكون لديك المزيد من الضوابط ، فإننا نوصي باستخدام الخبز المحمص مع autohide: false.

ساس

المتغيرات

$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba($white, .85);
$toast-border-width:                1px;
$toast-border-color:                rgba(0, 0, 0, .1);
$toast-border-radius:               $border-radius;
$toast-box-shadow:                  $box-shadow;
$toast-spacing:                     $container-padding-x;

$toast-header-color:                $gray-600;
$toast-header-background-color:     rgba($white, .85);
$toast-header-border-color:         rgba(0, 0, 0, .05);

إستعمال

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

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})

خيارات

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

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

طُرق

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

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

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

تبين

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

toast.show()

يخفي

يخفي نخب عنصر. يعود إلى المتصل قبل أن يتم إخفاء الخبز المحمص بالفعل (أي قبل hidden.bs.toastوقوع الحدث). يجب عليك استدعاء هذه الطريقة يدويًا إذا قمت autohideبذلك false.

toast.hide()

تخلص

يخفي نخب عنصر. سيبقى خبز التوست الخاص بك على DOM ولكنه لن يظهر بعد الآن.

toast.dispose()

getInstance

طريقة ثابتة تتيح لك الحصول على مثيل scrollspy المرتبط بعنصر DOM

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

getOrCreateInstance

طريقة ثابتة تتيح لك الحصول على مثيل scrollspy المرتبط بعنصر DOM ، أو إنشاء مثيل جديد في حالة عدم تهيئته

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

الأحداث

نوع الحدث وصف
show.bs.toast يتم تشغيل هذا الحدث فورًا عند showاستدعاء أسلوب المثيل.
shown.bs.toast يتم تشغيل هذا الحدث عندما يصبح الخبز المحمص مرئيًا للمستخدم.
hide.bs.toast يتم تشغيل هذا الحدث فورًا عند hideاستدعاء أسلوب المثيل.
hidden.bs.toast يتم تشغيل هذا الحدث عند انتهاء إخفاء الخبز المحمص عن المستخدم.
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})