JavaScript (ES5)
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Variants in JavaScript (ES5) Message control

08 May 2023 / 2 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.

Source
Preview
index.js
index.html
Copied to clipboard
var msgDefault = new ej.notifications.Message({});
  msgDefault.appendTo('#msg_default');

  var msgInfo = new ej.notifications.Message({
    severity: "Info"
  });
  msgInfo.appendTo('#msg_info');

  var msgSuccess = new ej.notifications.Message({
    severity: "Success"
  });
  msgSuccess.appendTo('#msg_success');

  var msgWarning = new ej.notifications.Message({
    severity: "Warning"
  });
  msgWarning.appendTo('#msg_warning');

  var msgError = new ej.notifications.Message({
    severity: "Error"
  });
  msgError.appendTo('#msg_error');

  var msgDefaultOutlined = new ej.notifications.Message({
    variant: "Outlined"
  });
  msgDefaultOutlined.appendTo('#msg_default_outlined');

  var msgInfoOutlined = new ej.notifications.Message({
    severity: "Info",
    variant: "Outlined"
  });
  msgInfoOutlined.appendTo('#msg_info_outlined');

  var msgSuccessOutlined = new ej.notifications.Message({
    severity: "Success",
    variant: "Outlined"
  });
  msgSuccessOutlined.appendTo('#msg_success_outlined');

  var msgWarningOutlined = new ej.notifications.Message({
    severity: "Warning",
    variant: "Outlined"
  });
  msgWarningOutlined.appendTo('#msg_warning_outlined');

  var msgErrorOutlined = new ej.notifications.Message({
    severity: "Error",
    variant: "Outlined"
  });
  msgErrorOutlined.appendTo('#msg_error_outlined');

  var msgDefaultFilled = new ej.notifications.Message({
    variant: "Filled"
  });
  msgDefaultFilled.appendTo('#msg_default_filled');

  var msgInfoFilled = new ej.notifications.Message({
    severity: "Info",
    variant: "Filled"
  });
  msgInfoFilled.appendTo('#msg_info_filled');

  var msgSuccessFilled = new ej.notifications.Message({
    severity: "Success",
    variant: "Filled"
  });
  msgSuccessFilled.appendTo('#msg_success_filled');

  var msgWarningFilled = new ej.notifications.Message({
    severity: "Warning",
    variant: "Filled"
  });
  msgWarningFilled.appendTo('#msg_warning_filled');

  var msgErrorFilled = new ej.notifications.Message({
    severity: "Error",
    variant: "Filled"
  });
  msgErrorFilled.appendTo('#msg_error_filled');
Copied to clipboard
<html><head>
            
    <title>Essential JS 2 Message control</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 Message control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div class="msg-variant-section">
            <div class="content-section">
                <h4>Filled</h4>
                <div id="msg_default_filled">Editing is restricted</div>
                <div id="msg_info_filled">Please read the comments carefully</div>
                <div id="msg_success_filled">Your message has been sent successfully</div>
                <div id="msg_warning_filled">There was a problem with your network connection</div>
                <div id="msg_error_filled">A problem occurred while submitting your data</div>
            </div>
            <div class="content-section">
                <h4>Outlined</h4>
                <div id="msg_default_outlined">Editing is restricted</div>
                <div id="msg_info_outlined">Please read the comments carefully</div>
                <div id="msg_success_outlined">Your message has been sent successfully</div>
                <div id="msg_warning_outlined">There was a problem with your network connection</div>
                <div id="msg_error_outlined">A problem occurred while submitting your data</div>
            </div>
            <div class="content-section">
                <h4>Text</h4>
                <div id="msg_default">Editing is restricted</div>
                <div id="msg_info">Please read the comments carefully</div>
                <div id="msg_success">Your message has been sent successfully</div>
                <div id="msg_warning">There was a problem with your network connection</div>
                <div id="msg_error">A problem occurred while submitting your data</div>
            </div>
        </div>
    </div>
    <style>
        /* Sample level styles */
        .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>



<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Previous
Next