Improve this doc View source

pfNotificationDrawer
directive in module patternfly.notification

Description

Component for rendering a notification drawer. This provides a common mechanism to handle how the notification drawer should look and behave without mandating the look of the notification group heading or notification body.
Configuration Requirements:

  • The notification groups must be passed to create each group in the drawer. Each notification group must include a collection of notifications to be shown for that group, the collection MUST be called 'notifications'.
  • Each notification should have an 'unread' field in order to style unread notifications and hide/show the Mark All Unread button if desired.
  • You must provide the source for the heading, sub-heading, and notification body to show the content you desire for each notification.
  • The pfNotificationDrawer has stylings pre-set from Patternfly (http://www.patternfly.org/) for use within the navbar-pf and navbar-pf-vertical containers. If neither is being used, the top and height should be set such that the drawer will take up the entire viewport vertically.
    For instance:

    .my-nav-container .drawer-pf {
      height: calc(~"100vh - 46px");
      top: 26px;
    }

    Note, this should be bottom aligned with the trigger, and leave a 20px at the bottom of the viewport.
Other Configuration Options:
  • Pass a customScope object containing any scope variables/functions you need to access from the included source, access these via handlers. in your included source.
  • Each notification group can add a 'noNotificationsText' field to override the text specifically for that group. If not supplied the overall text given will be used for the group if that is supplied. Otherwise, the default empty message is displayed.

Usage

as element:
<pf-notification-drawer
       drawer-hidden="{boolean}"
       allow-expand="{boolean}"
       drawer-expanded="{boolean}"
       drawer-title="{string}"
       notification-groups="{object}"
       notification-track-field="{string}"
       on-close="{function}"
       show-mark-all-read="{boolean}"
       on-mark-all-read="{function}"
       show-clear-all="{boolean}"
       on-clear-all="{function}"
       action-button-title="{string}"
       action-button-callback="{function}"
       title-include="{string}"
       heading-include="{string}"
       subheading-include="{string}"
       notification-body-include="{string}"
       notification-footer-include="{string}"
       no-notifications-text="{string}"
       custom-scope="{object}">
</pf-notification-drawer>

Parameters

ParamTypeDetails
drawerHiddenboolean

Flag if the drawer is currently hidden

allowExpandboolean

Flag if the drawer can be expanded. Optional, default: false

drawerExpandedboolean

Flag if the drawer is expanded (only valid if allowExpand is true). Optional, default: false

drawerTitlestring

Title to display for the drawer (leaving this blank will remove the provided expand capability)

notificationGroupsobject

Collection notification groups to add to the drawer. Alternatively, a single group object can be given if categorization is not used.

notificationTrackFieldstring

Optional field from the notifications to use to track by in the notifications listing ($index used otherwise).

onClosefunction

function() Callback for the close button. Close button is shown if this callback is supplied. Callback should set drawerHidden to true to close the drawer.

showMarkAllReadboolean

Flag if the mark all read button should be shown, optional, default is false

onMarkAllReadfunction

function(notificationGroup) Callback method for the mark all read button (Optional)

showClearAllboolean

Flag if the clear all button should be shown, optional, default is false

onClearAllfunction

function(notificationGroup) Callback method for the clear all button (Optional)

actionButtonTitlestring

Text for the lower action button of the drawer (optional, if not specified there will be no action button)

actionButtonCallbackfunction

function(notificationGroup) Callback method for action button for each group, the notificationGroup is passed (Optional)

titleIncludestring

Include src for the title area for the notification drawer, use this to customize the drawer title area

headingIncludestring

Include src for the heading area for each notification group, access the group via notificationGroup

subheadingIncludestring

Include src for the sub-heading area for each notification group, access the group via notificationGroup

notificationBodyIncludestring

Include src for the notification body for each notification, access the notification via notification

notificationFooterIncludestring

Include src for the notification footer for each notification, access the notification via notification

noNotificationsTextstring

Text to show when there are no notifications. Optional.

customScopeobject

Object containing any variables/functions used by the included src, access via $ctrl.customScope.

Example

Source
















































Demo