Element: <oj-c-list-item-layout>

CORE PACK

Oracle® JavaScript Extension Toolkit (JET)
17.1.0
G12196-01

Since:
  • 14.0.0
Module:
  • list-item-layout

Note: This component supersedes the following component: <oj-list-item-layout>. Migration info available at preceding link.

QuickNav

Slots

Attributes

Methods


JET List Item Layout

The oj-c-list-item-layout helps application teams to easily layout their content into different slots. 
//ListItemLayout with text
<oj-list-view id="listview1" aria-label="list layout within list view" data="[[dataProvider]]" style="width: 450px;"
                 selected="{{selectorSelectedItems}}" selection-mode="multiple">
   <template slot="itemTemplate" data-oj-as="item">
      <li>
         <oj-c-list-item-layout>
            <oj-selector slot='selector' selected-keys='{{selectorSelectedItems}}' key='[[item.data.id]]'>
            </oj-selector>
            <div>
               <oj-bind-text value="default"></oj-bind-text>
            </div>
         </oj-c-list-item-layout>
      </li>
   </template>
</oj-list-view>

Usage

Signature:

interface CListItemLayoutElement

Typescript Import Format
//To typecheck the element APIs, import as below.
import { CListItemLayoutElement } from "oj-c/list-item-layout";

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

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.

Default

The default slot accepts the primary data to be displayed.

action

Action slot often uses a toolbar. In general, the action slot should display either one primary action or one or more secondary actions.

leading

The leading slot is used for adding a leading visual next to the selector.

metadata

The metadata for adding extra trailing information. Examples of metadata are author, date etc.
The navigation slot is used for adding links below the trailing slot.

overline

The overline slot is for adding a overline text above the default slot.

quaternary

The quaternary slot is for adding a quaternary text below the tertiary text.

secondary

The secondary slot is for adding a secondary text below the default text.

selector

The selector slot can accept a oj-selector component and is optional.

tertiary

The tertiary slot is for adding a tertiary text below the secondary text.

trailing

The trailing slot is used for adding a trailing visual.

Attributes

inset :"none"|"listInset"

Controls padding around outside of list item layouts.
Names
Item Name
Property inset
Property change event insetChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-inset-changed

vertical-alignment :"top"|"middle"

Default is 'middle' which vertically aligns layout content to center of the row.
Names
Item Name
Property verticalAlignment
Property change event verticalAlignmentChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-vertical-alignment-changed

Methods

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