If set, specifies the notification container. The value of appendContainer should be a string with the id of the container element preceeded by "#".

<template>
  <div>
    <jqxButton :width="200" @click="open()">Open Notification</jqxButton>
    <JqxNotification ref="myNotification" :appendContainer="'#container'"> 
      Sample Notification 
    </JqxNotification>
    <div id="container" style="width: 300px; height: 400px; margin-top: 15px; background-color: #F2F2F2;
      border: 1px dashed #AAAAAA; overflow: auto;"></div>
  </div> 
</template> 
 
<script> 
  import JqxNotification from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue'; 
 
  export default { 
    components: { 
      JqxNotification, 
      JqxButton 
    }, 
    methods: { 
      open: function () { 
        this.$refs.myNotification.open(); 
      } 
    } 
  } 
</script>

Sets or gets whether the notification will open automatically.

<template>
  <JqxNotification ref="myNotification"
    :autoOpen="true">
    Sample Notification
  </JqxNotification>
</template>

 
<script>
  import JqxNotification from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue';
 
  export default {
    components: {
      JqxNotification
    }
  }
</script>

Sets or gets the duration of the notification animation at open.

<template>
  <JqxNotification ref="myNotification"
    :autoOpen="true" :animationOpenDelay="600">
    Sample Notification
  </JqxNotification>
</template>

 
<script>
  import JqxNotification from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue';
 
  export default {
    components: {
      JqxNotification
    }
  }
</script>

Sets or gets the duration of the tooltip animation at close.

<template>
  <JqxNotification ref="myNotification"
    :autoOpen="true" :animationCloseDelay="1000">
    Sample Notification
  </JqxNotification>
</template>

 
<script>
  import JqxNotification from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue';
 
  export default {
    components: {
      JqxNotification
    }
  }
</script>

Sets or gets whether the notification will automatically close after duration equal to the autoCloseDelay property.

<template>
  <JqxNotification ref="myNotification"
    :autoOpen="true" :autoClose="false">
    Sample Notification
  </JqxNotification>
</template>

 
<script>
  import JqxNotification from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue';
 
  export default {
    components: {
      JqxNotification
    }
  }
</script>

Sets or gets the duration after which the notification automatically closes (works only if the autoClose property is set to true).

<template>
  <JqxNotification ref="myNotification"
    :autoOpen="true" :autoCloseDelay="5000">
    Sample Notification
  </JqxNotification>
</template>

 
<script>
  import JqxNotification from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue';
 
  export default {
    components: {
      JqxNotification
    }
  }
</script>

Sets or gets whether the notification blinks when opened.

<template>
  <JqxNotification ref="myNotification"
    :autoOpen="true" :blink="true">
    Sample Notification
  </JqxNotification>
</template>

 
<script>
  import JqxNotification from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue';
 
  export default {
    components: {
      JqxNotification
    }
  }
</script>

Sets ot gets the notifications' offset from the window bounds.

<template>
  <JqxNotification ref="myNotification"
    :autoOpen="true" :browserBoundsOffset="10">
    Sample Notification
  </JqxNotification>
</template>

 
<script>
  import JqxNotification from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue';
 
  export default {
    components: {
      JqxNotification
    }
  }
</script>

Sets or gets whether the notification will close if it is clicked.

<template>
  <JqxNotification ref="myNotification"
    :autoOpen="true" :closeOnClick="false">
    Sample Notification
  </JqxNotification>
</template>

 
<script>
  import JqxNotification from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue';
 
  export default {
    components: {
      JqxNotification
    }
  }
</script>

Sets or gets whether the notification is disabled (it cannot be opened).

<template>
  <JqxNotification ref="myNotification"
    :autoOpen="true" :disabled="true">
    Sample Notification
  </JqxNotification>
</template>

 
<script>
  import JqxNotification from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue';
 
  export default {
    components: {
      JqxNotification
    }
  }
</script>

Sets ot gets the notification's height.

<template>
  <JqxNotification ref="myNotification"
    :autoOpen="true" :height="200">
    Sample Notification
  </JqxNotification>
</template>

 
<script>
  import JqxNotification from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue';
 
  export default {
    components: {
      JqxNotification
    }
  }
</script>

Sets or gets the notification's opacity when it is hovered with the mouse.

