Platform: Standard List Item Component V1.0 Technical Design - SAP/fundamental-ngx GitHub Wiki

Standard 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.

Platform vs. Core Implementation

There is no Core technical spec available currently.

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}}"
                        [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)}}"
			(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

[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.

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.

i18n

Link to general support for i18n: Supporting internationalization in ngx/platform

Special Usecase: No

  • fdp-standard-list-item can be supported as:
<fdp-standard-list-item *ngFor="let item of listItems"
                        [id]="{{item.id}}"
			i18n-title="@@title"
			title="{{item.name}}"
                        [icon]="{{item.icon}}"
                        [iconClickable]="{{item.(true|false)}}"
                        [adaptTitleSize]="{{item.(true|false)}}"
                        i18n-description="@@description"
			description="{{item. description}}"
			[wrapping]="{{item.(true|false)}}"
                        i18n-infoText="@@infoText"
			infoText="{{item.information}}"
                        [infoTextState]="{{item.informationState}}"
                        [infoTextStateInverted]="{{item.(true|false)}}"
			(click)="onitemPress">
</fdp-standard-list-item>

Redesign Required: No

Questions:

Kevin:

  • Remove titleDirection and introTextDirection, 'RTL' should be handled internally by the component, ideally by CSS rules or alternatively using the RtlService-> Done
⚠️ **GitHub.com Fallback** ⚠️