A notification message that floats in a corner of the page and displays global reminders.

Methods

Calling Notification or this.$notify returns the current Notification instance. To close the instance manually, call its close method.

Method	Description
close	Closes the current Notification

Basic Usage

A broadly applicable notification bar.

<template>
  <fx-button
    plain
    @click="open1">
    Auto close
  </fx-button>
  <fx-button
    plain
    @click="open2">
    Will not auto close
    </fx-button>
</template>

<script>
  export default {
    methods: {
      open1() {
        const h = this.$createElement;

        this.$notify({
          title: 'Title',
          message: h('i', { style: 'color: teal'}, 'This is notification textThis is notification textThis is notification textThis is notification textThis is notification textThis is notification textThis is notification textThis is notification text')
        });
      },

      open2() {
        this.$notify({
          title: 'Tip',
          message: 'This message will not close automatically',
          duration: 0
        });
      }
    }
  }
</script>

With Status Types

Includes an icon and is commonly used to display system messages such as success, warning, info, and error.

<template>
  <fx-button
    plain
    @click="open1">
    Success
  </fx-button>
  <fx-button
    plain
    @click="open2">
    Warning
  </fx-button>
  <fx-button
    plain
    @click="open3">
    Info
  </fx-button>
  <fx-button
    plain
    @click="open4">
    Error
  </fx-button>
</template>

<script>
  export default {
    methods: {
      open1() {
        this.$notify({
          title: 'Success',
          message: 'This is a success message',
          type: 'success'
        });
      },

      open2() {
        this.$notify({
          title: 'Warning',
          message: 'This is a warning message',
          type: 'warning'
        });
      },

      open3() {
        this.$notify.info({
          title: 'Info',
          message: 'This is an info message'
        });
      },

      open4() {
        this.$notify.error({
          title: 'Error',
          message: 'This is an error message'
        });
      }
    }
  }
</script>

Custom Popup Position

Allows Notification to pop up from any corner of the screen.

<template>
  <fx-button
    plain
    @click="open1">
    Top right
  </fx-button>
  <fx-button
    plain
    @click="open2">
    Bottom right
  </fx-button>
  <fx-button
    plain
    @click="open3">
    Bottom left
  </fx-button>
  <fx-button
    plain
    @click="open4">
    Top left
  </fx-button>
</template>

<script>
  export default {
    methods: {
      open1() {
        this.$notify({
          title: 'Custom Position',
          message: 'Info popped up from the top right'
        });
      },

      open2() {
        this.$notify({
          title: 'Custom Position',
          message: 'Info popped up from the bottom right',
          position: 'bottom-right'
        });
      },

      open3() {
        this.$notify({
          title: 'Custom Position',
          message: 'Info popped up from the bottom left',
          position: 'bottom-left'
        });
      },

      open4() {
        this.$notify({
          title: 'Custom Position',
          message: 'Info popped up from the top left',
          position: 'top-left'
        });
      }
    }
  }
</script>

With Offset

Offsets Notification by a certain distance.

<template>
  <fx-button
    plain
    @click="open">
    Offset message
  </fx-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$notify({
          title: 'Offset',
          message: 'This is an offset tip message',
          offset: 100
        });
      }
    }
  }
</script>

Use HTML Fragments

The message property supports HTML fragments

<template>
  <fx-button
    plain
    @click="open">
    Use HTML Fragments
  </fx-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$notify({
          title: 'HTML Fragment',
          dangerouslyUseHTMLString: true,
          message: '<strong>This is an <i>HTML</i> fragment</strong>'
        });
      }
    }
  }
</script>

Warning

Although the message property supports HTML fragments, dynamically rendering arbitrary HTML on a website is dangerous because it can easily lead to XSS attacks. Therefore, when dangerouslyUseHTMLString is enabled, make sure the content of message is trusted, and never assign user-submitted content to the message property.

Hide the Close Button

The close button can be hidden.

<template>
  <fx-button
    plain
    @click="open">
    Hide close button
  </fx-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$notify.success({
          title: 'Info',
          message: 'This is an info message without a close button',
          showClose: false
        });
      }
    }
  }
</script>

Global Method

FxUI adds the global method $notify to Vue.prototype, so Notification can be called from a Vue instance as shown on this page.

Options

Parameter	Description	Type	Optional Values	Default
title	Title	string	-	-
message	Description text	string/Vue.VNode	-	-
dangerouslyUseHTMLString	Whether to treat the message property as an HTML fragment	boolean	-	false
type	Theme style. Values outside Optional Values are ignored	string	success/warning/info/error	-
iconClass	Custom icon class name. If type is set, iconClass is overwritten	string	-	-
customClass	Custom class name	string	-	-
duration	Display duration in milliseconds. Set to 0 to disable auto close	number	-	4500
position	Custom popup position	string	top-right/top-left/bottom-right/bottom-left	top-right
showClose	Whether to show the close button	boolean	-	true
onClose	Callback when closed	function	-	-
onClick	Callback when Notification is clicked	function	-	-
offset	Offset distance. All Notification instances should use the same offset at the same time	number	-	0