Usage
Signature:
interface NavigationListElement<K, D>
Generic Parameters
Parameter Description K Type of key of the dataprovider D Type of data from the dataprovider
Typescript Import Format
//To typecheck the element APIs, import as below.
import { NavigationListElement } from "ojs/ojnavigationlist";
//For the transpiled javascript to load the element's module, import as below
import "ojs/ojnavigationlist";
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.
Styling Classes
-
.oj-disabled
-
Any list item can be disabled by adding the oj-disabled class to that element
Deprecated:
Since Description 17.0.0
Deprecated in oj-navigation-list as it is a Redwood anti-pattern. Instead items should be hidden in cases where the user doesn't have permission Example
<oj-navigation-list> <ul> <li id="foo" class="oj-disabled"> <a href="#"> <span class="oj-navigationlist-item-icon demo-icon-font-24 demo-palette-icon-24"> </span> Foo </a> </li> </ul> </oj-navigation-list>
-
.oj-focus-highlight
-
Under normal circumstances this class is applied automatically. It is documented here for the rare cases that an app developer needs per-instance control.
The oj-focus-highlight class applies focus styling that may not be desirable when the focus results from pointer interaction (touch or mouse), but which is needed for accessibility when the focus occurs by a non-pointer mechanism, for example keyboard or initial page load.
The application-level behavior for this component is controlled in the theme by the$focusHighlightPolicy
SASS variable; however, note that this same variable controls the focus highlight policy of many components and patterns. The values for the variable are:
nonPointer:
oj-focus-highlight is applied only when focus is not the result of pointer interaction. Most themes default to this value.
all:
oj-focus-highlight is applied regardless of the focus mechanism.
none:
oj-focus-highlight is never applied. This behavior is not accessible, and is intended for use when the application wishes to use its own event listener to precisely control when the class is applied (see below). The application must ensure the accessibility of the result.
To change the behavior on a per-instance basis, the application can set the SASS variable as desired and then use event listeners to toggle this class as needed.
Example
<oj-navigation-list class="oj-focus-highlight"> <!-- Content --> </oj-navigation-list>
-
.oj-navigationlist-category-divider
-
Use this class to add a horizontal divider line between two categories of items.
Example
<oj-navigation-list> <ul> <li ...></li> <li class="oj-navigationlist-category-divider"></li> <li id="foo"> <a href="#"> <span class="oj-navigationlist-item-icon demo-icon-font-24 demo-palette-icon-24"> </span> Foo </a> </li> </ul> </oj-navigation-list>
-
.oj-navigationlist-item-dividers
-
Note: This styleclass is not supported in the following themes:
Redwood
Use this class to render a divider between list items.Example
<oj-navigation-list class="oj-navigationlist-item-dividers" > <ul> <li id="foo"> <a href="#"> <span class="oj-navigationlist-item-icon demo-icon-font-24 demo-palette-icon-24"> </span> Foo </a> </li> </ul> </oj-navigation-list>
-
.oj-navigationlist-item-end
-
Use this class to add an badge/metadata/icon to a list item.
Example
<oj-navigation-list> <ul> <li id="foo"> <a href="#"> <span class="oj-navigationlist-item-end"> <span class="oj-badge oj-badge-subtle">3 </span> </span> Foo </a> </li> </ul> </oj-navigation-list>
-
.oj-navigationlist-item-icon
-
Use this class to add an icon to a list item.
Example
<oj-navigation-list class="oj-navigationlist-stack-icon-label" > <ul> <li id="foo"> <a href="#"> <span class="oj-navigationlist-item-icon demo-icon-font-24 demo-palette-icon-24"> </span> Foo </a> </li> </ul> </oj-navigation-list>
-
.oj-navigationlist-item-label
-
Use this class to specify the element with the label. This will eliminate the need for NavigationList to automatically wrap any child element that is not an icon or a badge with this class. Note the content must have the correct order (icon element first, then the label element, then the badge element) as NavigationList in this case will not attempt to reorder the content.
Example
<oj-navigation-list class="oj-navigationlist-stack-icon-label" > <ul> <li id="foo"> <a href="#"> <span class="oj-navigationlist-item-icon demo-icon-font-24 demo-palette-icon-24"> </span> <span class="oj-navigationlist-item-label"> Foo </span> </a> </li> </ul> </oj-navigation-list>
-
.oj-navigationlist-item-text-wrap
-
Use this class to wrap item label text.
Example
<oj-navigation-list class="oj-navigationlist-item-text-wrap" > <ul> <li id="foo"> <a href="#"> <span class="oj-navigationlist-item-icon demo-icon-font-24 demo-palette-icon-24"> </span> Foo </a> </li> </ul> </oj-navigation-list>
-
.oj-navigationlist-item-title
-
When arbitrary content is placed inside an item's content area, its title text can be marked using this style class. This helps the component in identifying the Item's label.
Example
<li id="foo"> <div> <span class="oj-navigationlist-item-title">Play</span> <button>Button</button> </div> </li>
-
.oj-navigationlist-nofollow-link
-
Use this class to prevent automatic navigation to the url specified on an <a> tag's href attribute.
In this case, navigation can be handled programmatically by using selectionChanged event.
This is useful to execute some custom logic before browser triggers navigation.Example
<oj-navigation-list class="oj-navigationlist-nofollow-link" > <ul> <li id="foo"> <a href="#"> <span class="oj-navigationlist-item-icon demo-icon-font-24 demo-palette-icon-24"> </span> Foo </a> </li> </ul> </oj-navigation-list>
-
.oj-navigationlist-stack-icon-label
-
Use this class to display a Navigation List with icons and labels stacked.
Example
<oj-navigation-list class="oj-navigationlist-stack-icon-label" > <ul> <li id="foo"> <a href="#"> <span class="oj-navigationlist-item-icon demo-icon-font-24 demo-palette-icon-24"> </span> Foo </a> </li> </ul> </oj-navigation-list>
-
Category: Condense
-
Use this class to condense horizontal navigation list items depending on screen size.
Class template:
-
.oj-
[size]
-condenseNote: Square brackets signify required token substitutions whereas parentheses signify optional token substitutions.
-
Values for
[size]
Value (required) Name Description sm
Small Small screen size range md
Medium Medium screen size range lg
Large Large screen size range xl
X-Large Extra large screen size and up
Example
<oj-navigation-list class="oj-sm-condense" > <ul> <li id="foo"> <a href="#"> <span class="oj-navigationlist-item-icon demo-icon-font-24 demo-palette-icon-24"> </span> Foo </a> </li> </ul> </oj-navigation-list>
-
-
CSS Variables
-
Default
-
Hovered
-
Selected
-
Sliding navigation list
Name | Type | Description |
---|---|---|
--oj-navigation-list-font-size |
<length> | Navigation list font size |
--oj-navigation-list-font-weight |
<font_weight> | Navigation list font weight |
--oj-navigation-list-icon-margin |
<length> | Navigation list icon margin |
--oj-navigation-list-icon-to-text-padding |
<length> | Padding between icon and text |
--oj-navigation-list-icon-size |
<length> | Navigation list icon size |
--oj-navigation-list-item-min-height |
<length> | Navigation list item minimum height |
--oj-navigation-list-item-margin |
<length> | Navigation list item margin |
--oj-navigation-list-item-padding |
<length> | Navigation list item padding |
Name | Type | Description |
---|---|---|
--oj-navigation-list-item-label-color |
<color> | Default navigation list item label color |
Name | Type | Description |
---|---|---|
--oj-navigation-list-item-label-color-hover |
<color> | Navigation list item label color when hovered |
--oj-navigation-list-item-bg-color-hover |
<color> | Navigation list item background color when hovered |
Name | Type | Description |
---|---|---|
--oj-navigation-list-item-label-color-selected |
<color> | Navigation list item label color when selected |
--oj-navigation-list-item-bg-color-selected |
<color> | Navigation list item background color when selected |
--oj-navigation-list-item-border-color-selected |
<color> | Navigation list item border color when selected |
Name | Type | Description |
---|---|---|
--oj-navigation-list-sliding-heading-font-size |
<length> | Sliding navigation list heading font size |
--oj-navigation-list-sliding-heading-font-weight |
<font_weight> | Sliding navigation list heading font weight |
--oj-navigation-list-sliding-heading-line-height |
<number> | Sliding navigation list heading line height |
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.
-
contextMenu
-
The contextMenu slot is set on the
oj-menu
within this element. This is used to designate the JET Menu that this component should launch as a context menu on right-click, Shift-F10, Press & Hold, or component-specific gesture. If specified, the browser's native context menu will be replaced by the JET Menu specified in this slot.The application can register a listener for the Menu's ojBeforeOpen event. The listener can cancel the launch via event.preventDefault(), or it can customize the menu contents by editing the menu DOM directly, and then calling refresh() on the Menu.
To help determine whether it's appropriate to cancel the launch or customize the menu, the ojBeforeOpen listener can use component API's to determine which table cell, chart item, etc., is the target of the context menu. See the JSDoc of the individual components for details.
Keep in mind that any such logic must work whether the context menu was launched via right-click, Shift-F10, Press & Hold, or component-specific touch gesture.
- Deprecated:
-
Since Description 13.0.0
This web component no longer supports launching a context menu.
-
itemTemplate
-
The
itemTemplate
slot is used to specify the template for rendering each item in the list. The slot content must be a <template> element. The content of the template could either include the <li> element, in which case that will be used as the root of the item. Or it can be just the content which excludes the <li> 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. (See oj.ojNavigationList.ItemTemplateContext or the table below for a list of properties available on $current)
- alias - if as attribute was specified, the value will be used to provide an application-named alias for $current.
Properties of $current:
Name Type Description componentElement
Element The <oj-navigation-list> custom element data
Object The data for the current item being rendered depth
number The depth of the current item (available when hierarchical data is provided) being rendered. The depth of the first level children under the invisible root is 1. index
number The zero-based index of the current item key
any The key of the current item being rendered leaf
boolean True if the current item is a leaf node (available when hierarchical data is provided). parentkey
any The key of the parent item (available when hierarchical data is provided). The parent key is null for root nodes.
Attributes
-
as :string
-
An alias for the current item when referenced inside the item template. This can be especially useful if oj-bind-for-each element is used inside the item template since it has its own scope of data access.
- Deprecated:
-
Since Description 6.2.0
Set the alias directly on the template element using the data-oj-as attribute instead.
- Default Value:
''
Names
Item Name Property as
Property change event asChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-as-changed
-
current-item :K
-
Key of the current item. Current item is the list item which is having active focus. Note that if currentItem is set to an item that is currently not available (not fetched or inside a collapsed parent node), then the value is ignored.
When the current item is changed, the
event.detail
of thecurrentItemChanged
event will contain the following additional properties:
Name Type Description item
Element Current Item element - Default Value:
null
- Supports writeback:
true
Names
Item Name Property currentItem
Property change event currentItemChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-current-item-changed
-
data :(TableDataSource|oj.TreeDataSource|DataProvider|null) data :(DataProvider.<K, D>|null)
-
The data source for the NavigationList accepts either a TableDataSource or oj.TreeDataSource. See the data source section in the introduction for out of the box data source types. If the data attribute is not specified, the child elements are used as content. If there's no content specified, then an empty list is rendered.
- Default Value:
null
Names
Item Name Property data
Property change event dataChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-data-changed
-
display :"all"|"icons"
-
Whether to display both the label and icons (
"all"
) or just the icons ("icons"
). In the latter case, the label is displayed in a tooltip instead, unless a tooltip was already supplied at create time. Note:display="icons"
is valid only whendrillMode=none
and navigation list is a flat list. It is also mandatory to provide icons for each item as stated in icons section.- Default Value:
all
Supported Values:
Value Description all
Display both the label and icons. icons
Display only the icons. Names
Item Name Property display
Property change event displayChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-display-changed
-
drill-mode :"none"|"collapsible"|"sliding"
-
Defines style of navigation used to drill down hierarchical list items.
- none
- collapsible
- sliding
- Default Value:
none
Supported Values:
Value Description collapsible
Allows user to expand and collapse group items. If there are more than two levels in hierarchy, sliding
is preferred drill mode.none
All group items are expanded by default and user not allowed to collapse them. sliding
This is typically used for hierarchical lists. This allows user to view one level at a time. Names
Item Name Property drillMode
Property change event drillModeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-drill-mode-changed
-
edge :"top"|"bottom"|"start"
-
The position of the Navigation List. Valid Values: start.
- Deprecated:
-
Since Description 17.0.0
Horizontal layout in oj-navigation-list is deprecated. Use oj-tab-bar instead. Since start
is the only supported and default value, it need not be specified usingedge
attribute.
- Default Value:
start
Supported Values:
Value Description bottom
This renders list items horizontally. Generally used when navlist placed on bottom of content section. start
This renders list items vertically. Generally used when navlist placed on left/start of content section. top
This renders list items horizontally. Generally used when navlist placed on top of content section. Names
Item Name Property edge
Property change event edgeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-edge-changed
-
expanded :oj.KeySet<K>
-
Specifies the key set containing the keys of the items that should be expanded. Use the KeySetImpl class to specify items to expand. Use the AllKeySetImpl class to expand all items.
- Default Value:
new AllKeySetImpl();
- Supports writeback:
true
Names
Item Name Property expanded
Property change event expandedChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-expanded-changed
-
hierarchy-menu-threshold :number
-
Specifies the level at which user can see hiearchical menu button. This is only valid when
drillMode
set tosliding
. Default value is 0, shows hiearchical menu always. If value is -1, then it will never be shown.The default value for hierarchyMenuThreshold varies by theme.
- Deprecated:
-
Since Description 13.0.0
The hierarchyMenuThreshold property is deprecated as it is not supported in the Redwood theme.
- Default Value:
0
Names
Item Name Property hierarchyMenuThreshold
Property change event hierarchyMenuThresholdChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-hierarchy-menu-threshold-changed
-
item :Object
-
The item property contains a subset of properties for items.
Names
Item Name Property item
Property change event itemChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-item-changed
-
(nullable) item.renderer :(((context: ojNavigationList.ItemContext<K,D>) => void)|null)
-
The renderer function that renders the content of the item. See itemContext in the introduction to see the object passed into the renderer function. The function should return one of the following:
- An Object with the following property:
- insert: HTMLElement | string - A string or a DOM element of the content inside the item.
- undefined: If the developer chooses to manipulate the item element directly, the function should return undefined.
- Default Value:
null
Names
Item Name Property item.renderer
- An Object with the following property:
-
(nullable) item.selectable :(((context: ojNavigationList.ItemContext<K,D>) => boolean)|boolean)
-
Whether the item is selectable. See itemContext in the introduction to see the object passed into the selectable function.
- Default Value:
true
Names
Item Name Property item.selectable
-
overflow :"popup"|"hidden"
-
Specifies the overflow behaviour.
- Deprecated:
-
Since Description 17.0.0
Since horizontal layout in oj-navigation-list is deprecated this should not be used any more. Use oj-tab-bar instead.
- Default Value:
hidden
- Since:
- 17.0.0
Supported Values:
Value Description hidden
Overflow is clipped, and the rest of the content will be invisible. popup
Popup menu will be shown with overflowed items. Note that setting
overflow
topopup
can trigger browser reflow, so only set it when it is actually required.Names
Item Name Property overflow
Property change event overflowChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-overflow-changed
-
(nullable) root-label :string
-
Label for top level list items.
NOTE: This is needed only for sliding navigation list where this will be used as title for the top level list elements.
- Default Value:
Navigation List
Names
Item Name Property rootLabel
Property change event rootLabelChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-root-label-changed
-
selection :K
-
Item Key of currently selected list item. If the value is modified by an application, navigation list UI is modified to match the new value and the
event.detail
of theselectionChanged
event will contain the following additional properties:
Name Type Description item
Element Selected Item element - Default Value:
null
- Supports writeback:
true
Names
Item Name Property selection
Property change event selectionChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-selection-changed
-
translations :object|null
-
A collection of translated resources from the translation bundle, or
null
if this component has no resources. Resources may be accessed and overridden individually or collectively, as seen in the examples.If the component does not contain any translatable resource, the default value of this attribute will be
null
. If not, an object containing all resources relevant to the component.If this component has translations, their documentation immediately follows this doc entry.
Names
Item Name Property translations
Property change event translationsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-translations-changed
-
translations.accessible-expand-collapse-instruction-text :string
-
Provides instruction text for vertical NavigationList item expand or collapse
- Since:
- 16.0.0
Names
Item Name Property translations.accessibleExpandCollapseInstructionText
-
(nullable) translations.default-root-label :string
-
Provides properties to customize the title text used by Sliding Navigation List for root node.
See the translations attribute for usage examples.
- Default Value:
"Navigation List"
- Since:
- 1.1.0
Names
Item Name Property translations.defaultRootLabel
-
(nullable) translations.hier-menu-btn-label :string
-
Provides properties to customize the hover message text used by Sliding Navigation List as label for Hierarchical Menu button.
See the translations attribute for usage examples.
- Default Value:
"Hierarchical Menu button"
- Since:
- 1.1.0
Names
Item Name Property translations.hierMenuBtnLabel
-
(nullable) translations.msg-fetching-data :string
-
Provides properties to customize the message text used by Navigation List when waiting for data.
See the translations attribute for usage examples.
- Default Value:
"Fetching Data..."
- Since:
- 1.1.0
Names
Item Name Property translations.msgFetchingData
-
(nullable) translations.msg-no-data :string
-
Provides properties to customize the message text used by Navigation List when there are no items.
See the translations attribute for usage examples.
- Deprecated:
-
Since Description 17.0.0
This option has been deprecate. We will no long have the message when no data.
- Default Value:
""
Names
Item Name Property translations.msgNoData
-
(nullable) translations.overflow-item-label :string
-
Label for overflow menu button.
See the translations attribute for usage examples.
- Default Value:
"More"
- Since:
- 3.0.0
Names
Item Name Property translations.overflowItemLabel
-
(nullable) translations.previous-icon :string
-
Provides properties to customize the hover message text used by Sliding Navigation List for previous button.
See the translations attribute for usage examples.
- Default Value:
"Previous"
- Since:
- 1.1.0
Names
Item Name Property translations.previousIcon
-
(nullable) translations.selected-label :string
-
Provides text to read to screen reader when an item is selected.
See the translations attribute for usage examples.
- Default Value:
"selected"
- Since:
- 1.1.0
Names
Item Name Property translations.selectedLabel
Context Objects
Each context object contains, at minimum, a subId
property,
whose value is a string that identifies a particular DOM node in this element. It can have additional properties to further specify the desired node. See getContextByNode for more details.
Properties:
Name | Type | Description |
---|---|---|
subId |
string | Sub-id string to identify a particular dom node. |
Following are the valid subIds:
Events
-
ojAnimateEnd
-
Triggered when the default animation of a particular action has ended. Note this event will not be triggered if application cancelled the default animation on animateStart.
- Deprecated:
-
Since Description 12.1.0
This web component no longer supports this event.
Properties:
All of the event payloads listed below can be found under
event.detail
. See Events and Listeners for additional information. -
ojAnimateStart
-
Triggered when the default animation of a particular action is about to start. The default animation can be cancelled by calling event.preventDefault.
- Deprecated:
-
Since Description 12.1.0
This web component no longer supports this event.
Properties:
All of the event payloads listed below can be found under
event.detail
. See Events and Listeners for additional information.Name Type Description action
string the action that triggers the animation.
See animation section for a list of actions.element
Element the target of animation. endCallback
function():void if the event listener calls event.preventDefault to cancel the default animation, it must call the endCallback function when it finishes its own animation handling and when any custom animation ends. -
ojBeforeCollapse
-
Triggered before an item is collapse via the
expanded
property, thecollapse
method, or via the UI. To prevent the item being collapsed, invokeevent.preventDefault()
.Properties:
All of the event payloads listed below can be found under
event.detail
. See Events and Listeners for additional information. -
ojBeforeCurrentItem
-
Triggered before the current item is changed via the
currentItem
property or via the UI. To prevent the item being focused, invokeevent.preventDefault()
.Properties:
All of the event payloads listed below can be found under
event.detail
. See Events and Listeners for additional information. -
ojBeforeExpand
-
Triggered before an item is expand via the
expanded
property, theexpand
method, or via the UI. To prevent the item being expanded, invokeevent.preventDefault()
.Properties:
All of the event payloads listed below can be found under
event.detail
. See Events and Listeners for additional information. -
ojBeforeSelect
-
Triggered before this list item is selected. To prevent the item selection, invoke
event.preventDefault()
.Properties:
All of the event payloads listed below can be found under
event.detail
. See Events and Listeners for additional information. -
ojCollapse
-
Triggered after an item has been collapsed via the
expanded
property, thecollapse
method, or via the UI.Properties:
All of the event payloads listed below can be found under
event.detail
. See Events and Listeners for additional information. -
ojExpand
-
Triggered after an item has been expanded via the
expanded
property, theexpand
method, or via the UI.Properties:
All of the event payloads listed below can be found under
event.detail
. See Events and Listeners for additional information. -
ojSelectionAction
-
Triggered anytime when user performs an action gesture on a tab, no matter the tab is selected or not. The action gestures include:
- User clicks anywhere in a tab
- User taps anywhere in a tab
- User pressed enter key while a tab or its content has focus
Properties:
All of the event payloads listed below can be found under
event.detail
. See Events and Listeners for additional information.Name Type Description previousValue
K the value of previous selection, which can have the same as key if user selects the same tab/item. value
K the value of new selection.
Methods
-
getContextByNode(node) : {(oj.ojNavigationList.NodeContext.<K>|null)}
-
Returns an object with context for the given child DOM node. This will always contain the subid for the node, defined as the 'subId' property on the context object. Additional component specific information may also be included. For more details on returned objects, see context objects.
Parameters:
Name Type Argument Description node
Element <not nullable>
The child DOM node Returns:
The context for the DOM node, or
null
when none is found.- Type
- (oj.ojNavigationList.NodeContext.<K>|null)
-
getProperty(property) : {any}
-
Retrieves the value of a property or a subproperty. The return type will be the same as the type of the property as specified in this API document. If the method is invoked with an incorrect property/subproperty name, it returns undefined.
Parameters:
Name Type Description property
string The property name to get. Supports dot notation for subproperty access. - Since:
- 4.0.0
Returns:
- Type
- any
Example
let subpropValue = myComponent.getProperty('complexProperty.subProperty1.subProperty2');
-
refresh : {void}
-
Refreshes the visual state of the Navigation List. JET components require a
refresh()
after the DOM is programmatically changed underneath the component.This method does not accept any arguments.
Returns:
- Type
- void
-
setProperties(properties) : {void}
-
Performs a batch set of properties. The type of value for each property being set must match the type of the property as specified in this API document.
Parameters:
Name Type Description properties
Object An object containing the property and value pairs to set. - Since:
- 4.0.0
Returns:
- Type
- void
Example
myComponent.setProperties({"prop1": "value1", "prop2.subprop": "value2", "prop3": "value3"});
-
setProperty(property, value) : {void}
-
Sets a property or a subproperty (of a complex property) and notifies the component of the change, triggering a [property]Changed event. The value should be of the same type as the type of the attribute mentioned in this API document.
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. - Since:
- 4.0.0
Returns:
- Type
- void
Example
myComponent.setProperty('complexProperty.subProperty1.subProperty2', "someValue");
Type Definitions
-
ItemContext<K,D>
-
Properties:
Name Type Argument Description componentElement
Element oj-navigation-list element data
any The data object for the item. datasource
DataProvider.<K, D> <optional>
A reference to the data source object. (Not available for static content) depth
number <optional>
the depth of the item index
number The index of the item, where 0 is the index of the first item. key
any The Key of the item. leaf
boolean <optional>
whether the item is a leaf parentElement
Element The list item element. The renderer can use this to directly append content. parentKey
K <optional>
the key of the parent item -
ItemTemplateContext
-
Properties:
Name Type Description componentElement
Element The <oj-navigation-list> custom element data
Object The data for the current item being rendered depth
number The depth of the current item (available when hierarchical data is provided) being rendered. The depth of the first level children under the invisible root is 1. index
number The zero-based index of the current item key
any The key of the current item being rendered leaf
boolean True if the current item is a leaf node (available when hierarchical data is provided). parentkey
any The key of the parent item (available when hierarchical data is provided). The parent key is null for root nodes. -
NodeContext<K>
-
Properties:
Name Type Argument Description group
boolean whether the item is a group. index
number The index of the item, where 0 is the index of the first item. key
K The Key of the item. parent
Element <optional>
the parent group item. Only available if item has a parent. subId
string Sub-id string to identify a particular dom node.