Visual colors, and visual messages.
The notifications component has a dependency with the CSS object messages
If you need to show a message when the page is loaded just add an input hidden somewhere in the DOM.
<input type="hidden" data-fc-modules="notification" data-fc-event="load" data-fc-type="info" data-fc-text="This message is shown when this page is loaded" />
<!-- ok notification -->
<p><a href="#" data-fc-modules="notification" data-fc-event="click" data-fc-type="success" data-fc-text="Congratulations!">Click me to show a success notification</a></p>
<!-- ko notification -->
<p><a href="#" data-fc-modules="notification" data-fc-event="click" data-fc-type="error" data-fc-autoclose="3" data-fc-text="Error!">Click me to show an error notification</a></p>
<!-- warning notification -->
<p><a href="#" data-fc-modules="notification" data-fc-event="click" data-fc-type="warning" data-fc-text="Caution!">Click me to show a warning notification</a></p>
<!-- info notification -->
<p><a href="#" data-fc-modules="notification" data-fc-event="click" data-fc-type="info" data-fc-text="Did you know?">Click me to show an info notification</a></p>
If you need to show a notification in a module the best way is to use the module commnication (Mediator). Here you have an example of how to show a message when a module starts.
FrontendCore.define('myModule', [], function () {
return {
onStart: function () {
// 1. Require and start the 'notification' module
FrontendCore.requireAndStart( ['notification'], function(){
//2 . On callback use the mediator to publish the notification
FrontendMediator.publish( 'notification', { type : 'success', message: 'Your message here' } );
});
}
};
});
Defines the content to load
DEFAULT: click
Type of the message (success, error, warning or info)
DEFAULT: ok
Text to show in the message. If it's not defined the message will not be shown.
Defines how many seconds the message will be shown (1, 2, 3...). Also can disable autoclose (set it to false). By default is 5 seconds.