BS5 toast xabarlar
Toast xabarlar
Toast komponenti ogohlantirish oynasiga o‘xshaydi, lekin u biror hodisa yuz berganda (masalan, foydalanuvchi tugmani bosganda, formani yuborganda va h.k.) atigi bir necha soniya ko‘rsatiladi.
Some text inside the toast body
Toast qanday yaratiladi
Toast yaratish uchun .toast klassidan foydalaning va uning ichiga .toast-header hamda .toast-body qo‘shing.
Eslatma: Toastlar standart holatda yashirin bo‘ladi. Uni ko‘rsatmoqchi bo‘lsangiz, .show klassidan foydalaning. Uni yopish uchun <button> elementidan foydalaning va unga data-bs-dismiss="toast" ni qo‘shing:
<div class="toast show">
<div class="toast-header">
Toast Header
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
Some text inside the toast body
</div>
</div>
O‘zingiz sinab ko‘ring »
Toastni ochish
Toastni tugma bosilganda ko‘rsatish uchun uni JavaScript yordamida ishga tushirishingiz kerak: kerakli elementni tanlang va toast() metodini chaqiring.
Quyidagi kod tugma bosilganda hujjatdagi barcha "toast"larni ko‘rsatadi:
Misol
<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>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!