Element: <oj-c-conveyor-belt>

CORE PACK

Oracle® JavaScript Extension Toolkit (JET)
17.0.0
F92240-01

Since:
  • 17.0.0
Module:
  • conveyor-belt

Note: This component supersedes the following component: <oj-conveyor-belt>. Migration info available at preceding link.

QuickNav

Slots

Attributes

Methods


Container element that manages overflow for its child elements and allows scrolling among them. 


<oj-c-conveyor-belt items="[[dataArray]]">
   <template slot='itemTemplate'>
       <oj-c-button label="[[$current.data]]">
    </template>
</oj-c-conveyor-belt>

Use ConveyorBelt when you want to:

  • handle overflow without showing a scrollbar
  • keep all items accessible via tabbing and readable by a screen reader


Usage

Signature:

interface CConveyorBeltElement

Typescript Import Format
//To typecheck the element APIs, import as below.
import { CConveyorBeltElement } from "oj-c/conveyor-belt";

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

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 is the content of the Conveyor Belt.

itemTemplate

The itemTemplate slot is used to specify the template for rendering each item in the Conveyor Belt. The slot content must be a <template> element.

When the template is executed for each item, it will have access to the binding context containing the following properties:

  • $current - an object that contains information for the current item.
Properties of $current:
Name Type Description
data D The data of the item. Note this is made available primarily to ease migration. Applications should get the data from the item property instead.
item Item.<K, D> Contains the data and metadata of the item.

Attributes

arrow-visibility :"auto"|"hidden"|"visible"

Indicates whether overflow content arrows are visible or hidden.

The default value of this property varies by theme. If the default value is 'auto', then the behavior varies by device.

Names
Item Name
Property arrowVisibility
Property change event arrowVisibilityChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-arrow-visibility-changed

items :(Array.<ConveyorBeltArrayDataItem.<K, D>>|DataProvider.<K, D>)

An array of data items or a data provider that returns the items for the ConveyorBelt.
Names
Item Name
Property items
Property change event itemsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-items-changed

orientation :"horizontal"|"vertical"

Specify the orientation of the conveyorBelt. "horizontal" Orient the conveyorBelt horizontally. "vertical" Orient the conveyorBelt vertically.
Default Value:
  • "horizontal"
Names
Item Name
Property orientation
Property change event orientationChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-orientation-changed

scroll-position :number

Gets or sets the number of pixels that an element's content is scrolled from its initial position.

The default value of this property is 0.

There is no difference between LTR/RTL value assignment. In both LTR and RTL values changes from 0 and max scroll position >=0 if we scroll to the end. If we scroll to the beginning then the values changes from max scroll position >=0 to min scroll position = 0 When the value exceeds max/min the value is constrained to the max/min scroll position accordingly.

Supports writeback:
  • true
Names
Item Name
Property scrollPosition
Property change event scrollPositionChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-scroll-position-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

scrollElementIntoView(element) : {void}

Scrolls element into view.
Parameters:
Name Type Description
element
Returns:
Type
void

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