AST-Notif is a simple but feature-rich notification library for creating alert dialog, Microsoft-style roar notifications, toaster slices, and Android-style snack bars for the web.
notification popup ui design, notification design examples, ui notifications, website notification design, notification module for the app, notification mobile design
Features:
- Main alert dialog with customization of buttons, colors, etc.
- Toast and Snackbar as Android.
- Notification like Windows 10.
- You can set various parameters to customize it.
How to make use of it:
1. Put the stylesheet ast-notif.css and JavaScript ast-notif.js on the HTML web page.
<link rel="stylesheet" href="css/ast-notif.css" /> <script src="js/ast-notif.js"></script>
2. Create an alert dialog with AstNotif.dialog() function. Possible parameters:
// AstNotif.dialog(title: string, message: string, options[optional]: object, callbackOK: function, callbackCancel: function);
AstNotif.dialog('Alert Title', 'Alert Message', {
// 'dark', 'success', 'danger', 'warning', 'primary', 'info', 'default'
theme: 'default',
bgheadcolor: THEMES.DEFAULT.bgcolor,
bgbodycolor: "white",
bgfootercolor: "white",
color: THEMES.DEFAULT.color,
// Has icons?
icon: true,
// Custom icon image
imgIcon: getCurrentPath().split('/').slice(0, -1).join('/') +'/' + "../img/error_hitam_garis.png",
// Icon size
iconSize: "48px",
// OK button text
positive: "OK",
// Cancel button text
negative: "Cancel",
// Font awesome class without "fa-"
fa: "",
// Efek lebay *special effect
lebayify: 0
});3. Create an Android impressed toast message with AstNotif.toast() function.
// AstNotif.toast(message: string, options[optional]: object);
AstNotif.toast('Toast Message', {
// 'dark', 'success', 'danger', 'warning', 'primary', 'info', 'default'
theme: 'default',
// Time length, or whatever its called until the toast is gone.
length: 2000,
// Background and text color
bgcolor: THEMES.DEFAULT.color,
color: THEMES.DEFAULT.bgcolor,
// Reverse color
reverseColor: false,
// Transparency
alpha: 1,
// Border radius
borderRadius: 10,
// Bottom position, minus for top position
vdist: 10,
// Left position
hdist: 10,
// Margin
margin: 10,
// Position (cardinal point)
position: "s",
// Efek lebay *special effect
lebayify: 0
});4. Create an Android impressed snack bar with AstNotif.snackbar() function.
AstNotif.snackbar(message: string, options[optional]: object, action/callback: function);
AstNotif.snackbar('Snackbar Message', {
// 'dark', 'success', 'danger', 'warning', 'primary', 'info', 'default'
theme: 'default',
// Snack position, either top or bottom.
position: "bottom",
// Time length, or whatever its called until the snack is gone.
length: 2000,
// Background and text color
bgcolor: THEMES.DEFAULT.color,
color: THEMES.DEFAULT.bgcolor,
// Button color
btncolor: THEMES.DEFAULT.btncolor,
// Reverse color
reverseColor: false,
// Font awesome class without "fa-"
fa: "",
button: "",
// Efek lebay *special effect
lebayify: 0
});5. Create a Microsoft Windows model growl notification with AstNotif.notify() function.
AstNotif.notify(title: string, message: string, footer: string, options[optional]: object, callback: function);
AstNotif.notify('Notify Title', 'Notify Message', {
// Background and text color
bgcolor: THEMES.DEFAULT.color,
color: THEMES.DEFAULT.bgcolor,
// Using icon?
icon: true,
// Custom icon image
imgIcon: getCurrentPath().split('/').slice(0, -1).join('/') +'/' + "../img/error_putih_garis.png",
// Font awesome, please strip the "fa-" from the argument
fa: "",
// Length the notify object, -1 for stay forever
length: 2000,
// Transparency
alpha: 0.8,
// Efek lebay *special effect
lebayify: 0,
// Position
position: "right"
});Options
| Option | Description |
|---|---|
color | Dialog text color. Argument: Hex color string or rgb, e.g: “#02BAF2” |
bgheadcolor | Background header color. Argument: Hex color string or rgb, e.g: “#02BAF2” |
bgbodycolor | Background body color. Argument: Hex color string or rgb, e.g: “#02BAF2” |
bgfootcolor | Background footer color. Argument: Hex color string or rgb, e.g: “#02BAF2” |
icon | Will dialog show icon? Argument: Booelan, true/false. |
imgIcon | If dialog icon using image. Argument: String path e.g: “../your/path/image.png” |
iconSize | The size of the icon. Argument: Integer. Read as pixel. |
positive | Dialog button OK. Argument: String, default: “OK” |
negative | Dialog button cancel. Argument: String, default: “cancel” |
fa | Supports font awesome icon. Argument: Font awesome string, without “fa-“. So “fa-money” is just “money”. |
dismissible | Enables user to close the dialog by clicking the backdrop. Argument: Boolean, default: true |
Feature-rich Web Notification Library, AST-Notif Plugin/Github, notification themes
See Demo And Download
Official Website(anandastoon): Click Here
This superior jQuery/javascript plugin is developed by anandastoon. For extra Advanced Usage, please go to the official website.
