Element: <oj-c-tab-bar-mixed>

CORE PACK

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

Since:
  • 16.1.0
Module:
  • tab-bar-mixed

QuickNav

Attributes

Events

Methods

Type Definitions

Other Topics


JET TabBarMixed

The oj-c-tab-bar-mixed enables horizontal navigation between distinct content with a mixture of static and dynamic tabs.

Touch End User Information

Target Gesture Action
Tab Tap Selects the tab.
Remove button Tap Removes the tab.
Arrow button Tap When dynamic tabs are displayed inside a conveyor belt, tapping the arrow button will scroll the conveyor belt.

Keyboard End User Information

Target Key Action
Tab Enter or Space Select the current tab.
Tab LeftArrow or RightArrow Navigate to the previous or next tab.
Tab Delete Remove the current tab.
Tab Esc Hide the tooltip if tooltip is shown.
Dropdown UpArrow or DownArrow Navigate the dynamic tab represented as item in the list in the direction of the arrow.
Dropdown Enter or Space Select the highlighted choice from the dropdown and close the dropdown.
Dropdown Esc Close the dropdown.


Usage

Signature:

interface CTabBarMixedElement

Typescript Import Format
//To typecheck the element APIs, import as below.
import { CTabBarMixedElement } from "oj-c/tab-bar-mixed";

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

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.


Attributes

dynamic-tabs :Array.<oj-c.TabBarMixed.TabData>

Specifies the data definitions for the dynamics tabs (the collection of tabs that are removable).
Names
Item Name
Property dynamicTabs
Property change event dynamicTabsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-dynamic-tabs-changed

dynamic-tabs-overflow :"conveyor"|"popup"

Specifies whether the dynamic tabs are displayed inside a conveyor belt or a popup.
Supported Values:
Value Description
conveyor Dynamic tabs are displayed inside a conveyor belt.
popup Dynamic tabs are displayed inside a popup.
Names
Item Name
Property dynamicTabsOverflow
Property change event dynamicTabsOverflowChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-dynamic-tabs-overflow-changed

dynamic-tabs-overflow-icon :{ type?: 'class'; class: string; }|{ type: 'img'; src: string; }

Specifies the icon used on the overflow tab when dynamicTabsOverflow is set to 'popup'.
Names
Item Name
Property dynamicTabsOverflowIcon
Property change event dynamicTabsOverflowIconChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-dynamic-tabs-overflow-icon-changed

selection :K

The key of the currently selected tab.
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

separator-padding :string

The padding around the vertical divider that seperates collections of tabs.
Names
Item Name
Property separatorPadding
Property change event separatorPaddingChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-separator-padding-changed

size :"md"|"lg"

Specifies the size of the TabBarMixed.
Supported Values:
Value Description
lg TabBarMixed is set with a large height.
md TabBarMixed is set with a medium height.
Names
Item Name
Property size
Property change event sizeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-size-changed

static-tabs :Array.<oj-c.TabBarMixed.TabData>

Specifies the data definitions for the static tabs (the collection of tabs that are non-removable).
Names
Item Name
Property staticTabs
Property change event staticTabsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-static-tabs-changed

static-tabs-display :"standard"|"icons"

Whether to display both the label and icons ("standard") or just the icons ("icons"). In the latter case, the label is displayed in a tooltip instead.
Supported Values:
Value Description
icons Only icons are shown for all static tabs.
standard Label and icon are shown for all static tabs.
Names
Item Name
Property staticTabsDisplay
Property change event staticTabsDisplayChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-static-tabs-display-changed

Events

ojBeforeSelect

Triggered before user selects a tab which includes user gestures or selection is changed programmatically.
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type Description
accept function This method can be called with an application-created Promise to cancel this event asynchronously. The Promise should be resolved or rejected to accept or cancel the event, respectively.
key K

ojRemove

Triggered when user performs a remove gesture on a tab. The remove gestures include:
  • User clicks the remove icon in a tab
  • User presses Delete key on a tab
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type
key K

ojSelectionAction

Triggered when user performs a selection action gesture on a tab. The action gestures include:
  • User clicks anywhere in a tab
  • User taps anywhere in a tab
  • User pressed spacebar or enter key on a tab
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type
previousValue K
value K

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

Type Definitions

TabData<K extends string | number>

Properties:
Name Type Argument Description
badge number <optional>
icon { type?: 'class'; class: string; } | { type: 'img'; src: string; } <optional>
itemKey K
label string
tabPanelId string <optional>
 Accepts the tabpanel element's ID associated with the tab item