Vue Bootstrap alerts
Vue Alerts - Bootstrap 4 & Material Design
Vue Bootstrap alerts are feedback messages which are displayed after specific actions preceded by the user. Length of the text is not limited.
With the right use of colors, they add some emotional weight to our information, ranging from a simple warning to critical system failure or from an operation success to a neutral information.
Basic example MDB Pro component
<btn color="info" @click.native="info">info message</btn>
<btn color="warning" @click.native="warning">warning message</btn>
<btn color="success" @click.native="success">success message</btn>
<btn color="danger" @click.native="error">error message</btn>
import { Btn } from 'mdbvue';
export default {
components: {
Btn,
},
methods: {
info() {
this.$alert.info({message: 'Hi! I am info message.', position: 'top right', timeOut: 5000});
},
warning() {
this.$alert.warn({message: 'Hi! I am warning message.', position: 'top right', timeOut: 5000});
},
success() {
this.$alert.success({message: 'Hi! I am success message.', position:'top right', timeOut: 5000});
},
error() {
this.$alert.error({message: 'Hi! I am error message.', position: 'top right', timeOut: 5000});
}
}
};
Vue Alerts - API
In this section you will find information about how exactly to use Alerts.
Basic usage
Toastr-like Alert feature is rather special among the general components population, as it is rather a funtionality (a plugin, if you may), rather than the template markup.
It means that to display an alert you do not have to import it and position it yourself. Rather, it works as a plugin, meaning that all Vue instances have the ability to call an alert. Let's start off by adding this ability to their arsenal. To make alert available to the all (aka. to add it as a plugin), import it into your root Vue instance and make Vue .use()
AlertPlug. If you are using vue-cli
, the root Vue instance is accessible in the /src/main.js
file. Make sure it looks something like this:
import Vue from 'vue';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbvue/build/css/mdb.css';
import App from './App.vue'
import AlertPlug from 'mdbvue';
Vue.use(AlertPlug);
VoilĂ ! Now, alert is available everywhere!
Calling an alert
Generally, an alert pops up once we call one of the $alert
global property methods, namely
this.$alert.success(); // or
this.$alert.info(); // or
this.$alert.wargning(); // or
this.$alert.danger();
Customization
To give a notification some character, pass in a configuration object as the function parameter. Below are it's available properties:
Name | Type | Default | Description |
---|---|---|---|
title |
String | '' | Title, if any |
message |
String | '' | Text within the alert's "paragraph" |
closeButton |
Boolean | true | Should the close button ("x") be there? |
progressBar |
Boolean | false | Sets whether a progress bar should mark alert's timeout |
position |
String | top right | Available values: 'top right', 'bottom right', 'bottom left', 'top left', 'top center', 'bottom center', 'top full width', 'bottom full width' |
showMethod |
String | fadeIn | Animations class name for shown, default as fadeIn |
hideMethod |
String | fadeOut | Animations class name for hide, default as fadeOut |
showDuration |
Number | 1000 | Duration of show animation in ms |
hideDuration |
Number | 1000 | Duration of hide animation in ms |
delay |
Number | 0 (no dalay) | Helps to set up a delay on when the alert should appear in ms |
timeOut |
Number | 1500 | Sets duration of time the alert is out there in ms |
color |
String | successColor | Overwrite the type default color of an alert |
A full exemplification of an this.$alert
with a configuration object inside some component's method:
this.$alert.warn({
message: 'This is a programmatic warning from within some component',
position: 'top right',
timeOut: 5000,
closeButton: false,
progressBar: true,
delay: 2000
});
Closing alerts
Alerts disappear after a time-out, which covers most use cases. To dismiss an alert, an user may click the close button, which is provided by default. Lastly, application's logic can clear all the alerts programmatically, calling
this.$alert.removeAll()