Notification

Displays a global notification message at a corner of the page.

Example

Click on the button below to show a notification. By default, it is dismissible with a close button, and will dismiss automatically after 5000ms (both are configurable).

<template>
  <section class="uiv">
    <Btn type="primary" @click="notify">Simplest Notification</Btn>
    <Btn type="primary" @click="notify2">No Auto-dismiss Notification</Btn>
  </section>
</template>

<script setup>
import { Notification, Btn } from 'uiv';

// example with callback
// pass a String as the notification content
function notify() {
  Notification.notify('This is a simple notify msg.', () => {
    // callback after dismissed
    console.log('dismissed');
  });
}

// example with Promise and options
function notify2() {
  Notification.notify({
    title: 'Title',
    content: 'This notification will not dismiss automatically.',
    duration: 0,
  }).then(() => {
    // resolve after dismissed
    console.log('dismissed');
  });
}
</script>

Types

There're 4 optional types of notification: info / success / warning / danger (also alias as error). Except type option, you can also use registered shortcut methods (see examples below).

Notification with specific type will has a default icon on the left, you can also change or remove the icon by icon option.

<template>
  <section class="uiv">
    <Btn type="info" @click="info">Info</Btn>
    <Btn type="success" @click="success">Success</Btn>
    <Btn type="warning" @click="warning">Warning</Btn>
    <Btn type="danger" @click="danger">Danger</Btn>
  </section>
</template>

<script setup>
import { Notification, Btn } from 'uiv';

function info() {
  Notification.notify({
    type: 'info',
    title: 'Heads up!',
    content: "This alert needs your attention, but it's not super important.",
  });
}

function success() {
  Notification.notify({
    type: 'success',
    title: 'Well done!',
    content: 'You successfully read this important alert message.',
  });
}

function warning() {
  // simple warning with content only
  Notification.notify.warning(
    "Better check yourself, you're not looking too good."
  );
}

function danger() {
  // error msg with title and content (other options available too)
  // `error` is an alias of `danger` (both of them works)
  Notification.notify.error({
    title: 'Oh snap!',
    content: 'Change a few things up and try submitting again.',
  });
}
</script>

Placements

Notifications can be placed on any corner on a page.

The position prop defines which corner a notification will slide in. It can be top-right (default), top-left, bottom-right or bottom-left.

<template>
  <section class="uiv">
    <Btn type="primary" @click="notify('top-right')">Top Right (Default)</Btn>
    <Btn type="primary" @click="notify('bottom-right')">Bottom Right</Btn>
    <Btn type="primary" @click="notify('bottom-left')">Bottom Left</Btn>
    <Btn type="primary" @click="notify('top-left')">Top Left</Btn>
  </section>
</template>

<script setup>
import { Notification, Btn } from 'uiv';

function notify(placement) {
  Notification.notify({
    placement, // equal to `placement: placement` in ES6
    title: 'Title',
    content: `This is a notify msg at ${placement}.`,
  });
}
</script>

Dismissible

By default a notification is dismissible with a close button, you can hide it by setting dismissible to false.

<template>
  <div class="uiv">
    <Btn type="primary" @click="notify"
      >Notification Without Dismiss Button</Btn
    >
  </div>
</template>

<script setup>
import { Notification, Btn } from 'uiv';

function notify() {
  Notification.notify({
    title: 'Title',
    content: 'This is a notification without dismiss btn.',
    dismissible: false,
  });
}
</script>

With modals

By default, notifications will be covered by modal backdrops, you can fix this by adding below CSS into your project:

body > .alert {
  z-index: 2000;
}

where 2000 can be any value that bigger than the modal z-index.

Global method

$notify(options, callback) global method for app.config.globalProperties will be added if uiv is installed.

Note that the dismissed callback is optional.

The method will return a Promise object that resolve while the notification is dismissed (if supported by browser or with es6 promise polyfill).

Import individually

If you prefer importing Notification individually:

import { Notification } from 'uiv'

or:

import Notification from 'uiv/dist/Notification'

The corresponding method is Notification.notify, with same parameters as above.

API Reference

Notification

These props are used as options in the methods above.

Props

NameTypeDefaultRequiredDescription
titleStringThe notification title.
contentStringThe notification content.
htmlBooleanfalseAllow HTML in content.
typeStringSupport: info / success / warning / danger.
durationNumber5000Dismiss after milliseconds, use 0 to prevent self-closing.
dismissibleBooleantrueShow dismiss button.
placementStringtop-rightSupport: top-right / top-left / bottom-right / bottom-left.
iconStringCustom icon class, use an empty string to disable icon.
customClassCustom classes to alert, anything that can work with v-bind:class or :class.
offsetNumber15The space in px between notifications.
offsetXNumber15The horizontal offset in px while displaying notification.
offsetYNumber15The vertical offset in px while displaying notification.

Methods

You can call a method by $notify or Notification, for example this.$notify.dismissAll().

NameParamsDescription
dismissAllDismiss all notifications.
info / success / warning / danger (error)String or ObjectDisplay a corresponding notification.