“Notification” Component

Design: zeplin.

Notifications are used to display transitory messages in response to user action. For instance, it’s used to inform users that an action they just performed was successful. As opposed to a modal dialog, a notification typically doesn’t contain actions.

There are 2 types of notifications in IxDF UI-kit: inline and floating notifications:

Inline notifications are used in rare cases when a message has to be displayed at the site of the action. It’s used when the error message is not applicable to the entire page. For instance, when a course answer cannot be submitted, an inline error notification can be displayed at the question.

Floating notifications are used generally for page-wide messages, e.g. when a contact form has been successfully submitted. They float on top of the page rather than at the site of the action.

Floating Notifications

Usage

import {Notification} from 'modules/notification.js';

// Notification without title
Notification.error('You can only take 2 courses at the same time as a student member');

// Notification with title
Notification.error({
    message: 'You can only take 2 courses at the same time as a student member',
    title: 'Unable to enroll into course.',
});

Notification Options

• Notification.success()
• Notification.warning()
• Notification.info()
• Notification.error()

Parameters

• message (required)
  string|object{title:string, message:string}

  Message to display.

• container
  HTMLElement

  Container element for alert box.

  Default Value: document.body

• onNotificationDisplayedCb
  function

  Callback calls after prepending alertMessage to the container.

Inline Notifications

Usage

flash()->success($message);
flash()->warning($message);
flash()->info($message);
flash()->error($message);