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 xây dựng bằng hộp uốn dẻo, 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 .
Xin lưu ý rằng bạn chịu trách nhiệm về việc nâng cốc chúc mừng.
Bánh mì nướng sẽ tự động ẩn nếu bạn không chỉ định autohide: false.

Hiệu ứng hoạt ảnh của thành phần này phụ thuộc vào prefers-reduced-motiontruy vấn phương tiện. Xem phần chuyển động giảm trong tài liệu hỗ trợ tiếp cận của chúng tôi .

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

Chào thế giới! Đây là một tin nhắn nâng ly.

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

Trực tiếp

Nhấp vào nút bên dưới để hiển thị bánh mì nướng (được đặt với các tiện ích của chúng tôi ở góc dưới bên phải) đã được ẩn theo mặc định với .hide.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <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>

Trong mờ

Bánh mì nướng hơi mờ để hòa hợp với những gì bên dưới chúng.

Chào thế giới! Đây là một tin nhắn nâng ly.

<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 theo chiều dọc để có thể đọc được.

Nhìn thấy? Chỉ như thế này.

Lưu ý, chúc rượu sẽ tự động xếp chồng lên nhau

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

Chào thế giới! Đây là một tin nhắn nâng ly.

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

Nhìn thấy? Chỉ như thế này.

Lưu ý, chúc rượu sẽ tự độ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.

Chào thế giới! Đây là một tin nhắn nâng ly.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="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ử), thay vì chỉ thông báo những gì đã 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 quá 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ờ để người dùng có đủ thời gian đọc thông báo.

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

Chào thế giới! Đây là một tin nhắn nâng ly.

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

Mặc dù về mặt kỹ thuật, bạn có thể thêm các điều khiển có thể tập trung / có thể hành động (chẳng hạn như các nút hoặc liên kết bổ sung) trong bánh mì nướng của mình, nhưng bạn nên tránh làm điều này để nâng cốc tự động. Ngay cả khi bạn nâng cốc chúc mừng trong thời delaygian dài , người dùng bàn phím và công nghệ hỗ trợ có thể gặp khó khăn để nâng cốc đúng lúc để thực hiện hành động (vì lời chúc không nhận được tiêu điểm khi chúng được hiển thị). Nếu bạn hoàn toàn phải kiểm soát thêm, chúng tôi khuyên bạn nên sử dụng bánh mì nướng với autohide: false.

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="".

Tên	Loại hình	Mặc định	Sự mô tả
hoạt hình	boolean	thật	Áp dụng chuyển đổi mờ dần CSS cho bánh mì nướng
autohide	boolean	thật	Tự động ẩn bánh mì nướng
sự chậm trễ	con số	`500`	Trì hoãn ẩn bánh mì nướng (mili giây)

Phương pháp

Các phương thức và chuyển tiếp không đồng bộ

Tất cả các phương thức API là không đồng bộ và bắt đầu quá trình chuyển đổi . Chúng trở lại người gọi ngay sau khi quá trình chuyển đổi được bắt đầu nhưng trước khi quá trình chuyển đổi kết thúc . Ngoài ra, một lệnh gọi phương thức trên một thành phần chuyển tiếp sẽ bị bỏ qua .

Xem tài liệu JavaScript của chúng tôi để biết thêm thông tin .

`$().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

Loại sự kiện	Sự mô tả
show.bs.toast	Sự kiện này kích hoạt ngay lập tức khi `show`phương thức thể hiện được gọi.
show.bs.toast	Sự kiện này được kích hoạt khi bánh mì nướng đã được hiển thị cho người dùng.
hide.bs.toast	Sự kiện này được kích hoạt ngay lập tức khi `hide`phương thức thể hiện đã được gọi.
hidden.bs.toast	Sự kiện này được kích hoạt khi bánh mì nướng đã hoàn tất bị ẩn khỏi người dùng.

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