All Components

Templates

The Notification allows you to define a template and display additional information.

The following example demonstrates how to use templates to customize the appearance of the Notification. To define an array of templates based on the type of the notification, use the :templates property.

<div id="vueapp" class="vue-app">
  <kendo-notification ref="notification"
                      :templates="templates">
  </kendo-notification>
  <button id="showNotification" class="k-button" @click="showNotification">E-mail</button>
</div>
<script id="emailTemplate" type="text/x-kendo-template">
    <div class="new-mail">
        <img src="https://demos.telerik.com/kendo-ui/content/web/notification/envelope.png" />
        <h3>#= title #</h3>
        <p>#= message #</p>
    </div>
</script>
<style>
  .new-mail {
      width: 300px;
      height: 100px;
  }
  .new-mail h3 {
      font-size: 1em;
      padding: 32px 10px 5px;
  }
  .new-mail img {
      float: left;
      margin: 30px 15px 30px 30px;
  }
</style>
Vue.use(PopupsInstaller);
new Vue({
    el: "#vueapp",
    data: {
      templates: [{
          type: "info",
          template: kendo.jQuery('#emailTemplate').html()
      }]
    },
    methods: {
      showNotification () {
        this.notification.show({
            title: "New E-mail",
            message: "You have 1 new mail message!"
        });
      }
    },
    mounted: function () {
        this.notification = this.$refs.notification.kendoWidget();
    }
})

In this article