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"
    [wrap]="true|false"
    [disabled]="true|false"
    [toolTipText]="string"
    [width]="'widthValue'"
    (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.

`Wrap: Boolean`

Setting true will wrap the content to align text with other Form Element.

`disabled: Boolean`

link can be in enabled or disabled status.

`toolTipText: string`

A popup tooltip text will be displayed on long mouse-hover.

`width: string`

Width given for link text, ex:[width]="'250px'", It will be useful for truncation and wrapping of link text.

Template:

Setting value of isEmphasized to true in ngOninit() if value of type=emphasized.

<a
    #link
    class="fd-link"
    [attr.id]="id"
    [attr.href]="href"
    [target]="target"
    [attr.aria-disabled]="disabled"
    [ngClass]="{'fd-link--emphasized':isEmphasized,'fd-link--inverted':inverted,'fdp-link-truncate__txt': !wrap}"
    (click)="clicked($event)",
    [ngStyle]="{ width: width }"
    (focus)="onFocusEvent()"
    (focusout)="onFocusOutEvent()"
>
    <ng-content></ng-content>
</a>

focus and focusout, used for displaying tooltip.

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

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.