Skip to content

Platform: Link Component Technical Design FRD

Jump to bottom
Deepak Kumar edited this page Jan 24, 2020 · 25 revisions

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
    [href]="string"
    [isEmphasized]="true|false"
    [isInverted]="true|false"
    [target]="_blank | _self | _parent | _top | framename"
    [wrap]="true|false"
    [disabled]="true|false"
    [popoverText]="string"
    (click)="gotoUserDefinedFuncion($event)" 
    >
    <ng-content></ng-content>
</fdp-link>

Property Bindings

href: string

navigational url relative or external.

isEmphasized: true|false

this value of isEmphasized will make the link text normal if false or bold text if true.

isInverted: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.

popoverText: string

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

Template:

<a
    class="fd-link"
    [attr.href]="href"
    [attr.target]="target"
    [attr.aria-disabled]="disabled"
    [ngClass]="{ 'fd-link--emphasized': isEmphasized, 'fd-link--inverted': isInverted }"
    (click)="clicked($event)"
>
    <ng-content></ng-content>
</a>

Event Bindings

N/A

Two-Way Bindings

N/A

Content Projection

N/A

Interfaces and Types

Related Modules

  1. fd-link mixing in fundamental-styles

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], link should not have id. if given and page have multiple links in a page, then a page will have multiple link element with same id.

@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, if they want to inside fdp-link tag. @Kevin: - In FRD, wrapping functionality for link is required if width increases more than user provides.

Clone this wiki locally