Improve this doc View source

pfCardView
directive in module patternfly.views

Description

Component for rendering cards in a view

Usage

as element:
<pf-card-view
       config="{object}"
       page-config="{object}"
       empty-state-config="{object}"
       empty-state-action-buttons="{array}"
       items="{Array}">
</pf-card-view>

Parameters

ParamTypeDetails
configobject

configuration settings for the cards:

  • .showSelectBox - (boolean) Show item selection boxes for each item, default is true
  • .selectItems - (boolean) Allow card selection, default is false
  • .dlbClick - (boolean) Handle double clicking (item remains selected on a double click). Default is false.
  • .multiSelect - (boolean) Allow multiple card selections, selectItems must also be set, not applicable when dblClick is true. Default is false
  • .selectionMatchProp - (string) Property of the items to use for determining matching, default is 'uuid'
  • .selectedItems - (array) Current set of selected items
  • .checkDisabled - ( function(item) ) Function to call to determine if an item is disabled, default is none
  • .onCheckBoxChange - ( function(item) ) Called to notify when a checkbox selection changes, default is none
  • .onSelect - ( function(item, event) ) Called to notify of item selection, default is none
  • .onSelectionChange - ( function(items) ) Called to notify when item selections change, default is none
  • .onClick - ( function(item, event) ) Called to notify when an item is clicked, default is none
  • .onDblClick - ( function(item, event) ) Called to notify when an item is double clicked, default is none
  • .itemsAvailable - (boolean) If 'false', displays the Empty State component.
pageConfigobject

Optional pagination configuration object. Since all properties are optional it is ok to specify: 'pageConfig = {}' to indicate that you want to use pagination with the default parameters.

  • .pageNumber - (number) Optional Initial page number to display. Default is page 1.
  • .pageSize - (number) Optional Initial page size/display length to use. Ie. Number of "Items per Page". Default is 10 items per page
  • .pageSizeIncrements - (Array[Number]) Optional Page size increments for the 'per page' dropdown. If not specified, the default values are: [5, 10, 20, 40, 80, 100]
emptyStateConfigobject

Optional configuration settings for the empty state component. See the Empty State component

emptyStateActionButtonsarray

Optional buttons to display under the icon, title, and informational paragraph in the empty state component. See the Empty State component

itemsArray

the data to be shown in the cards

Example

Source













Demo