Platform: Grid List Item Component V1.0 Technical Design

Grid List Item Component

Summary

The items are placed on a grid. To specify the design of items. Be aware that the item itself is responsible for its own responsiveness.

Use the grid list only, if your content profits from the format. This can apply to images, charts, but also to object cards or quick views. Another option is to mimick the format (but not the visual) of existing objects (e.g. business cards).

Design

<fdp-grid-list
    [id]="list Id"
    [headerTitle]="header title"
    [footerText]="footer text"
     --------
    >
    <fdp-grid-list-item *ngFor="let item of listItems"
                        [id]="{{item?.id}}"
			[disabled]="{{item?.(true|false)}}"
                        [counter]="{{item?.count}}"
                        [type]="{{item?.(active| detail| detailsAndactive| inactive| navigatio)}}"
			(click)="onitemPress">
                        <ng-content></ng-content>
		</fdp-grid-list-item>
</fdp-grid-list>

Property Bindings

id: string

id of the object list item it is optional.

[counter]="{{item?.count}}:string"

counter of the item

[type]:listType

Defines behavoiur of item.

export type listType = 'active| detail| detailsAndactive| inactive| navigation';

[disabled]="{{item?.(true|false)}}"

item is disabled or not.

Event Bindings

(click)="onitemPress"

Fires when item is clicked.

Template:

<li fd-list-item id="listitem”………………….>
 <ng-content></ng-content>
</li>

Two-Way Bindings

N/A

Content Projection

N/A

Interfaces and Types

Are used along with this component.

Questions:

Sushma: During development need to explore if we can create a style for Grid list item and reuse any of list items of List. Then separate component creation can be avoided.

Kevin:

• Remove titleDirection, numberTextDirection, and introTextDirection, 'RTL' should be handled internally by the component, ideally by CSS rules or alternatively using the RtlService-Done