Show different types of toast in Vue Toast component

16 Mar 20234 minutes to read

The Essential JS 2 toast has the following predefined styles that can be defined using the cssClass property for achieving different types of toast:

Class Description
e-toast-success Represents a positive toast
e-toast-info Represents an informative toast
e-toast-warning Represents a toast with caution
e-toast-danger Represents a negative toast
   <div id='app'>
       <ejs-button ref='showButtonRef' class="e-btn" id="showToast" v-on:click.native="showBtnClick">Show Types</ejs-button>
       <ejs-toast ref='elementRef' id='element' :position='position'></ejs-toast>

import Vue from "vue";
import { ToastPlugin, Toast } from "@syncfusion/ej2-vue-notifications";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
export default {
  name: 'app',
  data: function(){
        return {
            position: { X: 'Right', Y: 'Bottom' }
    mounted: function() {
    this.toastFlag = 0;
     this.toasts = [
                { title: 'Warning !', content: 'There was a problem with your network connection.', cssClass: 'e-toast-warning' },
                { title: 'Success !', content: 'Your message has been sent successfully.', cssClass: 'e-toast-success'},
                { title: 'Error !', content: 'A problem has been occurred while submitting your data.', cssClass: 'e-toast-danger' },
                { title: 'Information !', content: 'Please read the comments carefully.', cssClass: 'e-toast-info' }];
  methods: {
       showBtnClick: function(args){
           if (this.toastFlag === (this.toasts.length)) {
              this.toastFlag = 0;
@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-vue-notifications/styles/material.css';

<style lang="scss">
#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;