electric-toaster
A helper class to fire some <burnt-toast>
web components in queue
Installation
npm install electric-toaster --save
Import ElectricToaster in your main javascript file
ElectricToaster
class
Usage - Instantiate the class
Create a new instance of the ElectricToaster
class, it takes two parameters, a ToastTemplateKey
and a Toast
object
that defines a first ToastTemplate
, ToastType
and ToastAnimation
The ToastTemplateKey
provided will be used as a css class
name to set specific styles(see more below)
ToastTemplate
Defining a A template is a function
that takes in parameter whatever datas you want to use in your toast. It returns html string
This will be the content of the <burnt-toast>
element (see more below).
You need to use at least one slot
out of the three available to display some content.
ToastAnimation
Defining a An Object
with two keys : enter
and leave
, each are of type [Keyframe[], KeyframeAnimationOptions]
(basically the parameters of the Element.animate()
method from the web animation API)
ToastType
Defining a Type can be either "simple"
or "action"
.
"simple"
Default valueIf your toast won't contains any input
"action"
If you want to have inputs and listen for events in your toast (see more below)
🔥Burn your toast🍞!
Burn your toast when you feel it's time to eat some !
The burn()
method takes two parameters, a ToastTemplateKey
to let know the toaster which template to use for this particular toast and a ToastTemplateData
defining the values of the keys you used in your ToastTemplate
definition
electricToaster.burn"simple-toast",
Add new templates
You can define a new template with the registerTemplate()
method. It takes the same parameters as the constructor.
electricToaster.registerTemplate'action-toast',
Registering events
If you have inputs in an "action"
type toast and want to handle their events, you can do it inside the registerToastEvent()
method. It takes a callback
that receives an instance of the current displayed <burnt-toast>
element.
electricToaster.registerToastEvent
<burnt-toast>
element
Usage - Slots
Public method
initiateEnterAnimation()
Set the onfinish callback
to invoke initiateLeaveAnimation()
method
initiateLeaveAnimation()
Set the onfinish callback
to invoke the remove()
super method
Default styling
) ) ) )
In your main css file
Styling by ToastTemplateKey