Platform: Link Component Technical Design FRD

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

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:

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.