-
Notifications
You must be signed in to change notification settings - Fork 133
Platform: Grid List Component V1.0 Technical Design
As with the list and the responsive table, the grid list displays a set of items. In contrast to both controls, the grid list displays the items not in rows, but in a grid.
The grid list is usually used as an alternative view for a list or table. It is ideal for displaying images, charts, object cards, and other content, which profit from more height (but less width).
<fdp-grid-list
[id]="list Id"
[headerTitle]="header title"
[footerText]="footer text"
[noDataText]="no data present"
[borderType]="all|none|inner"
[grouping]="true|false"
[selectionMode]="Delete|multiSelect|none|singleSelect|itemSelection|singleSelectMaster"
[background]="solid|translucent|transparent"
(delete)="handleDelete"
(selectionChange)="onSelectionChange"
>
<fdp-grid-list-item
*ngFor="let item of listItems"
[title]="{{item.Name}}"
[description]="{{item.description}}" />............./>
</fdp-grid-list>
id of the list component it is optional.
Header text that appears in the List header.
footer text that appears in the List footer.
When the list contains no items then this message will be displayed.
The property Show Separators (All, Inner, None) allows only the outer lines (Inner) or all the lines (None)
to be hidden when the list is used as a more structural element within a content area.
List items can be grouped. If it set to true <fdp-(list item type)-item> will have group header attribute value.
The list can have several modes. The respective property (Mode) allows the following selection methods:
* None
-
SingleSelectMaster (used to pick one item with no additional indicator, as in the master list for a master- -
detail scenario with the flexible column layout) -
SingleSelectLeft (used to pick one item using a radio button on the far left) -
MultiSelect (used to pick several items from the list using checkboxes on the far left). The Shift key can be used to select a range. -
Delete (used to delete items from the list using a delete indicator on the far right)
Sets the background style for the controller.
Depending on the theme, we can change the state of the background from Solid/ to Translucent/ to Transparent.
Fires when item is deleted by user interaction inside the List.
Fires when selection is changed by user interaction inside the List.
Template:
<div id=“header”……../>
<div id=“body”>
<ul fd-list id="list”………………….>
<ng-content></ng-content>
</ul>
</div>
<div id=“footer” …../>
N/A
N/A
To loop the list of items contained within this control.
Item types: