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 default text.Example
<oj-list-item-layout> <div> <oj-bind-text value="default"></oj-bind-text> </div> </oj-list-item-layout>
-
action
-
The
action
slot is used for adding either one primary action or one or more secondary actions.Example
<oj-list-item-layout> <div slot="action"> <oj-button>Edit</oj-button> </div> </oj-list-item-layout>
-
leading
-
The
leading
slot is used for adding a leading visual next to the selector. Leading slot content can be a badge, image, avatar or initials.Example
<oj-list-item-layout> <oj-avatar slot='leading' role="img" size="xs" initials='[[item.data.initials]]' src="[[item.data.image]]" :aria-label="[['Avatar of ' + item.data.name]]" :title="[['Avatar of ' + item.data.name]]"> </oj-avatar> </oj-list-item-layout>
-
metadata
-
The
metadata
slot is used for adding extra trailing information. Examples of metadata are author, date etc.Example
<oj-list-item-layout> <div slot="metadata"> <oj-bind-text value="metadata"></oj-bind-text> </div> </oj-list-item-layout>
-
navigation
-
The
navigation
slot is used for adding a navigation control, such as a link or button.Example
<oj-list-item-layout> <div slot="navigation"> <oj-button>navigation</oj-button> </div> </oj-list-item-layout>
-
overline
-
The
overline
slot is used for adding overline text above the default text.Example
<oj-list-item-layout> <div slot="overline"> <oj-bind-text value="overline"></oj-bind-text> </div> </oj-list-item-layout>
-
quaternary
-
The
quaternary
slot is used for adding quaternary text below the tertiary text.Example
<oj-list-item-layout> <div slot="quaternary"> <oj-bind-text value="quaternary"></oj-bind-text> </div> </oj-list-item-layout>
-
secondary
-
The
secondary
slot is used for adding secondary text below the default text.Example
<oj-list-item-layout> <div slot="secondary"> <oj-bind-text value="secondary"></oj-bind-text> </div> </oj-list-item-layout>
-
selector
-
The
selector
slot can accept an oj-selector component and is optional.Example
<oj-list-item-layout> <oj-selector slot='selector' selected-keys='{{selectorSelectedItems}}' key='[[item.data.id]]'> </oj-selector> </oj-list-item-layout>
-
tertiary
-
The
tertiary
slot is used for adding tertiary text below the secondary text.Example
<oj-list-item-layout> <div slot="tertiary"> <oj-bind-text value="tertiary"></oj-bind-text> </div> </oj-list-item-layout>
-
trailing
-
The
trailing
slot is used for adding a trailing visual. Trailing slot content can be a badge, image or icon.Example
<oj-list-item-layout> <oj-avatar slot='trailing' role="img" size="xs" initials='[[item.data.initials]]' src="[[item.data.image]]" :aria-label="[['Avatar of ' + item.data.name]]" :title="[['Avatar of ' + item.data.name]]"> </oj-avatar> </oj-list-item-layout>
Methods
-
getProperty(property) : {any}
-
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
- any
-
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
any The new value to set the property to. Returns:
- Type
- void