Bootstrap 5 Toast

Toast (الخبز)

م 组件 يشبه نافذة التحذير، عندما يحدث شيء ما (مثل النقر على الزر من قبل المستخدم، تقديم النموذج، وما إلى ذلك) فإنه سيظهر فقط لبضع ثوانٍ.

كيفية إنشاء Toast

لإنشاء Toast، استخدم .toast فئة، وأضف .toast-header و .toast-body.

ملاحظة:بالافتراض، Toast مخفي. إذا كنت ترغب في عرضه، استخدم .show فئة. إذا كنت ترغب في إغلاقها، استخدم عنصر <button> وأضف data-bs-dismiss="toast":

<div class="toast show">
  <div class="toast-header">
    عنوان Toast
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    نص الجسم لـ Toast
  </div>
</div>

جربها بنفسك

فتح Toast

لعرض Toast عبر الضغط على الزر، يجب عليك تفعيلها باستخدام JavaScript: يرجى اختيار العنصر المحدد وتشغيل toast() الطريقة.

عند الضغط على الزر التالي، سيعرض الكود التالي جميع toast في المستند:

مثال

<script>
document.getElementById("toastbtn").onclick = function() {
  var toastElList = [].slice.call(document.querySelectorAll('.toast'))
  var toastList = toastElList.map(function(toastEl) {
    return new bootstrap.Toast(toastEl)
  }
  toastList.forEach(toast => toast.show())
}
</script>

جربها بنفسك