Variants in Vue Message component

11 Jun 20247 minutes to read

The Message has predefined appearance variants for different visual representations. The variants of the message can be changed based on the variant property.

The available variants are Text, Outlined and Filled. The default variant type for messages is Text.

Text - The severity is differentiated using a text color and a light background color.
Outlined - The severity is differentiated using a text color and a border without a background.
Filled - The severity is differentiated using a text color and a dark background color.

The following example demonstrates the default message with different variant types.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div class="msg-variant-section">
    <div class="content-section">
      <h4>Filled</h4>
      <ejs-message id="msg_default_filled" variant="Filled">Editing is restricted</ejs-message>
      <ejs-message id="msg_info_filled" severity="Info" variant="Filled">Please read the comments carefully</ejs-message>
      <ejs-message id="msg_success_filled" severity="Success" variant="Filled">Your message has been sent successfully</ejs-message>
      <ejs-message id="msg_warning_filled" severity="Warning" variant="Filled">There was a problem with your network connection</ejs-message>
      <ejs-message id="msg_error_filled" severity="Error" variant="Filled">A problem occurred while submitting your data</ejs-message>
    </div>
    <div class="content-section">
      <h4>Outlined</h4>
      <ejs-message id="msg_default_outlined" variant="Outlined">Editing is restricted</ejs-message>
      <ejs-message id="msg_info_outlined" severity="Info" variant="Outlined">Please read the comments carefully</ejs-message>
      <ejs-message id="msg_success_outlined" severity="Success" variant="Outlined">Your message has been sent successfully</ejs-message>
      <ejs-message id="msg_warning_outlined" severity="Warning" variant="Outlined">There was a problem with your network connection</ejs-message>
      <ejs-message id="msg_error_outlined" severity="Error" variant="Outlined">A problem occurred while submitting your data</ejs-message>
    </div>
    <div class="content-section">
      <h4>Text</h4>
      <ejs-message id="msg_default">Editing is restricted</ejs-message>
      <ejs-message id="msg_info" severity="Info">Please read the comments carefully</ejs-message>
      <ejs-message id="msg_success" severity="Success">Your message has been sent successfully</ejs-message>
      <ejs-message id="msg_warning" severity="Warning">There was a problem with your network connection</ejs-message>
      <ejs-message id="msg_error" severity="Error">A problem occurred while submitting your data</ejs-message>
    </div>
  </div>
</template>
<script setup>
import { MessageComponent as EjsMessage } from "@syncfusion/ej2-vue-notifications";
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-notifications/styles/message/material.css";

.msg-variant-section .content-section {
  margin: 0 auto;
  max-width: 520px;
  padding: 10px;
}

.msg-variant-section .e-message {
  margin: 10px 0;
}

.msg-variant-section {
  display: flex;
}
</style>
<template>
  <div class="msg-variant-section">
    <div class="content-section">
      <h4>Filled</h4>
      <ejs-message id="msg_default_filled" variant="Filled">Editing is restricted</ejs-message>
      <ejs-message id="msg_info_filled" severity="Info" variant="Filled">Please read the comments carefully</ejs-message>
      <ejs-message id="msg_success_filled" severity="Success" variant="Filled">Your message has been sent successfully</ejs-message>
      <ejs-message id="msg_warning_filled" severity="Warning" variant="Filled">There was a problem with your network connection</ejs-message>
      <ejs-message id="msg_error_filled" severity="Error" variant="Filled">A problem occurred while submitting your data</ejs-message>
    </div>
    <div class="content-section">
      <h4>Outlined</h4>
      <ejs-message id="msg_default_outlined" variant="Outlined">Editing is restricted</ejs-message>
      <ejs-message id="msg_info_outlined" severity="Info" variant="Outlined">Please read the comments carefully</ejs-message>
      <ejs-message id="msg_success_outlined" severity="Success" variant="Outlined">Your message has been sent successfully</ejs-message>
      <ejs-message id="msg_warning_outlined" severity="Warning" variant="Outlined">There was a problem with your network connection</ejs-message>
      <ejs-message id="msg_error_outlined" severity="Error" variant="Outlined">A problem occurred while submitting your data</ejs-message>
    </div>
    <div class="content-section">
      <h4>Text</h4>
      <ejs-message id="msg_default">Editing is restricted</ejs-message>
      <ejs-message id="msg_info" severity="Info">Please read the comments carefully</ejs-message>
      <ejs-message id="msg_success" severity="Success">Your message has been sent successfully</ejs-message>
      <ejs-message id="msg_warning" severity="Warning">There was a problem with your network connection</ejs-message>
      <ejs-message id="msg_error" severity="Error">A problem occurred while submitting your data</ejs-message>
    </div>
  </div>
</template>
<script>
import { MessageComponent} from "@syncfusion/ej2-vue-notifications";

export default {
  components: {
    'ejs-message': MessageComponent
  },
  data() {
    return {
    };
  }
};
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-notifications/styles/message/material.css";

.msg-variant-section .content-section {
  margin: 0 auto;
  max-width: 520px;
  padding: 10px;
}

.msg-variant-section .e-message {
  margin: 10px 0;
}

.msg-variant-section {
  display: flex;
}
</style>