Platform: Counter Component Technical Design - SAP/fundamental-ngx GitHub Wiki
The counter is used to identify the count of a set of objects. It usually used along side a button.
The requirements for this component most closely related to the "Badge on Button" specification here: https://wiki.wdf.sap.corp/wiki/pages/viewpage.action?pageId=2208784109
<fdp-counter count="99" label="Number of apples"></fdp-counter>
<fdp-counter count="99" label="Number of apples" isNotification="true"></fdp-counter>
Number to display.
Text used for aria-label.
Toggles whether to display counter in "notification" mode.
<span class="fd-counter"
[attr.aria-label]="label"
[ngClass]="{'fd-counter--notification': isNotification}">{{count | counterFormatter }}</span>
counterFormatter
is a pipe function which formats thes display of count. Depending on size of number, the display may need to be altered. For example a count of "12,000" may need to be shortend to "999+" or "12k".
Link to general support for i18n: Supporting internationalization in ngx/platform
Special Usecase: No
-
label
can be supported with string binding:
<fdp-counter count="99" i18n-label="@@label" label="Number of apples"></fdp-counter>
Redesign Required: No
#Notes: Manju: Fiori3, under notifications, has following components - badge, icon, iconandbadge,banner, group(expand/collapse). Event binding is required.