Element: <oj-label-value>

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

Since:
  • 5.1.0
Module:
  • ojlabelvalue

QuickNav

Slots

Attributes

Methods


JET LabelValue

The oj-label-value element is used to group label(s) and value(s) elements into a single layout element that is most commonly a child of oj-form-layout. This component gives some flexibility to what shows up in the label portion and what shows up in the value portion of an oj-form-layout element sequence of laid out elements (most commonly which are label/value pairs). The 'label' and 'value' slots are used to add elements to either the 'label' or 'value' parts of a label/value form layout item.

For example: 


<oj-form-layout max-columns='2' label-edge='start' label-width="50%">
  <oj-label-value>
    <my-label slot="label" for="my1"></my-label>
    <my-input slot="value" id="my1"></my-input>
  </oj-label-value>
  <oj-label-value>
    <my-label slot="label" for="my2"></my-label>
  </oj-label-value>
  <oj-label-value>
    <my-input slot="value" id="my2"></my-input>
  </oj-label-value>
</oj-form-layout>

Any slot child elements not in either a 'label' or 'value' slot will be removed from the DOM. This includes the default slot.


Usage

Signature:

interface LabelValueElement

Typescript Import Format
//To typecheck the element APIs, import as below.
import { LabelValueElement } from "ojs/ojlabelvalue";

//For the transpiled javascript to load the element's module, import as below
import "ojs/ojlabelvalue";

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.


Slots

JET components that allow child content support slots. Please see the slots section of the JET component overview doc for more information on allowed slot content and slot types.

label

The label slot is used to specify the 'label' part of a label/value form layout item.

value

The value slot is used to specify the 'value' part of a label/value form layout item.

Attributes

colspan :number

Specifies how many columns this label/value pair will occupy in the parent oj-form-layout.

This attribute only has an effect if the parent oj-form-layout has direction="row".

If there are fewer columns left in the current row than the colspan value specified, then the remaining available columns will be used.

By default, the label portion will occupy the same location and width as the label portion of any other label-value pairs, and the value portion will extend over the remaining columns. The default location and width can be changed with the label-edge and label-width attributes on the oj-label-value, respectively.

If a percentage is specified for label-width, it is relative to all columns the element occupy. For example, if colspan is 2 and label-width is set to 50%, the label portion will occupy 1 column, and the value portion will occupy 1 column.

Default Value:
  • 1
Since:
  • 6.2.0
Names
Item Name
Property colspan
Property change event colspanChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-colspan-changed

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

Specifies how the label is aligned with its value component.

If the value is 'inherit', it will inherit label-edge from its closest custom element ancestor element. If the ancestor doesn't have a label-edge attribute, the default is "top".

Note: For 'inherit' to work correctly, the application must use data binding (i.e. calling ko.applyBindings on an ancestor node of the oj-label-value).

Supported Values:
Value Description
inherit Label will inherit label-edge from its closest custom element ancestor element.
inside Label is on top of its value component, with a smaller font-size applied to any oj-label child.
start Label is inline with the start of its value component
top Label is on top of its value component.
Default Value:
  • "inherit"
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-width :string

Specifies the label width.

This can be any legal CSS width or 'inherit', which will inherit label-width from its closest custom element ancestor element. If the value is "inherit" and ancestor doesn't have a label-width attribute, the default is "33%".

Default Value:
  • "inherit"
Names
Item Name
Property labelWidth
Property change event labelWidthChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-label-width-changed

Methods

getProperty(property) : {*}

Retrieves a value for a property or a single subproperty for complex properties.
Parameters:
Name Type Description
property string The property name to get. Supports dot notation for subproperty access.
Returns:
Type
*

refresh : {void}

Refreshes the visual state of the component.
Returns:
Type
void

setProperties(properties) : {void}

Performs a batch set of properties.
Parameters:
Name Type Description
properties Object 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 [property]Changed event.
Parameters:
Name Type Description
property string The property name to set. Supports dot notation for subproperty access.
value * The new value to set the property to.
Returns:
Type
void