WtNotificationsBar

Specification

Notification bar listens to eventBus 'notification' event and represents sent notifications using wt-notification component. 'notification' events should have the following format:

{
  "type": "success",
  "message": "Notification message",
  "timeout": 4000 //not required, default 4000ms
}

If 'timeout' is not specified notifications-bar message will be discarded after 4s.

Important

Notifications bar won't work without eventBus, registered in plugin (check "Quick start" page).

Example Notifications bar

Code

<script setup>
import { provide } from 'vue';
import { eventBus } from '@webitel/ui-sdk/scripts';

provide('$eventBus', eventBus);

function sendNotification(type) {
  eventBus.$emit('notification', { type, text: 'Text4' });
}
</script>

<template>
  <wt-button @click="sendNotification('error')">
    Send error notification
  </wt-button>
  <wt-button
    style="margin-left: 10px"
    @click="sendNotification('info')"
  >
    Send info notification
  </wt-button>

  <div style="margin-top: 10px">
    <wt-notifications-bar />
  </div>
</template>