Platform: Link Component Technical Design FRD - SAP/fundamental-ngx GitHub Wiki
Link is a navigational component and is represented through a meaningful text having distinct visual properties. Navigation is to an application defined location – a page or a resource within the application or a webpage or a resource which is outside the application, etc. Link will have a distinct visual cue to represent navigational action.
<fdp-link
[id]="string"
[href]="string"
[type]="standard|emphasized"
[inverted]="true|false"
[target]="_blank | _self | _parent | _top | framename"
[disabled]="true|false"
[title]="string"
(click)="gotoUserDefinedFuncion($event)"
>
<ng-content></ng-content>
</fdp-link>
optional field to get id from user.
navigational url relative or external.
this value of type as emphasized will make the link bold text, if type is standard then link will be regular.
if value is true, link colour will be inverted else not.
specify target where navigation window will open.
link can be in enabled or disabled status.
A tooltip text will be displayed on long mouse-hover.
Template:
Setting value of isEmphasized to true in ngOninit() if value of type=emphasized.
<a
#link
fd-link
class="fdp-link-truncate__txt"
[attr.id]="id"
[attr.href]="href"
[target]="target"
[disabled]="disabled"
[emphasized]="emphasized"
[inverted]="inverted"
[title]="title ? title : ''"
[attr.aria-label]="title ? title : ''"
(click)="clicked($event)",
>
<ng-content></ng-content>
</a>
- The "click" event binding emits an event whenever user clicks on link.
N/A
N/A
- fd-link mixing in fundamental-styles
Link to general support for i18n: Supporting internationalization in ngx/platform
Special Usecase: No
-
fdp-link
can be supported normally with i18n marker:
<fdp-link
i18n="@@linkText"
[id]="string"
[href]="string"
[type]="standard|emphasized"
[inverted]="true|false"
[target]="_blank | _self | _parent | _top | framename"
[disabled]="true|false"
i18n-title="@@tooltipTitle"
title="string"
(click)="gotoUserDefinedFuncion($event)"
>
<ng-content></ng-content>
</fdp-link>
Redesign Required: No
Deepak:
- For displaying Pop-over text do we need Pop-over component implementation planned in Q1/Q2?
From Sushma:
In realtime, we use these to properties more for business interactions.
1). Can we have [target]="self|top|blank|parent|custome etc. 2). We need to have [id] as well.
Frank:
- Why do we need now popoever? What it is for?
- from what I read above is this something like a hint? cant we use native property called title?
- You should have also a click event, please look at the link from MetaUI,
Kevin:
- Is the "wrap" property part of the Fiori 3 specification? I did not see this feature mentioned.
Deepak:
@sushma:
- yes, link should have [target]. but it was not mentioned in FRD. will ask Manju to include it and then i will implement it.
- [id], i will include it as optional field.
@Frank:
- In FRD popover/tooltip is for Accessibility on hover(with time delay)
- As popover/tooltip not completed yet, will use Native element like title.
- i have put onclick event inside template, which will Emit the click event, user can also call user-defined
functions on click event, if they want to inside fdp-link tag.
@Kevin:
- In FRD, wrapping functionality for link is required if width increases more than user provided value.