1.2.1 • Published 4 years ago
ember-addon-toast-message v1.2.1
Ember-addon-toast-message
Installation
ember install ember-addon-toast-message
or add it to the package.json and run npm install
The add-on contains a service notification
and a component notification-toast-message
.
To use the add-on you need to bind the service to the component properties.
Example usage
In your template
{{notification-toast-message
isOpen=notification.isOpen
type=notification.type
message=notification.message
icon=notification.icon
actionToBeExecuted=notification.actionToBeExecuted
actionText=notification.actionText
transitionObjectSelector=notification.transitionObjectSelector}}
In your controller
notification: Ember.inject.service(),
And to activate your toast you need to call the show()
method of the service.
this.get('notification').show(
"Could not save your record", //Message to be shown
"default", //Type of the notification
this.retryAction, //Action the toast message will invoked once clicked on the button
"Retry", //Message for the button which invoked the action
".save-btn") //This is a query selector for one html element
- When calling the show method, Type error is thrown if query selector is passed and no element is found.
- Every property is mandatory except the message in the toast.
- If an action is passed to the show() method, the toast will last 5 seconds (5000ms) and if not 2 seconds (2000ms)
Meaning of the components properties.
isOpen
Controlls if the toast is shown or not. When this property changes (from theshow()
function in the service) it will display the toast.type
This is the type of the notification (default / static-notification)message
The message which will be displayed in the toast.icon
The icon which will be displayed in the toast.actionToBeExecuted
Closure which will be invoked if the action button is clicked.actionText
The text of the action button.transitionObjectSelector
This is a query selector for one html element. If present in the DOM, that element will be moved up to compensate the height of the toast.
If the show()
method is called twice, the service will wait untill the first toast disappears.
TODO
- Currently the toast transitions with fixed height (75px) for desktop, remove the hardcoded px