Vue UI Components Documentation

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.

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.

'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.

'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>