<template>
  <JqxNotification ref="myNotification"
    :autoOpen="true" :hoverOpacity="0.3">
    Sample Notification
  </JqxNotification>
</template>

 
<script>
  import JqxNotification from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue';
 
  export default {
    components: {
      JqxNotification
    }
  }
</script>

Sets or gets an object which specifies a custom notification icon. The icon property is disregarded if template is set.

object fields:

width

height

url

padding - specifies the distance from the icon to the content.

<template>
  <JqxNotification ref="myNotification"
    :autoOpen="true" :template="null" :icon="icon">
    Sample Notification
  </JqxNotification>
</template> 
 
<script>
  import JqxNotification from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue';
 
  export default {
    components: {
      JqxNotification
    },
    data: function () {
      return {
        icon: {
          width: 25,
          height: 25,
          url: '../../images/smiley.png',
          padding: 5
        }
      }
    }
  }
</script>

Sets or gets the offset between notifications.

<template> 
  <div> 
    <JqxNotification ref="myNotification" :autoOpen="true" :notificationOffset="10">Sample Notification</JqxNotification> 
    <JqxNotification ref="myNotification" :autoOpen="true" :notificationOffset="10">Sample Notification</JqxNotification>
  </div> 
</template> 
 
<script>
  import JqxNotification from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue'; 
 
  export default {
    components: {
      JqxNotification
    }
  }
</script>

Sets or gets the notification's opacity.

<template>
  <JqxNotification ref="myNotification"
    :autoOpen="true" :opacity="1">
    Sample Notification
  </JqxNotification>
</template>

 
<script>
  import JqxNotification from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue';
 
  export default {
    components: {
      JqxNotification
    }
  }
</script>

Sets the part of the browser window where the notifications will be positioned. The position property is disregarded if appendContainer is set.

Possible Values:

'top-left'

'top-right'

'bottom-left'

'bottom-right'

<template>
  <JqxNotification ref="myNotification"
    :autoOpen="true" :position="'top-left'">
    Sample Notification
  </JqxNotification>
</template>

 
<script>
  import JqxNotification from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue';
 
  export default {
    components: {
      JqxNotification
    }
  }
</script>

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

<template>
  <JqxNotification ref="myNotification"
    :autoOpen="true" :rtl="true">
    Sample Notification
  </JqxNotification>
</template>

 
<script>
  import JqxNotification from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue';
 
  export default {
    components: {
      JqxNotification
    }
  }
</script>

Sets or gets whether to show the notification's close button.

<template>
  <JqxNotification ref="myNotification"
    :autoOpen="true" :showCloseButton="false">
    Sample Notification
  </JqxNotification>
</template>

 
<script>
  import JqxNotification from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue';
 
  export default {
    components: {
      JqxNotification
    }
  }
</script>

Sets or gets the notification template.

Possible Values:

'info'

'warning'

'success'

'error'

'mail'

'time'

null

If template is set to null, the theme setting is applied to the notification. In that case, the notification icon can be set with the icon property.

<template>
  <JqxNotification ref="myNotification"
    :autoOpen="true" :template="'success'">
    Sample Notification
  </JqxNotification>
</template>

 
<script>
  import JqxNotification from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue';
 
  export default {
    components: {
      JqxNotification
    }
  }
</script>

Sets the widget's theme.

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'material' theme.

  
                                  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
   <link rel="stylesheet" href="../../jqwidgets/styles/jqx.material.css" type="text/css" /> 
                                  

• Set the widget's theme property to 'material' when you initialize it.

<template>
  <JqxNotification ref="myNotification"
    :autoOpen="true" :theme="'material'">
    Sample Notification
  </JqxNotification>
</template>

 
<script>
  import JqxNotification from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue';
 
  export default {
    components: {
      JqxNotification
    }
  }
</script>

Sets ot gets the notification's width.

<template>
  <JqxNotification ref="myNotification"
    :autoOpen="true" :width="200">
    Sample Notification
  </JqxNotification>
</template>

 
<script>
  import JqxNotification from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue';
 
  export default {
    components: {
      JqxNotification
    }
  }
</script>

This event is triggered when the notification is closed.

Code examples

Bind to the close event of jqxNotification.

<template>
  <JqxNotification ref="myNotification" @close="onClose($event)"
    :autoOpen="true">
    Sample Notification
  </JqxNotification>
