Bootstrap 5 ပြောင်းလဲ

Toast (တိရစ်)

Toast အုပ်စု က အကြောင်းအရာ တခု ဖြစ်ပွားချိန်တွင် (ဥပမာ အသုံးပြုသူ က ဘေ့စ် ချိန်ပြန်ချို့တာ လုပ်ဆောင်တာ သို့မဟုတ် ပေါင်းစာရင်း သုံးပြီးပြီး) သာ အချိန် အနည်းငယ် ကို ပြသသည်။

ပေါ်ထွက်ခြင်း ဖွဲ့စည်းပုံ ဘာကြောင့်

ပေါ်ထွက်ခြင်း ဖွဲ့စည်းပုံ .toast အကွက် .toast-header နှင့် .toast-body。

မှတ်ချက်ပုံမှန်အားဖြင့် ပေါ်ထွက်ခြင်း ဖြတ်တောက်နေသည်။ ပေါ်ထွက်ပါက အသုံးပြုပါ။ .show အကွက်။ ပိုက်ရိုက်ခြင်း အတွက် ပေါ်ထွက်ခြင်း အကွက် ကို အသုံးပြုပါ။ data-bs-dismiss="toast"：

<div class="toast show">
  <div class="toast-header">
    ပေါ်ထွက်ခြင်း ခေါင်းစဉ်
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    ပေါ်ထွက်ခြင်း အချက်အလက်
  </div>
</div>

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

ပေါ်ထွက်ခြင်း

ဗိုလ်တင်စား ချက် အား သတ်မှတ်ပါက၊ အဆိုပါ ပေါ်ပေါက်သော အချက်အလက် အား ပြင်ဆင်ပါ။ ဗိုလ်တင်စား ချက် ကို ရှာဖွေပြီး အသုံးပြုပါ။ 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>

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