Improve this doc View source

pfAggregateStatusCard
directive in module patternfly.card

Deprecated API {boolean=} alt-layout Display the aggregate status card in a 'alternate tall' layout. false (default) displays normal layout, true displays tall layout

Description

Component for easily displaying status information

Usage

as element:
<pf-aggregate-status-card
       status="{object}"
       [show-top-border="{boolean}"]
       [show-spinner="{boolean}"]
       [spinner-text="{string}"]
       [spinner-card-height="{string}"]
       [layout="{string}"]>
</pf-aggregate-status-card>

Parameters

ParamTypeDetails
statusobject

Status configuration information

  • .title - the main title of the aggregate status card
  • .count - the number count of the main statuses
  • .href - the href to navigate to if one clicks on the title or count
  • .iconClass - an icon to display to the left of the count
  • .iconImage - an image to display to the left of the count
  • .notifications - an array of status icons & counts
    • .iconClass - an icon to display to the right of the notification count
    • .iconImage - an image to display to the left of the notification count
    • .count - the number count of the notification status
    • .href - href to navigate to if one clicks on the notification status icon or count
When layout='mini', only one notification can be specified:
  • ...
  • .notification - an object of containing a single notification icon & count
    • .iconClass - an icon to display to the right of the notification count
    • .iconImage - an image to display to the left of the notification count
    • .count - the number count of the notification status
    • .href - href to navigate to if one clicks on the notification status icon or count
show-top-border
(optional)
boolean

Show/hide the top border, true shows top border, false (default) hides top border

showSpinner
(optional)
boolean

Show/Hide the spinner for loading state. True shows the spinner, false (default) hides the spinner

spinnerText
(optional)
string

Text for the card spinner

spinnerCardHeight
(optional)
string

Height to set for the card when data is loading and spinner is shown

layout
(optional)
string

Various alternative layouts the aggregate status card may have:

  • 'mini' displays a mini aggregate status card. Note: when using 'mini' layout, only one notification can be specified in the status object
  • 'tall' displays a tall aggregate status card. This equals the depreciated 'alt-layout' param.

Example

Source













Demo