InfoCardList
InfoCardList provides convenient handling for lists of InfoCards, including an optional filter control for long lists.
Demo
Required Imports
import { InfoCardListModule } from 'nextsapien-component-lib';
Properties

Type | Name | Description | Data type | Required | Default | Demo
--- | --- | --- | --- | --- | --- | ---
Input | itemList | The list of ItemSummary to display info from | ItemSummary[] | true | n/a | n/a
Input | checkable | Determines whether a checkbox will be displayed on the InfoCard | boolean | false | false |
Input | defaultCheckedValue | Sets the state of the checkbox for the InfoCards | boolean | false | false |
Input | filterable | Determines if a filter bar will be available for long lists. If true, the length of the list is capped at maxCount items and a filter bar appears allowing the user to filter by the item's header. A message displays at the bottom of the list indicating that the list has been truncated. | boolean | false | true |
Input | maxCount | Determines the maximum number of records that will display in the list before a filter bar appears (if filterable is enabled). | number | false | 10 |
Input | scrollable | Determines if a scrollbar will be present within the InfoCardList. | boolean | false | false |
Input | itemType | Determines what placeholder text the user sees in the filter bar for long lists, e.g. "Search Contacts". If not provided, the filter bar placeholder simply displays "Search". | string | false | '' |
Input | selectable | Indicates that the child InfoCards can be selected by click. | boolean | false | false |
Output | checkedChange | Indicates that the search string has changed | {item: ItemSummary<any>, checked: boolean} | n/a | n/a | n/a
Output | selected | Indicates that an item was selected (for InfoLists with selectable set to true). The event contains the selected InfoCard's ItemSummary. | ItemSummary | n/a | n/a | n/a

Example usage
`{{ infoCardDemo }}`