Improve this doc View source

pfToastNotification
directive in module patternfly.notification

Description

Toast notifications are used to notify users of a system occurence. Toast notifications should be transient and stay on the screen for 8 seconds, so that they do not block the information behind them for too long, but allows the user to read the message. The pfToastNotification directive allows status, header, message, primary action and menu actions for the notification. The notification can also allow the user to close the notification.

Note: Using the kebab menu (menu actions) with the close button is not currently supported. If both are specified the close button will not be shown. Add a close menu item if you want to have both capabilities.

Usage

as element:
<pf-toast-notification
       notification-type="{string}"
       header="{string}"
       message="{string}"
       show-close="{boolean}"
       html-content="{boolean}"
       close-callback="{function}"
       action-title="{string}"
       action-callback="{function}"
       menu-actions="{Array}"
       update-viewing="{function}"
       data="{object}">
</pf-toast-notification>

Directive info

  • This directive creates new scope.

Parameters

ParamTypeDetails
notificationTypestring

The type of the notification message. Allowed value is one of these: 'success','info','danger', 'warning'

headerstring

The header text of the notification. Accepts HTML content when allowed.

messagestring

The main text message of the notification. Accepts HTML content when allowed.

showCloseboolean

Flag to show the close button, default: true

htmlContentboolean

Flag to allow HTML content within the header and message options.

closeCallbackfunction

(function(data)) Function to invoke when close action is selected, optional

actionTitlestring

Text to show for the primary action, optional.

actionCallbackfunction

(function(data)) Function to invoke when primary action is selected, optional

menuActionsArray

Optional list of actions to place in the kebab menu:

  • .name - (String) The name of the action, displayed on the button
  • .actionFn - (function(action, data)) Function to invoke when the action selected
  • .isDisabled - (Boolean) set to true to disable the action
  • .isSeparator - (Boolean) set to true if this is a placehodler for a separator rather than an action
updateViewingfunction

(function(boolean, data)) Function to invoke when user is viewing/no-viewing (hovering on) the toast

dataobject

Any data needed by the callbacks (optional)

Example

Source





Demo