Most applications need to communicate info (errors, warnings, ...) to the end user. With Notify you can do it in a unobstrusive and responsive way.
There are three type of notifications included with this component:
toast Opened in the corner you choose and 40% width.
bar Opened top or bottom and full width.
panel Opened left or right and full height.
Stashy.Notify(userOptions)
Parameter | Type | Description |
---|---|---|
userOptions | object | The init options for each instance of Notify. Take a look to the userOptions table and explore the available stuff |
Option | Type | Default | Description |
---|---|---|---|
target | string | body | The element target container, by default the "body" of the page |
title | string | empty string | The element title |
titleSize | int | 3 | Enter whatever value in the range 1..6.The title will be an HTML heading. This number will provide the heading size (h1, h2, h3, ...) |
contentType | string | text |
It can be "inline" or "selector". If you select "inline", then the content property should be simple text or inline html On the other side, if you select "selector", you can provide any CSS selector to choose what to include in the notification. If your option is "selector" remember you can add the st-notify-content class to the content box you are going to include in the notification in order to hide it. |
content | string | empty string | Simple text, inline html or a CSS selector |
style | string | default | Changes the color of the notification. The allowed styles are "default", "error", "info", "success" and "warning" |
animDuration | string | fast | "fast" or "slow" for a 1 sec or 2 sec animations |
closeArea | string | button |
If you select "button" then a close button will be added to notification. If you choose "element" then the element itself will be clickable to closing it. |
activeDuration | int | 0 | How long to display the notification for in milliseconds, zero will leave the notification displayed until the user closes manually. |
Name | Description |
---|---|
toast(positionX, positionY,radius) | Create a toast style notification |
positionX: "right" or "left" positionY: "top" or "bottom" radius: Select true if you like rounded corners |
|
bar(positionY) | Creates a bar style notification |
positionY: "top" or "bottom" |
|
panel(positionX) | Creates a panel style notification |
positionX: "right" or "left" |
Stashy.Notify({ title : "My toast", content : "Toast style notification", titleSize : 4, style : "success", contentType : "text", animDuration : "fast", closeArea : "element" }).toast("right", "bottom", true); Stashy.Notify({ title : "My bar", content : "Bar style notification", titleSize : 1, style : "info", contentType : "html", animDuration : "slow", closeArea : "button" }).bar("top"); Stashy.Notify({ title : "My panel", content : "#whatever-element-in-the-page", titleSize : 2, style : "default", contentType : "html", animDuration : "fast", closeArea : "button", activeDuration : 5000 }).panel("right");
Ok, let´s go with the important part, so start choosing your options ans see what Notify can do for you :)
less
For using just this component, create a .less file similar to Stashy.less, include in order the following imports and compile:
Stashy.Variables.less Stashy.Mixins.less Stashy.Animate.less Stashy.Notify.lessJS
jQuery.js Stashy.Notify.js