Notification Bar

Notification bar

A notification bar provides contextual feedback messages

<button class="mzp-c-button mzp-js-notification-trigger">
  Open Notification</button>

<ul class="notification-demo-list">
  <li>
    <aside class="mzp-c-notification-bar mzp-t-success">
      <button class="mzp-c-notification-bar-button" type="button"></button>
      <p>Great! You clicked the thing!</p>
    </aside>
  </li>

  <li>
    <aside class="mzp-c-notification-bar mzp-t-warning">
      <button class="mzp-c-notification-bar-button" type="button"></button>
      <p>Warning, you're about to do something bad!</p>
    </aside>
  </li>

  <li>
    <aside class="mzp-c-notification-bar mzp-t-error">
      <button class="mzp-c-notification-bar-button" type="button"></button>
      <p>Whoops. You deleted something.</p>
      <a href="#" class="mzp-c-notification-bar-cta">Undo this action?</a>
    </aside>
  </li>

  <li>
    <aside class="mzp-c-notification-bar mzp-t-click">
      <button class="mzp-c-notification-bar-button" type="button"></button>
      <p>Click this thing.</p>
    </aside>
  </li>

  <li>
    <aside class="mzp-c-notification-bar">
      <button class="mzp-c-notification-bar-button" type="button"></button>
      <p>Default.</p>
    </aside>
  </li>
</ul>

<script src="../../../assets/protocol/protocol/js/protocol-notification-bar.js"></script>

<script>
  (function() {
    'use strict';
    var dissmissButtons = document.querySelectorAll(
      '.mzp-c-notification-bar-button');
    for (var i = 0; i < dissmissButtons.length; i++) {
      dissmissButtons[i].addEventListener('click',
        function(e) {
          e.currentTarget.parentNode.remove();
        }, false);
    }
    var notificationButton = document.querySelector(
      '.mzp-js-notification-trigger');
    notificationButton.addEventListener('click', function(
      e) {
      e.preventDefault();
      Mzp.Notification.init(e.target, {
        title: 'This is the title',
        className: 'mzp-t-warning',
        closeText: 'Close notification',
        hasDismiss: true,
        isSticky: true,
        onNotificationOpen: function() {
          console.log('Notification opened');
        },
        onNotificationClose: function() {
          console.log('Notification closed');
        }
      });
    }, false);
  })();
</script>

Notes

A JS example to invoke a notification is provided below.

The notification JS provides the following options

  • origin [DOM Element] element that triggered the notification
  • options [Object] object of params
    • title [String] message to display in the notification. (Required)
    • className [String] optional CSS class name to apply to the notification.
    • onNotificationOpen [Function] function to fire after notification has been opened.
    • onNotificationClose [Function] function to fire after notification has been closed.
    • hasDismiss [Boolean] include or not include dismiss button.
    • closeText [String] text to use for close button a11y.
    • isSticky [Boolean] determines if notification is absolutely positioned and sticky.

Inline JavaScript in this example is for demo purposes only. Use external files in production code.

Notification bars have a range of different colors.

  • mzp-t-success
  • mzp-t-warning
  • mzp-t-error
  • mzp-t-click