Notify
-Pro Component
The Notify is a beautiful, responsive, customisable, accessible replacement for Javascript’s popup boxes. This plugin helps to turn standard Notify alerts into "growl" like notifications.
Keep reading our Notify examples and learn how to use this plugin.
Usage
Initialization
You can trigger notifications both from template and javascript via $notify
or this.$notify
method.
<notifications></notifications>
Examples
<div>
<base-button @click="notifyTopLeft">Top left</base-button>
<base-button @click="notifyTopCenter">Top center</base-button>
<base-button @click="notifyTopRight">Top right</base-button>
<base-button @click="notifyBottomLeft">Bottom left</base-button>
<base-button @click="notifyBottomCenter">Bottom center</base-button>
<base-button @click="notifyBottomRight">Bottom right</base-button>
</div>
<script>
export default {
methods: {
notifyTopRight() {
this.$notify({verticalAlign: 'top', horizontalAlign: 'right', message: 'Top right'});
},
notifyTopLeft() {
this.$notify({verticalAlign: 'top', horizontalAlign: 'left', message: 'Top left'});
},
notifyTopCenter() {
this.$notify({verticalAlign: 'top', horizontalAlign: 'center', message: 'Top center'});
},
notifyBottomLeft() {
this.$notify({verticalAlign: 'bottom', horizontalAlign: 'left', message: 'Bottom left'});
},
notifyBottomCenter() {
this.$notify({verticalAlign: 'bottom', horizontalAlign: 'center', message: 'Bottom center'});
},
notifyBottomRight() {
this.$notify({verticalAlign: 'bottom', horizontalAlign: 'right', message: 'Bottom center'});
}
}
}
</script>
Colors
<base-button type="info" @click="$notify({type: 'info', message: 'Info Notification'})">Info</base-button>
<base-button type="success" @click="$notify({type: 'success', message: 'Success Notification'})">Success</base-button>
<base-button type="warning" @click="$notify({type: 'warning', message: 'Warning Notification'})">Warning</base-button>
<base-button type="danger" @click="$notify({type: 'danger', message: 'Danger Notification'})">Danger</base-button>
Notification props
PROP NAME | TYPE | DEFAULT | DESCRIPTION |
---|---|---|---|
message | String | N/A | |
title | String | N/A | Notification title |
icon | String | N/A | Notification icon |
verticalAlign | String | top | Vertical alignment of notification (top/bottom) |
horizontalAlign | String | right | Horizontal alignment of notification (left/center/right) |
type | String | info | Notification type of notification (default/info/primary/danger/warning/success) |
timeout | Number | 5000 | Notification timeout (closes after X milliseconds). Default is 5000 (5s) |
timestamp | Date | Thu Apr 16 2020 14:51:53 GMT+0300 (Ora de vară a Europei de Est) | Notification timestamp (used internally to handle notification removal correctly) |
component | Object / Function | N/A | Custom content component. Cane be a .vue component or render function |
showClose | Boolean | true | Whether to show close button |
closeOnClick | Boolean | true | Whether to close notification when clicking it’ body |
clickHandler | Function | N/A | Custom notification click handler |