snitchbot | Dashboard & Remote Field Sensing

Toastr

Show different notification with Falcon's stylist notification components

Stylesheet

<link href="assets/lib/toastr/toastr.min.css" rel="stylesheet">

Javascript

<script src="assets/lib/toastr/toastr.min.js"></script>

Click to trigger

<button class="btn btn-sm btn-info m-1" data-notification='{"title":"Info:","message":"I am done!"}'>Info</button>
<button class="btn btn-sm btn-success m-1" data-notification='{"type":"success","message":"I am done successfully!","progressBar":true}'>Success</button>
<button class="btn btn-sm btn-warning m-1" data-notification='{"type":"warning","title":"Warning:","message":"Are you sure?"}'>Warning</button>
<button class="btn btn-sm btn-danger m-1" data-notification='{"type":"error","title":"Error:","message":"Something went worng!"}'>Error</button>

Position

<button class="btn btn-sm btn-info m-1" data-notification='{"positionClass":"toast-top-left","message":"Top left Notification!"}'>Top Left</button>
<button class="btn btn-sm btn-info m-1" data-notification='{"positionClass":"toast-top-right","message":"Top Right Notification!"}'>Top Right</button>
<button class="btn btn-sm btn-info m-1" data-notification='{"positionClass":"toast-bottom-right","message":"Bottom Right Notification!"}'>Bottom Right</button>
<button class="btn btn-sm btn-info m-1" data-notification='{"positionClass":"toast-bottom-left","message":"Bottom Left Notification!"}'>Bottom Left</button>