-
Couldn't load subscription status.
- Fork 135
Platform: Display List Item Component V1.0 Technical Design
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.
<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>
id of the standard list item it is optional.
title of the of item
Position text of the item title in below positions.
- LTR (left-to-right): left-to-right text direction
- RTL (right-to-left): right-to-left text direction
- default: the item title inherits the text direction from its parent controller.
export type Direction = 'ltr'|'rtl'|'default';Icon that identifies the item
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).
The title and description can wrap, the semantic info text does not wrap or truncate.
A short description (left-aligned below the title)
Additional Information
Defines information status.
export type Status = 'error| information| none| success| warning';Attribute used to hold item number. displayed on screen unlike id.
Position text of the item title in below positions.
- LTR (left-to-right): left-to-right text direction
- RTL (right-to-left): right-to-left text direction
- default: the item title inherits the text direction from its parent controller.
export type Direction = 'ltr'|'rtl'|'default';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>
N/A
N/A
- List signature
- ObjectStatus
Are used along with this component.