nodes-ui
Version:
UI Components for Nodes Backends
167 lines (153 loc) • 6.8 kB
HTML
---
title: Toasts
---
<h1 class="docs--page-header">Toasts</h1>
<p class="docs--page-description">
Toasts are a special version of the <a href="#">alerts</a> in Nodes UI. Toasts are used to give
users short feedback messages.
</p>
<p class="docs--panel-warning">A div with the alert class is only considered a Toast when it is placed in the page-toasts container.</p>
<p class="docs--section-description">
Toasts comes with special rules:
</p>
<ul>
<li>
They are always dismissable by the user
</li>
<li>
They are only visible for a short period (default is <code>8000ms</code>)
</li>
<li>
They must not contain links or actions
</li>
</ul>
<p class="docs--section-description">
Give it a whirl:
<button class="btn btn-default" id="createDemoToast">Create a new alert!</button>
</p>
<p class="docs--section-description">
Toasts are specifically designed to be used only to give short feedback messages to the user.
Here are some good and bad examples:
</p>
<div class="row">
<div class="col-sm-12 col-md-6">
<p class="text-success">Good <i class="fa fa-check"></i></p>
<div class="alert alert-danger">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Heads up!</strong> The thing you tried to do was unsuccesfull.
</div>
<div class="alert alert-warning">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
As a side effect this happened.
</div>
</div>
<div class="col-sm-12 col-md-6">
<p class="text-danger">Bad <i class="fa fa-times"></i></p>
<div class="alert alert-danger">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<p><strong>Heads up!</strong> The following actions failed</p>
<ul>
<li>validation-message 1</li>
<li>validation-message 2</li>
<li>validation-message 3</li>
<li>validation-message 4</li>
<li>validation-message 5</li>
<li>validation-message 6</li>
<li>validation-message 7</li>
<li>validation-message 8</li>
<li>validation-message 9</li>
<li>validation-message 10</li>
<li>validation-message 11</li>
<li>validation-message 12</li>
<li>validation-message 13</li>
<li>validation-message 14</li>
<li>validation-message 15</li>
<li>validation-message 16</li>
<li>validation-message 17</li>
<li>validation-message 18</li>
<li>validation-message 19</li>
<li>validation-message 20</li>
<li>validation-message 21</li>
<li>validation-message 22</li>
<li>validation-message 23</li>
<li>validation-message 24</li>
<li>validation-message 25</li>
<li>validation-message 26</li>
<li>validation-message 27</li>
<li>validation-message 28</li>
<li>validation-message 29</li>
<li>validation-message 30</li>
</ul>
<p>Please unplug your computer, wait 30 days and try again.</p>
<p><small>This message was sponsored by Company©</small></p>
</div>
</div>
</div>
<div class="page-toasts">
<div class="alert alert-success alert-dismissible to-be-animated-in">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Well Done!</strong> You successfully did something.
</div>
<div class="alert alert-danger alert-dismissible to-be-animated-in">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Uh oh!</strong> You did something horribly wrong amigo :-/.
</div>
</div>
<p class="docs--section-description">
This component is still missing vital documentation. Please consult <a href="https://github.com/nodes-frontend/nodes-ui/blob/master/js/nodes.js#L402" target="_blank">nodes.js</a> to see the Javascript configuration and methods.
</p>
<p class="docs--section-description">
Configure the toasts with scss variables:
</p>
<table class="table table-bordered docs--section-guide">
<thead>
<tr>
<th>variable</th>
<th>default</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>$toast-max-width</code></td>
<td><code>400px</code></td>
<td>The maximum width of the toasts-container (and therefore the maximum width of the toasts)</td>
</tr>
<tr>
<td><code>$toast-affix-top</code></td>
<td><code>$core-topbar-height + 20px</code></td>
<td>The distance from the top of the screen, default is the height of the topbar + and additional 20px</td>
</tr>
<tr>
<td><code>$toast-affix-toright</code></td>
<td><code>40px</code></td>
<td>The distance from the right of the screen</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
console.log(Nodes);
var alertTemplate = ['<div class="alert alert-dismissible to-be-animated-in">',
'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>',
'<strong>Draw the users attention</strong> Tell them what happened',
'</div>'].join('');
var alertTypes = ['alert-success', 'alert-info', 'alert-warning', 'alert-danger'];
$('#createDemoToast').on('click', function(e) {
var el = $(alertTemplate);
var cls = alertTypes[Math.floor(Math.random() * alertTypes.length)];
el.addClass(cls);
$('.page-toasts').append(el);
Nodes.alerts.animateIn(el);
setTimeout(function() {
$( $('.alert:not(.to-be-animated-in)').get().reverse() ).each(function(i) {
if(i > 0) {
Nodes.alerts.animateOut($(this), 100*i, true);
} else {
Nodes.alerts.animateOut($(this), 0, true);
}
})
}, Nodes.alerts.autoCloseDelay);
});
});
</script>