</template>

 
<script>
  import JqxNotification from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue';
 
  export default {
    components: {
      JqxNotification
    },
    methods: {
      onClose: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the notification is clicked.

Code examples

Bind to the click event of jqxNotification.

<template>
  <JqxNotification ref="myNotification" @click="onClick($event)"
    :autoOpen="true">
    Sample Notification
  </JqxNotification>
</template>

 
<script>
  import JqxNotification from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue';
 
  export default {
    components: {
      JqxNotification
    },
    methods: {
      onClick: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the notification is opened.

Code examples

Bind to the open event of jqxNotification.

<template>
  <JqxNotification ref="myNotification" @open="onOpen($event)"
    :autoOpen="true">
    Sample Notification
  </JqxNotification>
</template>

 
<script>
  import JqxNotification from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue';
 
  export default {
    components: {
      JqxNotification
    },
    methods: {
      onOpen: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Closes all notification instances.

<template>
  <div>
    <JqxNotification ref="myNotification"
             :autoOpen="true">
      Sample Notification
    </JqxNotification>
    <JqxButton @click="open">Open</JqxButton>
    <JqxButton @click="closeLast">Close Last</JqxButton>
    <JqxButton @click="closeAll">Close All</JqxButton>
  </div>
</template>

<script>
  import JqxNotification from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';

  export default {
    components: {
      JqxNotification,
      JqxButton
    },
    methods: {
      open: function () {
        this.$refs.myNotification.open();
      },
      closeLast: function () {
        this.$refs.myNotification.closeLast();
      },
      closeAll: function () {
        this.$refs.myNotification.closeAll();
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 15px;
    margin-right: 20px;
  }
</style>

Closes the last notification instances.

<template>
  <div>
    <JqxNotification ref="myNotification"
             :autoOpen="true">
      Sample Notification
    </JqxNotification>
    <JqxButton @click="open">Open</JqxButton>
    <JqxButton @click="closeLast">Close Last</JqxButton>
    <JqxButton @click="closeAll">Close All</JqxButton>
  </div>
</template>

<script>
  import JqxNotification from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';

  export default {
    components: {
      JqxNotification,
      JqxButton
    },
    methods: {
      open: function () {
        this.$refs.myNotification.open();
      },
      closeLast: function () {
        this.$refs.myNotification.closeLast();
      },
      closeAll: function () {
        this.$refs.myNotification.closeAll();
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 15px;
    margin-right: 20px;
  }
</style>

Destroys the widget.

<template>
  <JqxNotification ref="myNotification"
    :autoOpen="true">
    Sample Notification
  </JqxNotification>
</template>

 
<script>
  import JqxNotification from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue';
 
  export default {
    components: {
      JqxNotification
    },
    mounted: function () {
      this.$refs.myNotification.destroy();
    }
  }
</script>

Opens the widget.

<template>
  <div>
    <JqxNotification ref="myNotification"
             :autoOpen="true">
      Sample Notification
    </JqxNotification>
    <JqxButton @click="open">Open</JqxButton>
    <JqxButton @click="closeLast">Close Last</JqxButton>
    <JqxButton @click="closeAll">Close All</JqxButton>
  </div>
</template>

<script>
  import JqxNotification from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';

  export default {
    components: {
      JqxNotification,
      JqxButton
    },
    methods: {
      open: function () {
        this.$refs.myNotification.open();
      },
      closeLast: function () {
        this.$refs.myNotification.closeLast();
      },
      closeAll: function () {
        this.$refs.myNotification.closeAll();
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 15px;
    margin-right: 20px;
  }
</style>

Refreshes the widget.

<template>
  <JqxNotification ref="myNotification"
    :autoOpen="true">
    Sample Notification
  </JqxNotification>
</template>

 
<script>
  import JqxNotification from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue';
 
  export default {
    components: {
      JqxNotification
    },
    mounted: function () {
      this.$refs.myNotification.refresh();
    }
  }
</script>

Renders the widget.

<template>
  <JqxNotification ref="myNotification"
    :autoOpen="true">
    Sample Notification
  </JqxNotification>
</template>

 
<script>
  import JqxNotification from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnotification.vue';
 
  export default {
    components: {
      JqxNotification
    },
    mounted: function () {
      this.$refs.myNotification.render();
    }
  }
</script>