Spectre.css and Stimulus.js

Spectre.css is a nice small CSS framework, but it doesn’t include any javascript. Therefore, to have proper effects onmodal and toast, we need to add some ourselves. Here is how to use those javscript in Stimulus.js.

First, add controller on toast in HTML

div.toast.toast-primary data-controller='toast'
        button.btn.btn-clear.float-right data-action='toast#hide'
        = notice

Then write the controller javascript in app/javascript/controllers/toast_controller.js

import { Controller } from "stimulus"
export default class extends Controller {
  static targets = []
connect() {
  }
hide(event) {
    event.preventDefault()
    this.element.remove()
    console.log("toast removed")
  }
}

That’s it. Surely you can try fade out as a better visual hint or some other fancy effect. This one simply remove the HTML element from page.