-
Notifications
You must be signed in to change notification settings - Fork 126
Platform: Object List Item Component V1.0 Technical Design
The object list item is mainly used in the master list of apps, where it primarily offers a quick overview of an object within a list. The text sizes are limited (before the text truncates) and object list items usually allow the user to navigate to the details of an object. Therefore, the object list item should only contain essential information that is necessary for the user to identify which object to work on first. Long descriptive texts should be avoided.
<fdp-list
[id]="list Id"
[headerTitle]="header title"
[footerText]="footer text"
--------
>
<fdp-object-list-item *ngFor="let item of listItems"
[id]="{{item?.id}}"
[title]="{{item?.name}}"
[icon]="{{item?.icon}}"
[number]="{{item?.number}}"
[numberStatus]="{{item?.(error| information| none| success| warning)}}"
[numberUnit]="{{item?.unit}}"
[introductionText]=="{{item?.introduction}}"
[type]="{{item?.active}}"
(click)="onitemPress">
<fdp-object-attribute [textActive]="{{item?.(true|false)}}"....../>
<fd-object-status [objectStatus]=“{{item?.(critical..)}}” [message]=“{{item?.(critical..)}}”>{{item?.text}}</fd-object-status>
<fdp-object-marker [marker]="{{item?.Flagged}}" [visibleItem]=“{{item?.(icons)}}”..../>
<ng-content></ng-content>
</fdp-object-list-item>
</fdp-list>
id of the object list item it is optional.
title of the of item
#### `[number]="{{item.number}}:string"`
Attribute used to hold item number. displayed on screen unlike id.
#### ` [numberStatus]:Status`
Defines number and number unit value status.
```ts
export type Status = 'error| information| none| success| warning';
Defines units for the item number.
consists of introductory text for the item.
Icon that identifies the item
Fires when item is clicked.
Template:
<li fd-list-item id="listitem”………………….>
<ng-content></ng-content>
</li>
N/A
N/A
- List signature
- ObjectAttribute
- ObjectStatus
- Object Number
- ObjectMarker
- ObjectIdentifier
Are used along with this component.
Link to general support for i18n: Supporting internationalization in ngx/platform
Special Usecase: No
-
fdp-object-list-item
can be supported as:
<fdp-object-list-item *ngFor="let item of listItems"
[id]="{{item?.id}}"
i18n-title="@@title"
title="{{item?.name}}"
[icon]="{{item?.icon}}"
[number]="{{item?.number}}"
[numberStatus]="{{item?.(error| information| none| success| warning)}}"
i18n-numberUnit="@@numberUnit"
numberUnit="{{item?.unit}}"
i18n-introductionText="@@introductionText"
introductionText=="{{item?.introduction}}"
[type]="{{item?.active}}"
(click)="onitemPress">
<fdp-object-attribute [textActive]="{{item?.(true|false)}}"....../>
<fd-object-status [objectStatus]=“{{item?.(critical..)}}” [message]=“{{item?.(critical..)}}”>{{item?.text}}</fd-object-status>
<fdp-object-marker [marker]="{{item?.Flagged}}" [visibleItem]=“{{item?.(icons)}}”..../>
<ng-content></ng-content>
</fdp-object-list-item>
The content components will follow the i18n guidelines defined for them.
- The
number
attribute can be supported by using DecimalPipe which can automatically translate numbers depending on the locale.
Redesign Required: No
Kevin:
- Remove
titleDirection
,numberTextDirection
, andintroTextDirection
, 'RTL' should be handled internally by the component, ideally by CSS rules or alternatively using the RtlService-Done