Documentation for alerts components.
Files
app/styles/components/alerts/config.scssapp/styles/components/alerts/style.scssAlert
Alert messages provides information about some action, whether it is success, error etc. Message can be shown below header as fixed for whole page, or inlined inside content if necessary. Various examples are shown below.
<div class="alert">
<div class="alert__icon">...</div>
<div class="alert__content">...</div>
<div class="alert__action">...</div>
</div>
<script>
new window.myApp.Alert({
icon: 'check-circle',
text: '...'
});
</script>
Types
Eight types of alert are defined: info (defalut)/success/warning/error/light/success-light/warging-light/error-light. Coresponding icon with state should be included in alert.
<div class="alert">...</div>
<div class="alert alert--success">...</div>
<div class="alert alert--warning">...</div>
<div class="alert alert--error">...</div>
<script>
new window.myApp.Alert({
color: 'success',
icon: 'check-circle',
text: '...'
});
</script>
Timeout
If timeout attribute of alert is set, alert will be destoried after given timeout. 5000ms is a good default timeout.
<script>
new window.myApp.Alert({
text: '...',
timeout: 5000,
});
</script>
Loader
Wait on content, or response should be displayed as alert loader as shown on example below.
<div class="alert">
<div class="alert__loader">...</div>
</div>
<script>
new window.myApp.Alert({
loader: true,
text: 'Loading',
closeable: false,
});
</script>
Notification
Preview of notification window.
<div class="alert alert--success alert--notification">
<div class="alert__content">
<div class="bar mb-none">
<div class="bar__item bar__item--fill mt-none">
<h4 class="mb-none">Deadline Reminder</h4>
</div>
<div class="bar__item mt-none">
<div class="alert__action">
<button class="btn btn--clean btn--equal" data-alert-action="">
//icon
</button>
</div>
</div>
</div>
<div class="alert__text">Pressespiegel Erste Bank International is to be published in <strong>10 minutes</strong>.</div>
</div>
</div>
<script>
document.getElementById('alert-notification').addEventListener('click', function () {
new window.myApp.Alert({
type: 'notification',
color: 'success',
title: 'Deadline Reminder',
text: 'Pressespiegel Erste Bank International is to be published in <strong>10 minutes</strong>',
});
});
</script>