Giới thiệu về gem “toastr-rails”

Tram Ho

Bạn đã chán với việc hiển thị các thông báo flash như thế này ?

Và muốn chuyển đổi sang hiển thị thế này:

Vậy thì gem toastr-rails là dành cho bạn !

1. Giới thiệu chung

toastr là một thư viện Javascript được phát triển dựa trên Jquery và được xây dựng để phục vụ cho việc hiển thị thông báo một cách đẹp đẽ hơn và có thể customize được.
Ngoài gem toastr-rails được sử dụng trong Rails thì ta cũng có thể tìm thấy toast trên thư viện Bootstrap 4, tuy nhiên gem này được xây dựng để hỗ trợ tốt hơn cho Rails.

Phiên bản hiện tại của gem toastr-rails là 2.0.1.

Các bạn có thể xem qua demo của gem này tại đây: https://codeseven.github.io/toastr/demo.html

2. Ví dụ sử dụng

1. Cài đặt Jquery trên Rails

Thêm

vào Gemfile.

Thêm

vào application.js. Nếu đang sử dụng Rails 5.1+ thì chỉ cần thêm dòng //= require jquery vào file này là được.

2. Cài đặt gem toastr-rails

Thêm

vào Gemfile.

Thêm

vào application.js.

vào application.css.

3. Tạo helper

Và thêm dòng sau đây vào layout, ngay dưới js include tag

4. Sử dụng

Sau khi có helper kia thì việc sử dụng toast trên controller không khác gì việc sử dụng flash, ta chỉ cần sử dụng đơn giản như sau:

Còn nếu như sử dụng trong file JS thì gem toastr-rails đã có hỗ trợ sẵn các hàm sau:

5. Customize

Ngoài việc hiển thị, ta còn có thể thay đổi một vài thông số cho toastr. Ta thay đổi các thông số này bằng cách chỉnh sửa object toastr.options trong file js (ở ví dụ sau đây là file application.js nhưng bạn cũng có thể thay đổi tùy theo yêu cầu trên ứng dụng của bạn)

3. Nguồn tham khảo

  1. https://github.com/tylergannon/toastr-rails
  2. https://coderwall.com/p/ximm8a/coverting-rails-flash-messages-to-toastr-notifications
Chia sẻ bài viết ngay

Nguồn bài viết : Viblo