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>
<Btn type="primary" @click="notify">Simplest Notification</Btn>
<Btn type="primary" @click="notify2">No Auto-dismiss Notification</Btn>
</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>
<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>
</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>
<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>
</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>
<Btn type="primary" @click="notify">Notification Without Dismiss Button</Btn>
</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
Name | Type | Default | Required | Description |
---|---|---|---|---|
title | String | The notification title. | ||
content | String | The notification content. | ||
html | Boolean | false | Allow HTML in content. | |
type | String | Support: info / success / warning / danger . | ||
duration | Number | 5000 | Dismiss after milliseconds, use 0 to prevent self-closing. | |
dismissible | Boolean | true | Show dismiss button. | |
placement | String | top-right | Support: top-right / top-left / bottom-right / bottom-left . | |
icon | String | Custom icon class, use an empty string to disable icon. | ||
customClass | Custom classes to alert, anything that can work with v-bind:class or :class . | |||
offset | Number | 15 | The space in px between notifications. | |
offsetX | Number | 15 | The horizontal offset in px while displaying notification. | |
offsetY | Number | 15 | The vertical offset in px while displaying notification. |
Methods
You can call a method by $notify
or Notification
, for example this.$notify.dismissAll()
.
Name | Params | Description |
---|---|---|
dismissAll | Dismiss all notifications. | |
info / success / warning / danger (error ) | String or Object | Display a corresponding notification. |