Notification

Create toggleable notifications that fade out automatically.

Usage

The notification will not fade out but remain visible when you hover the message until you stop hovering. You can also close the notification by clicking it. To show notifications simply push them in your array messages data, as simple text or Object. The following code snippet gets you started.

<vk-notification :messages="[{...}]"></vk-notification>

Note By default identical messages displayed at the same time will be ignored. In the demo we are changing the message text but you can as well set a unique key to the message Object and display messages with the exact same text.

HTML message

You can set custom HTML inside your messages using the default scoped slot.

<vk-notification>
  <div slot-scope="{ message }">
    <vk-icon></vk-icon> {{ message }}
  </div>
</vk-notification>

Position

Add one of the following options to the position prop to adjust the notification's position to different corners.

<vk-notification position="top-right">...</vk-notification>

Style

A notification can be styled by adding a status to the message to indicate a primary, success, warning or danger status.

<vk-notification status="primary"></vk-notification>

Props

vk-notification

The message Object