Toast Notification là hộp thông báo xuất hiện từ bất kỳ phía nào của màn hình tiện ích, chủ yếu từ phía trên bên phải. Thông báo có thể là thông báo cảnh báo, thông báo lỗi hoặc một số thông báo tích cực
Chúng ta hãy xem nhanh hình ảnh đã cho của dự án [Thông báo bánh mì nướng hoạt hình với Thanh tiến trình]. Ở trên cùng, chúng ta có thể thấy bánh mì nướng của mình với một thanh tiến trình và một nút hủy, bên dưới là một nút. Thực ra ban đầu sẽ chỉ có một nút bấm, khi chúng ta bấm vào nút đó sẽ hiện ra bánh mì nướng cùng với thanh tiến trình. Về cơ bản, khi tiến trình kết thúc, tiến trình toast sẽ tự động biến mất hoặc chúng ta có thể đóng toast đó bằng cách nhấp vào nút đóng
Bây giờ chúng ta sẽ xem bản demo thực sự của dự án này và video hướng dẫn đầy đủ giúp bạn có ý tưởng về cách tất cả HTML CSS và JavaScript hoạt động hoàn hảo đằng sau dự án này
Toast Notification với Progress Bar trong HTML CSS & JavaScript
Tôi đã cung cấp tất cả mã HTML CSS và JavaScript mà tôi đã sử dụng để tạo Thông báo bánh mì nướng hoạt hình này với Thanh tiến trình, trước khi chuyển sang tệp mã nguồn, bạn cần biết một số bản in cơ bản của video hướng dẫn này
Như các bạn đã xem video hướng dẫn Animated Toast Notification với Progress Bar. Lúc đầu, chúng tôi chỉ thấy một nút trên màn hình. Khi tôi nhấp vào nút bánh mì nướng, thông báo sẽ trượt từ phía trên bên trái và thanh tiến trình cũng bắt đầu. Sau khi thanh tiến trình kết thúc để tiến hành, thông báo bánh mì nướng sẽ tự động biến mất. Tôi có thể đóng bánh mì nướng đó bằng cách nhấp vào nút đóng, có sẵn trên bánh mì nướng
Bánh mì nướng và nút và tất nhiên được tạo từ HTML và CSS, và để tạo hoạt ảnh cho nó, tôi đã sử dụng một số mã JavaScript. Bạn cũng có thể tạo nó bằng cách sử dụng HTML và CSS nhưng chúng tôi sẽ gặp sự cố, khi chúng tôi nhấp vào nút đóng của bánh mì nướng, thanh tiến trình đã được lấp đầy
Tôi hy vọng bây giờ bạn đã nắm được khái niệm cơ bản về dự án này [Toast Notification with Progress Bar] và cách tạo ra nó, nếu bạn cảm thấy khó khăn khi tạo, tôi đã cung cấp tất cả
bạn có thể thích điều này
- Phương thức bật lên hoạt hình
- Nút có thanh tiến trình
- Nút có hiệu ứng Ripple
- Thực đơn Hamburger hoạt hình
Toast Notification với Progress Bar [Source Code]
Để lấy mã nguồn của Toast Notification với Progress Bar này trước hết bạn cần tạo 2 file. một tệp HTML và một tệp CSS. Sau khi tạo hai tệp này, bạn có thể sao chép-dán mã nguồn sau. Bạn cũng có thể tải xuống trực tiếp tất cả các mã nguồn của Biểu mẫu đăng nhập và đăng ký này bằng cách nhấp vào nút tải xuống đã cho
Thành phần bánh mì nướng mới được giới thiệu trong Bootstrap 4. Chúng là những thông báo nhẹ tương tự như thông báo đẩy được trình duyệt web hiển thị trên màn hình máy tính. Chúng được tạo bằng flexbox, vì vậy bạn có thể dễ dàng căn chỉnh và định vị chúng trên trang web
Ngoài ra, chúc mừng đượ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ằng phương thức
Bước 1. Thêm đánh dấu bánh mì nướng
Đánh dấu bánh mì nướng khá đơn giản. Ví dụ sau sẽ chỉ cho bạn cách tạo thành phần bánh mì nướng có tiêu đề, nội dung và nút đóng
We miss you!
10 mins ago
It's been a long time since you visited us. We've something special for you. Click here!
Bước 2. Kích hoạt bánh mì nướng
Toasts có thể được kích hoạt thông qua JavaScript — chỉ cần gọi phương thức Bootstrap
— Đầu ra của ví dụ trên sẽ giống như thế này
Click here!
0, chẳng hạn như
We miss you!
10 mins ago
It's been a long time since you visited us. We've something special for you. Click here!
We miss you!
10 mins ago
It's been a long time since you visited us. We've something special for you. Click here!
NameTypeDefault ValueDescriptionanimationbooleantrueÁp dụng chuyển đổi mờ dần CSS cho toast. autohidebooleantrueTự động ẩn toast. delaynumber5000Delay ẩn bánh mì nướng [ms]
Thuộc tính dữ liệu cung cấp một cách dễ dàng để thiết lập các tùy chọn toast, tuy nhiên JavaScript là cách thích hợp hơn vì nó giúp bạn không phải làm việc lặp đi lặp lại. Xem các ví dụ về tùy chọn vượt qua trong phần phương pháp bên dưới để biết cách đặt tùy chọn cho chúc mừng bằng JavaScript
Trong ví dụ sau, chúng tôi đã đặt tùy chọn
We miss you!
10 mins ago
It's been a long time since you visited us. We've something special for you. Click here!
We miss you!
10 mins ago
It's been a long time since you visited us. We've something special for you. Click here!
We miss you!
10 mins ago
It's been a long time since you visited us. We've something special for you. Click here!
phương pháp
Đây là các phương thức toast của bootstrap tiêu chuẩn
tùy chọn vượt qua
Ngoài ra, bạn có thể chuyển các tùy chọn cho bánh mì nướng bằng cách sử dụng đối tượng tùy chọn
Mã ví dụ sau sẽ ngăn bánh mì nướng tự động đóng
Đoạn mã ví dụ sau sẽ tăng thời gian autohide của toast lên 10 giây
trình diễn
Phương pháp này được sử dụng để hiển thị bánh mì nướng
ẩn giấu
Phương pháp này được sử dụng để ẩn bánh mì nướng. Bạn phải gọi phương thức này theo cách thủ công nếu bạn đặt
We miss you!
10 mins ago
It's been a long time since you visited us. We've something special for you. Click here!
We miss you!
10 mins ago
It's been a long time since you visited us. We've something special for you. Click here!
vứt bỏ
Phương pháp này ẩn bánh mì nướng của một phần tử. Bánh mì nướng sẽ vẫn còn trên DOM nhưng sẽ không hiển thị nữa
getInstance
Đây là một phương thức tĩnh cho phép bạn lấy phiên bản bánh mì nướng được liên kết với một phần tử DOM
getOrCreateInstance
Đây là một phương thức tĩnh cho phép bạn lấy phiên bản toast được liên kết với một phần tử DOM hoặc tạo một phiên bản mới trong trường hợp nếu toast không được khởi tạo
Mẹo. Các phương thức tĩnh không thể được gọi trên các thể hiện của lớp [i. e. các đối tượng]. Họ được gọi trên chính lớp học. Từ khóa
We miss you!
10 mins ago
It's been a long time since you visited us. We've something special for you. Click here!
Sự kiện
Lớp phương thức của Bootstrap bao gồm một vài sự kiện để kết nối với chức năng phương thức
Sự kiệnMô tảshow. bs. toastSự kiện này kích hoạt ngay lập tức khi phương thức thể hiện show được gọi. cho xem. bs. bánh mì nướng 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. Nó sẽ đợi cho đến khi quá trình chuyển đổi CSS hoàn tất trước khi bị kích hoạt. ẩn giấu. bs. toastSự kiện này được kích hoạt ngay lập tức khi phương thức đối tượng ẩn được gọi. ẩn giấu. bs. bánh mì nướng Sự kiện này được kích hoạt khi bánh mì nướng đã được ẩn khỏi người dùng. Nó sẽ đợi cho đến khi quá trình chuyển đổi CSS hoàn tất trước khi bị kích hoạt
Ví dụ sau sẽ hiển thị thông báo cảnh báo cho người dùng khi quá trình chuyển đổi mờ dần của bánh mì nướng đã hoàn tất. Hãy dùng thử và xem nó hoạt động như thế nào