Toasts

Show Regular Toast Show Actionable Toast Show Actionable Long Toast Show Dismissable toast

To create a toast that is not a material_notice:
use the info key to set the correct classes: toastr["info"]("Toast!")

If you want an actionable link you will need to construct the anchor tag and pass that element to the actionLink option. The text in the actionable link should be one word.

More documentation can be found MDB's site, here .

Regular Toast

// = link_to "Show Regular Toast", "", class: "btn btn-primary", id: "show-regular-toast"

$("#show-regular-toast").click(function(e) {
  e.preventDefault();
  toastr.options["timeOut"] = "5000";
  toastr.options["tapToDismiss"] = false;
  toastr.options["positionClass"] = "toast-bottom-right";
  toastr.options["actionLink"] = false;
  toastr["info"]("I was launched via jQuery!");
})

Actionable Toast

// = link_to "Show Actionable Toast", "/toasts.html", class: "btn btn-primary", id: "show-actionable-toast",
//    data: { action_text: "Retry" }

$("#show-actionable-toast").click(function(e) {
  e.preventDefault();
  toastr.options["timeOut"] = 0;
  toastr.options["extendedTimeOut"] = 0;
  toastr.options["tapToDismiss"] = false;
  toastr.options["positionClass"] = "toast-bottom-right";
  var action = $("<a>");
  action.text($(this).data("action-text"));
  action.attr("href", $(this).attr("href"));
  toastr.options["actionLink"] = action;
  toastr["info"]("This is a very long toast that fits the page!");
})

Actionable Long Toast

// = link_to "Show Actionable Toast", "/toasts.html", class: "btn btn-primary", id: "show-actionable-toast",
//    data: { action_text: "Retry" }

$("#show-actionable-toast").click(function(e) {
  e.preventDefault();
  toastr.options["timeOut"] = 0;
  toastr.options["extendedTimeOut"] = 0;
  toastr.options["tapToDismiss"] = false;
  toastr.options["positionClass"] = "toast-bottom-right";
  var action = $("<a>");
  action.text($(this).data("action-text"));
  action.attr("href", $(this).attr("href"));
  toastr.options["actionLink"] = action;
  toastr["info"]("This is a very long toast that fits the
    dshfdg sfhjgsdh fgdsgfhs ghjf jdshfsdhf gdsjgf dhjshjfg hjg jsgjshg d page!");
})

Dismissable Toast

// = link_to "Show Dismissable toast", "/toasts.html", class: "btn btn-primary", id: "show-dismiss-toast"

  $("#show-dismiss-toast").click(function(e) {
    e.preventDefault();
    toastr.options["timeOut"] = 0;
    toastr.options["extendedTimeOut"] = 0;
    toastr.options["tapToDismiss"] = false;
    toastr.options["positionClass"] = "toast-bottom-center";
    toastr.options["closeButton"] = true;
    toastr.options["closeHtml"] = "<div class='order-1'>DISMISS</div>";
    toastr.options["actionLink"] = false;
    toastr["info"]("I can be dismissed");
  })

Material Notice

# In controller:

# Optional action link with text
flash[:action] = { anchor: forms_path, text: "Retry" }

redirect_to @form, notice: "Form was successfully created."

# In application.html.haml:

= material_flash(action: flash[:action], bottom_nav: yield(:bottom_nav_present))