توست (Toast)
«توست بوت استرپ» پیام کوتاه و کم جا است. مثل اعلان بازی که چند ثانیه می آید و می رود. «کامپوننت (Component)» یعنی قطعه آماده رابط کاربر.
ساخت توست ساده
برای ساخت، از کلاس های .toast، .toast-header و .toast-body استفاده کن. با .show آن را نمایش بده. برای بستن، دکمه با data-bs-dismiss="toast" بگذار.
<div class="toast show" id="myToast">
<div class="toast-header">
<strong class="me-auto">Toast Header</strong>
<small>5 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
<p>Some text inside the toast body</p>
</div>
</div>
نمایش توست بوت استرپ با جاوااسکریپت
توست ها پیش فرض پنهان هستند. باید «راه اندازی (Initialize)» شوند. سپس با متد show() نمایش می گیرند.
<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(function (toast) {
toast.show();
});
};
<\/script>
نکته: می توانی چند توست را هم زمان نمایش دهی. فقط همه را مقداردهی کن.
گام های عملی سریع
- ساختار
.toastبا هدر و بدنه بساز. - دکمه بستن با
data-bs-dismissاضافه کن. - با جاوااسکریپت توست ها را مقداردهی کن.
- برای نمایش،
show()را فراخوانی کن.
جمع بندی سریع
- توست اعلان کوتاه و سبک است.
- با
.showدیده می شود. - برای بستن از
data-bs-dismissاستفاده کن. - راه اندازی جاوااسکریپت ضروری است.
مطالب مرتبط: پاپ اور (Popover)، مودال (Modal). همچنین راهنمای توست بوت استرپ را دنبال کن.