Platform: Link Component Technical Design FRD - SAP/fundamental-ngx GitHub Wiki

Link Component

Summary

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.

Design

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

Property Bindings

id: string

optional field to get id from user.

href: string

navigational url relative or external.

type: standard|emphasized

this value of type as emphasized will make the link bold text, if type is standard then link will be regular.

inverted:true|false

if value is true, link colour will be inverted else not.

target: _blank | _self | _parent | _top | framename

specify target where navigation window will open.

disabled: Boolean

link can be in enabled or disabled status.

title: string

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>

Event Bindings

click = new EventEmitter();

  • The "click" event binding emits an event whenever user clicks on link.

Two-Way Bindings

N/A

Content Projection

N/A

Interfaces and Types

Related Modules

  1. fd-link mixing in fundamental-styles

i18n

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


Additional Notes

Questions:

Deepak:

  1. 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.
⚠️ **GitHub.com Fallback** ⚠️