TOATS
Toasts
Toasts một thông báo chỉ hiển thị trong vài giây khi có điều gì đó xảy ra. Thường được dùng để thông báo trạng thái của một hành động nào đó, thông báo này được back-end trả về (thường là trả về cùng dữ liệu).
<div id="toast-container">
<div class="toast mb-2 fade show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="2500">
<div class="alert alert-important alert-success alert-dismissible mb-0" role="alert">
<div class="d-flex">
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M5 12l5 5l10 -10"></path></svg>
</div>
<div>
Thành công
</div>
</div>
<a class="btn-close" data-bs-dismiss="" aria-label="close"></a>
</div>
</div>
</div>Sử dụng toast trong dự án
Toast đã được tích hợp sẵn trong dự án lúc cần dùng chỉ cần gọi đến hàm có sẵn.
Cú pháp
showToast(message, statusCode, backgrounColor);
Tham số: message là thông báo mà bạn muốn hiển thị(thường do back-end trả ra)
Tham số: statusCode là trạng thái mã quyết định màu của thông báo(trường hợp bạn không truyền biến "backgrounColor")
Tham số: backgrounColor là tham số quyết định màu nền cho thông báo(có thể truyền vào hoặc không)
showToast("Thành công", 200)
showToast("Thất bại", 500)
showToast("Một vài biến đã khai báo nhưng không sử dụng", 200, "bg-warning")