Platform: Display List Item Component V1.0 Technical Design

Display List Item Component

Summary

The standard list item is used for less complex datasets (for example, when the user selects an item in a dialog). It consists of an optional image, a title, description, and a single info text, which can contain semantic information.

Design

<fdp-list
    [id]="list Id"
    [headerTitle]="header title"
    [footerText]="footer text"
     --------
    >
    <fdp-standard-list-item *ngFor="let item of listItems"
                        [id]="{{item.id}}"
			[title]="{{item.name}}"
                        [titleDirection]="{{item.(ltr|rtl|default)}}"
                        [icon]="{{item.icon}}"
                        [iconClickable]="{{item.(true|false)}}"
                        [adaptTitleSize]="{{item.(true|false)}}"
                        [description]=="{{item. description}}"
			[wrapping]="{{item.(true|false)}}"
                        [infoText]="{{item.information}}"
                        [infoTextState]="{{item.informationState}}"
                        [infoTextStateInverted]="{{item.(true|false)}}"
                        [infoTextDirection]="{{item.(ltr|rtl|default)}}"
			(click)="onitemPress">
		</fdp-standard-list-item>
</fdp-list>

Property Bindings

id: string

id of the standard list item it is optional.

title: string

title of the of item

[titleDirection]:Direction

Position text of the item title in below positions.

1. LTR (left-to-right): left-to-right text direction
2. RTL (right-to-left): right-to-left text direction
3. default: the item title inherits the text direction from its parent controller.

export type Direction = 'ltr'|'rtl'|'default';

[icon]="{{item.icon}}"

Icon that identifies the item

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

By default, the title font is larger if the description is empty. If you have list items with and without a description, this results in differently sized titles that are harder to read. In this case, switch off the title size adaptation (AdaptTitleSize).

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

The title and description can wrap, the semantic info text does not wrap or truncate.

[description]=="{{item. description}}"

A short description (left-aligned below the title)

[infoText]="{{item.information}}"

Additional Information

[infoTextState]:Status

Defines information status.

export type Status = 'error| information| none| success| warning';

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

Attribute used to hold item number. displayed on screen unlike id.

[infoTextDirection]:Direction

Position text of the item title in below positions.

1. LTR (left-to-right): left-to-right text direction
2. RTL (right-to-left): right-to-left text direction
3. default: the item title inherits the text direction from its parent controller.

export type Direction = 'ltr'|'rtl'|'default';

Event Bindings

(click)="onitemPress"

Fires when item is clicked.

Template:

<li fd-list-item id="listitem”………………….>
<fd-object-status [inverted]="true|false" [clickable]="true|false"......
 <ng-content></ng-content>
</li>

Two-Way Bindings

N/A

Content Projection

N/A

Interfaces and Types

Related Modules

1. Object Status
2. List signature

Additional Notes

1. List signature
2. ObjectStatus

Are used along with this component.

Questions: