Chúc rượu

Đẩy thông báo tới khách truy cập của bạn bằng lời chúc mừng, một thông báo cảnh báo nhẹ và có thể tùy chỉnh dễ dàng.

Toast là các thông báo nhẹ được thiết kế để bắt chước các thông báo đẩy đã được phổ biến bởi các hệ điều hành dành cho thiết bị di động và máy tính để bàn. Chúng được chế tạo bằng flexbox, vì vậy chúng dễ dàng căn chỉnh và định vị.

Tổng quan

Những điều cần biết khi sử dụng plugin bánh mì nướng:

• Nếu bạn đang xây dựng JavaScript của chúng tôi từ nguồn, nó yêu cầuutil.js .
• Toasts được chọn tham gia vì lý do hiệu suất, vì vậy bạn phải tự khởi tạo chúng .
• Bánh mì nướng sẽ tự động ẩn nếu bạn không chỉ định autohide: false.

Các ví dụ

Nền tảng

Để khuyến khích chúc mừng có thể mở rộng và dự đoán được, chúng tôi khuyên bạn nên sử dụng tiêu đề và nội dung. Sử dụng tiêu đề bánh mì nướng display: flex, cho phép dễ dàng căn chỉnh nội dung nhờ các tiện ích margin và flexbox của chúng tôi.

Bánh mì nướng linh hoạt như bạn cần và có rất ít đánh dấu bắt buộc. Ở mức tối thiểu, chúng tôi yêu cầu một phần tử duy nhất chứa nội dung “nướng” của bạn và đặc biệt khuyến khích nút loại bỏ.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Trong mờ

Bánh mì nướng cũng hơi mờ, vì vậy chúng trộn lẫn với bất cứ thứ gì chúng có thể xuất hiện. Đối với các trình duyệt hỗ trợ thuộc tính backdrop-filterCSS, chúng tôi cũng sẽ cố gắng làm mờ các phần tử trong bánh mì nướng.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Xếp chồng

Khi bạn có nhiều lời chúc, chúng tôi mặc định xếp chồng chúng một cách rõ ràng theo cách có thể đọc được.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">just now</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    See? Just like this.
  </div>
</div>

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">2 seconds ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Heads up, toasts will stack automatically
  </div>
</div>

Vị trí

Đặt bánh mì nướng với CSS tùy chỉnh khi bạn cần. Trên cùng bên phải thường được sử dụng cho các thông báo, ở giữa trên cùng cũng vậy. Nếu bạn chỉ muốn hiển thị một bánh mì nướng cùng một lúc, hãy đặt các kiểu định vị ngay trên .toast.

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div class="toast" style="position: absolute; top: 0; right: 0;">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Đối với các hệ thống tạo nhiều thông báo hơn, hãy cân nhắc sử dụng phần tử gói để chúng có thể dễ dàng xếp chồng lên nhau.

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <!-- Position it -->
  <div style="position: absolute; top: 0; right: 0;">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        See? Just like this.
      </div>
    </div>

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

Bạn cũng có thể trở nên thú vị với các tiện ích flexbox để căn chỉnh bánh mì nướng theo chiều ngang và / hoặc chiều dọc.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Khả năng tiếp cận

Việc nâng cốc nhằm gây gián đoạn nhỏ cho khách truy cập hoặc người dùng của bạn, vì vậy, để giúp những người có trình đọc màn hình và các công nghệ hỗ trợ tương tự, bạn nên nâng cốc của mình trong một aria-livekhu vực . Các thay đổi đối với các vùng trực tiếp (chẳng hạn như chèn / cập nhật thành phần bánh mì nướng) được trình đọc màn hình tự động thông báo mà không cần di chuyển tiêu điểm của người dùng hoặc làm gián đoạn người dùng. Ngoài ra, hãy bao gồm aria-atomic="true"để đảm bảo rằng toàn bộ bánh mì nướng luôn được công bố là một đơn vị (nguyên tử) duy nhất, thay vì thông báo những gì đã được thay đổi (điều này có thể dẫn đến sự cố nếu bạn chỉ cập nhật một phần nội dung của bánh mì nướng hoặc nếu hiển thị cùng một nội dung bánh mì nướng tại một thời điểm sau). Nếu thông tin cần thiết là quan trọng đối với quy trình, ví dụ như danh sách các lỗi trong biểu mẫu, thì hãy sử dụng thành phần cảnh báothay vì bánh mì nướng.

Lưu ý rằng khu vực trực tiếp cần phải có trong đánh dấu trước khi hình ảnh bánh mì nướng được tạo hoặc cập nhật. Nếu bạn tạo động cả hai cùng một lúc và đưa chúng vào trang, chúng thường sẽ không được công bố bởi các công nghệ hỗ trợ.

Bạn cũng cần điều chỉnh mức độ rolevà aria-livemức độ tùy thuộc vào nội dung. Nếu đó là một thông báo quan trọng như lỗi, hãy sử dụng role="alert" aria-live="assertive", nếu không, hãy sử dụng role="status" aria-live="polite"các thuộc tính.

Khi nội dung bạn đang hiển thị thay đổi, hãy nhớ cập nhật delaythời gian chờ để đảm bảo mọi người có đủ thời gian đọc lời chúc mừng.

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

Khi sử dụng autohide: false, bạn phải thêm một nút đóng để cho phép người dùng bỏ bánh mì nướng.

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Hành vi JavaScript

Cách sử dụng

Khởi tạo bánh mì nướng qua JavaScript:

$('.toast').toast(option)

Tùy chọn

Các tùy chọn có thể được chuyển qua các thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy nối tên tùy chọn vào data-, như trong data-animation="".

Phương pháp

$().toast(options)

Đính kèm một trình xử lý bánh mì nướng vào một tập hợp phần tử.

.toast('show')

Tiết lộ bánh mì nướng của một phần tử. Trả về cho người gọi trước khi bánh mì nướng thực sự được hiển thị (tức là trước khi shown.bs.toastsự kiện xảy ra). Bạn phải gọi phương thức này theo cách thủ công, thay vào đó bánh mì nướng của bạn sẽ không hiển thị.

$('#element').toast('show')

.toast('hide')

Ẩn bánh mì nướng của một phần tử. Trả lại cho người gọi trước khi bánh mì nướng thực sự bị ẩn (tức là trước khi hidden.bs.toastsự kiện xảy ra). Bạn phải gọi phương thức này theo cách thủ công nếu bạn đã thực autohidehiện false.

$('#element').toast('hide')

.toast('dispose')

Ẩn bánh mì nướng của một phần tử. Bánh mì nướng của bạn sẽ vẫn còn trên DOM nhưng sẽ không hiển thị nữa.

$('#element').toast('dispose')

Sự kiện

$('#myToast').on('hidden.bs.toast', function () {
  // do something…
})