<div class="relative bg-yellow-100 text-white w-96 rounded-md p-4 hover:bg-yellow-200"
data-controller="alert"
data-alert-hidden-class-value="hidden">
<span class="absolute text-yellow-900 font-bold top-1 right-3 cursor-pointer" data-action="click->alert#close">×</span>
<div class="italic text-yellow-800">
Hello, Stimulus!
</div>
</div>
<div class="relative bg-red-100 text-white w-96 rounded p-4 hover:bg-red-200"
data-controller="alert"
data-alert-hidden-class-value="hidden"
data-alert-time-value="20000">
<span class="absolute text-red-900 font-bold top-1 right-3 cursor-pointer" data-action="click->alert#close">×</span>
<div class="font-bold text-2xl text-red-900">
Hello, Stimulus!
</div>
<div class="italic text-red-800">
And this alert is only visible for the first 20 seconds
</div>
</div>
npm install stimulus-alert
// or
yarn add stimulus-alert
Add the controller in your project
import { Application } from 'stimulus'
import AlertController from 'stimulus-alert'
const application = Application.start()
application.register('alert', AlertController)
Create a new element in you HTML with the controller alert and set data-alert-hidden-class-value .
data-alert-time-value is optional.
<div data-controller="alert" data-alert-hidden-class-value="hidden">
<span data-action="click->alert#close">×</span>
Hello, Stimulus!
</div>
import AlertController from 'stimulus-alert'
export default class extends AlertController {
close() {
super.close()
// your code
}
timer() {
super.timer()
// your code
}
}