Sử dụng BEM tạo Toast Message UI

Xin chào bạn! Hôm nay chúng ta sẽ cùng nhau tìm hiểu về cách sử dụng BEM để tạo giao diện Toast Message UI. Nếu bạn muốn tạo một hiệu ứng thông báo nhỏ gọn và dễ dùng trong website của mình, bài viết này sẽ giúp bạn thực hiện điều đó. Cùng bắt đầu nhé!

Giới thiệu

Trong bài viết này, chúng ta sẽ tạo một giao diện Toast Message UI đơn giản. Giao diện này sẽ xuất hiện dưới dạng một thông báo nhỏ ở góc màn hình và tự động ẩn sau một khoảng thời gian hoặc khi người dùng nhấn vào nút đóng.

Chuẩn bị

Trước tiên, chúng ta cần chuẩn bị các thành phần cần thiết để tạo giao diện Toast Message UI. Chúng ta sẽ sử dụng BEM (Block, Element, Modifier) để xác định các khối, phần tử và các thuộc tính của chúng.

Chúng ta sẽ bắt đầu bằng việc tạo một khối gọi là “thoát” (toast). Trong khối này, chúng ta sẽ chứa các phần tử chính như “tiêu đề” (title) và “nội dung” (content). Ngoài ra, chúng ta cũng có thể thêm các yếu tố mở rộng như “đóng” (close) để cho phép người dùng tắt thông báo.

Triển khai

Như đã nói ở trên, chúng ta sẽ sử dụng BEM để triển khai giao diện Toast Message UI. Đầu tiên, chúng ta cần đặt tên cho các khối và phần tử dựa trên tiêu chuẩn của BEM. Ví dụ, chúng ta có thể đặt tên khối bên ngoài là “thoát” và các phần tử bên trong có thể là “tiêu đề” và “nội dung”.

<div class="toast">
  <div class="toast__title">Tiêu đề</div>
  <div class="toast__content">Nội dung thông báo</div>
  <div class="toast__close">X</div>
</div>

Tiếp theo, chúng ta cần viết các kiểu CSS để tạo hiệu ứng cho giao diện Toast Message UI. Chúng ta có thể sử dụng các thuộc tính animation và transition để thêm hiệu ứng tự động ẩn và hiện thông báo.

.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: white;
  border-radius: 4px;
  padding: 10px;
  animation: fade-in 0.3s ease-out;
  transition: opacity 0.3s ease-out;
}

.toast__close {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.toast--hidden {
  opacity: 0;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Sau khi triển khai xong, chúng ta có thể kiểm tra kết quả bằng cách bấm vào nút “X” để xem thông báo biến mất. Chúng ta cũng có thể tùy chỉnh thông báo bằng cách thay đổi các giá trị trong CSS.

Kết luận

Trên đây là cách sử dụng BEM để tạo giao diện Toast Message UI. Từ đó, bạn có thể tùy chỉnh và sử dụng giao diện này cho website của mình. Hy vọng bài viết đã giúp bạn hiểu rõ hơn về cách triển khai giao diện sử dụng BEM và tạo ra một giao diện Toast Message UI đẹp và chuyên nghiệp.