Toast là một thành phần giao diện người dùng giống như hộp cảnh báo, nhưng chỉ được hiển thị trong vài giây khi có sự kiện xảy ra. Toast có thể được sử dụng để thông báo cho người dùng về kết quả các hành động của người dùng hoặc để hiển thị các thông tin quan trọng mà không làm gián đoạn trải nghiệm người dùng.

Trong bài viết này, chúng ta sẽ tìm hiểu cách tạo và sử dụng toast trong Bootstrap 5, phiên bản mới nhất của thư viện CSS phổ biến nhất hiện nay.

1. Cách tạo toast trong Bootstrap 5

Để tạo toast, chúng ta sử dụng class .toast cộng thêm .toast-header và .toast-body vào bên trong nó. 

Lưu ý: Toast mặc định bị ẩn. Chúng ta cần dùng class .show nếu muốn hiển thị nó. Để đóng nó, chúng ta dùng phần tử <button> và thêm thuộc tính data-bs-dismiss="toast"

Ví dụ:

<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>

Kết quả:

Toast Header
Some text inside the toast body

>>>>> Xem thêm bài viết tương tự tại đây:

2. Cách mở toast bằng JavaScript

Để mở toast bằng một sự kiện như nhấn vào một nút, chúng ta cần khởi tạo nó bằng JavaScript: chọn phần tử toast và gọi phương thức toast(). Phương thức này có thể nhận một đối tượng tùy chọn, trong đó có các thuộc tính sau:

  • animation: một giá trị boolean, xác định có sử dụng hiệu ứng chuyển động khi mở và đóng toast hay không. Mặc định là true.
  • autohide: một giá trị boolean, xác định có tự động ẩn toast sau một khoảng thời gian hay không. Mặc định là true.
  • delay: một giá trị số, xác định khoảng thời gian (tính bằng mili giây) mà toast sẽ được hiển thị trước khi bị ẩn. Mặc định là 5000.

Ví dụ:

<button type="button" class="btn btn-primary" id="toastbtn">Show toast</button>
<div class="toast" id="toastDemoBlog">
  <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>
<script>
    $(function () {
        $("#toastbtn").on("click", function () {
            var toastEl = $("#toastDemoBlog");
            var toast = new bootstrap.Toast(toastEl, {
                animation: true,
                autohide: false
            });
            toast.show();
        });
    });
</script>

Kết quả:

Toast Header
Some text inside the toast body

3. Cách tùy biến toast trong Bootstrap 5

Toast trong Bootstrap 5 có thể được tùy biến theo nhiều cách khác nhau, chẳng hạn như:

  • Thay đổi màu sắc: chúng ta có thể dùng các class màu sắc của Bootstrap để thay đổi màu nền và màu chữ của toast. Ví dụ: .bg-success, .text-white, v.v.
  • Thay đổi vị trí: chúng ta có thể dùng các class vị trí của Bootstrap để thay đổi vị trí của toast trên màn hình. Ví dụ: .position-fixed, .top-0, .end-0, v.v.
  • Thay đổi độ trong suốt: toast mặc định có một chút độ trong suốt để phù hợp với nội dung bên dưới. Chúng ta có thể thay đổi giá trị của biến $toast-background-color trong Sass để thay đổi độ trong suốt của toast.
  • Xếp chồng toast: chúng ta có thể xếp chồng nhiều toast lên nhau bằng cách bọc chúng trong một phần tử có class .toast-container. Điều này sẽ tạo ra một khoảng cách dọc giữa các toast.

Ví dụ:

<button type="button" class="btn btn-primary" id="toastbtn">Show toasts</button>
<div class="toast-container position-fixed top-0 end-0 p-3">
  <div class="toast bg-success text-white" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">Success</strong>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Your action was successful.
    </div>
  </div>
  <div class="toast bg-danger text-white" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">Error</strong>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Something went wrong.
    </div>
  </div>
</div>
<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>

Kết quả:

Tổng kết

Toast là một thành phần giao diện người dùng rất tiện lợi và dễ sử dụng trong Bootstrap 5. Chúng ta có thể tạo và mở toast bằng HTML và JavaScript hay tùy biến chúng theo nhiều cách khác nhau. Toast có thể giúp chúng ta thông báo cho người dùng về các sự kiện quan trọng mà không làm gián đoạn trải nghiệm người dùng. Hãy thử sử dụng toast trong các dự án web của bạn và xem kết quả như thế nào.

Stringee Communication APIs là giải pháp cung cấp các tính năng giao tiếp như gọi thoại, gọi video, tin nhắn chat, SMS hay tổng đài CSKH cho phép tích hợp trực tiếp vào ứng dụng/website của doanh nghiệp nhanh chóng. Nhờ đó giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp bởi thông thường nếu tự phát triển các tính năng này có thể mất từ 1 - 3 năm.

Bộ API giao tiếp của Stringee hiện đang được tin dùng bởi các doanh nghiệp ở mọi quy mô, lĩnh vực ngành nghề như TPBank, VOVBacsi24, VNDirect, Shinhan Finance, Ahamove, Logivan, Homedy, Adavigo, bTaskee…

Quý bạn đọc quan tâm xin mời đăng ký NHẬN TƯ VẤN TẠI ĐÂY: 

Banner bottom