Author: Michal Szymanski
Step 1 - alerts
Alerts are feedback messages which are displayed after specific actions proceeded by the user.
With the right use of colors, they add some emotional weight to our notifications, ranging from a simple warning to a critical system failure or from a successful operation to a neutral information message.
Click on the buttons below to see examples.
Info message Warning message Success message Error messageThe simplest way to create an alert is to place an
onclick
method within a given element (for example, a button).
<a class="btn btn-info" onclick="toastr.info('Hi! I am info message.');">Info message</a>
Step 2 - alerts usage via jquery
We'll now use a more advanced method. We'll write a simple jquery function which refers to the ID of an accordion's cards. Then we'll set custom options for the alerts.
In the scripts section, below the scripts of the charts, open a new <script>
tags and place the
following code:
$(function () {
$('#folder-1').click(function () {
});
});
As you can see, we can write a jquery function that refers to the id="folder-1"
that is the heading
of the
first card of our accordion.
Now we'll call the alert function:
$(function () {
$('#folder-1').click(function () {
toastr.error("Folder 1 has been clicked!", "Folder 1", {
"positionClass": "md-toast-top-right",
});
});
});
Save the file and click on the first folder of the accordion. You will see a red alert notification in the top right corner of the window.
You can easily change the position of the alert by modifying the value of the positionClass
variable.
Available options are:
-
toast-top-right
-
toast-bottom-right
-
toast-top-left
-
toast-bottom-left
There are plenty of other options available for alerts. To learn more about them have a look at our alert creator.
Step 3 - final adjustments
To finish the work with the alerts we need to write another two functions for each accordion folder.
Add this code to the alert function:
$(function () {
$('#folder-1').click(function () {
toastr.error("Folder 1 has been clicked!", "Folder 1", {
"positionClass": "md-toast-top-right",
});
});
$('#folder-2').click(function () {
// make it not dissappear
toastr.info("Folder 2 has been clicked!", "Folder 2", );
});
$('#folder-3').click(function () {
// make it not dissappear
toastr.info("Folder 3 has been clicked!", "Folder 3", );
});
});
After saving the file and refreshing the browser you will notice that each click on any accordion folder triggers an alert.
Step 4 - changing the color of the breadcrumbs
One very small fix at the end - we'll set a white color to the breadcrumbs to make it more visible.
Add .white-text
to the .breadcrumb-dn
component.
<!-- Breadcrumb-->
<div class="breadcrumb-dn mr-auto white-text">
<p>Material Design for Bootstrap</p>
</div>
Your first admin dashboard is ready. Congratulations!
Previous lesson Live preview Next lesson
Spread the word: