Element: <oj-c-labelled-link>

CORE PACK

Oracle® JavaScript Extension Toolkit (JET)
16.1.0
F92237-01

Since:
  • 16.0.0
Module:
  • labelled-link

QuickNav

Attributes

Events

Methods

Other Topics


JET LabelledLink

Description: LabelledLink component can be used to render a readonly form control field that has a link for its content. 


<oj-c-labelled-link
  href="www.oracle.com"
  text="Website"
  label-hint="Labelled Link">
</oj-c-linked-link>

Touch End User Information

Target Gesture Action
Link Tap Sets focus to the link. Opens the link or invokes the ojAction event.

Keyboard End User Information

Target Key Action
Link Tab In Set focus to the link.
Link Enter Opens the link or invokes the ojAction event.

Accessibility

For accessibility, set the label-hint property. If there is no visible label, then to make this accessible to screen reader users, set the label-hint and label-edge='none' which renders a visually hidden and screen-reader accessible label.


Usage

Signature:

interface CLabelledLinkElement

Typescript Import Format
//To typecheck the element APIs, import as below.
import { CLabelledLinkElement } from "oj-c/labelled-link";

//For the transpiled javascript to load the element's module, import as below
import "oj-c/labelled-link";

For additional information visit:

Note: Application logic should not interact with the component's properties or invoke its methods until the BusyContext indicates that the component is ready for interaction.


Attributes

column-span :number

Specifies how many columns this component should span. This only takes effect when this component is a child of a form layout that has direction 'row'.
Names
Item Name
Property columnSpan
Property change event columnSpanChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-column-span-changed

container-readonly :boolean

Specifies whether an ancestor container, like oj-c-form-layout, is readonly. This affects whether a readonly component renders in full or mixed readonly mode.
Names
Item Name
Property containerReadonly
Property change event containerReadonlyChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-container-readonly-changed

href :string

Specifies the URL that the link points to. If the href is provided, clicking the link will trigger the default browser behavior and will open the link. The ojAction event will not be triggered. If the href property is not provided, then the default browser behavior will be prevented and the ojAction event will be triggered.
Names
Item Name
Property href
Property change event hrefChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-href-changed

label-edge :"inside"|"none"|"start"|"top"

Specifies how the label of the component is positioned when the label-hint attribute is set on the component.
Supported Values:
Value Description
inside The label will be placed inside the component and above the link (default, if unspecified).
none The component will not create a label, but instead set the aria-labelledby property on the anchor element.
start The label will be placed before the start of the component.
top The label will be placed on top of the component.
Names
Item Name
Property labelEdge
Property change event labelEdgeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-label-edge-changed

label-hint* :string

Represents a hint for rendering a label on the component. This is used in combination with the label-edge attribute to control how the label should be rendered.
Names
Item Name
Property labelHint
Property change event labelHintChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-label-hint*-changed

label-start-width :(number|string)

The width of the label when labelEdge is 'start'.

This attribute accepts values of type 0 | `--${string}` | `${number}%` | `${number}x` | `calc(${string})`

Names
Item Name
Property labelStartWidth
Property change event labelStartWidthChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-label-start-width-changed

label-wrapping :"truncate"|"wrap"

Should the labels wrap or truncate when there is not enough available space.
Supported Values:
Value Description
truncate Label will truncate if needed.
wrap Label will wrap if needed.
Names
Item Name
Property labelWrapping
Property change event labelWrappingChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-label-wrapping-changed

target :string

Sets the target attribute of the link.
Names
Item Name
Property target
Property change event targetChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-target-changed

text :string

Specifies the text that should appear in the field. If this property is not provided, then the URL provided using the href property will be used as the text in the field.
Names
Item Name
Property text
Property change event textChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-text-changed

text-align :"start"|"end"|"right"

Specifies how the text is aligned within the text field
Supported Values:
Value Description
end Aligns text right when reading direction is ltr and left when reading direction is rtl.
right Aligns text right regardless of reading direction, often used for numbers.
start Aligns text left when reading direction is ltr and right when reading direction is rtl (default, if unspecified).
Names
Item Name
Property textAlign
Property change event textAlignChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-text-align-changed

user-assistance-density :"reflow"|"efficient"|"compact"

The component does not support any assistive text. But, this property can be used to specify whether or not the component should reserve space to be consistent with the other form components in the Form Layout.
Supported Values:
Value Description
compact The field will not reserve any space.
efficient The field will reserve space to prevent reflow.
reflow The field will not reserve any space.
Names
Item Name
Property userAssistanceDensity
Property change event userAssistanceDensityChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-user-assistance-density-changed

Events

ojAction

Triggered when the link is clicked, whether by keyboard, mouse, or touch events. This event is triggered only when the href is not provided. If the href is provided, clicking the link will not trigger this event.

See Events and Listeners for additional information.

Methods

blur : {void}

Blurs the link.
Returns:
Type
void

focus : {void}

Sets focus on the link.
Returns:
Type
void

getProperty(property) : {any}

Retrieves the value of a property or a subproperty.
Parameters:
Name Type Description
property The property name to get. Supports dot notation for subproperty access.
Returns:
Type
any

setProperties(properties) : {void}

Performs a batch set of properties.
Parameters:
Name Type Description
properties An object containing the property and value pairs to set.
Returns:
Type
void

setProperty(property, value) : {void}

Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a corresponding event.
Parameters:
Name Type Description
property The property name to set. Supports dot notation for subproperty access.
value The new value to set the property to.
Returns:
Type
void