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ầu
util.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-motion
truy 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ỏ.
Trong mờ
Bánh mì nướng cũng hơi trong mờ, vì vậy chúng có thể 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-filter
CSS, chúng tôi cũng sẽ cố gắng làm mờ các phần tử trong bánh mì nướng.
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.
Vị trí
Đặt bánh mì nướng bằng 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
.
Đối với các hệ thống tạo ra 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.
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.
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-live
khu 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ì 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 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 độ role
và aria-live
mứ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 delay
thời gian chờ để đảm bảo mọi người có đủ thời gian đọc lời chúc mừng.
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.
Hành vi JavaScript
Cách sử dụng
Khởi tạo bánh mì nướng qua JavaScript:
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 . Họ quay 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.toast
sự 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ị.
.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.toast
sự 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 autohide
hiện false
.
.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.
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. |