Element: <oj-c-tab-bar>

CORE PACK

Oracle® JavaScript Extension Toolkit (JET)
18.0.0
G12199-01

Since:
  • 17.0.0
Module:
  • tab-bar

QuickNav

Attributes

Events

Methods

Type Definitions

Other Topics


JET TabBar

The oj-c-tab-bar enables horizontal navigation.

Touch End User Information

Target Gesture Action
Tab Tap Selects the tab.
Remove button Tap Removes the tab.
Arrow button Tap When 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 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.
Reorder Command/Ctrl + Shift + LeftArrow (RightArrow in RTL) Moves the tab before the previous tab.
Reorder Command/Ctrl + Shift + RightArrow (LeftArrow in RTL) Moves the tab after the next tab.


Usage

Signature:

interface CTabBarElement

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

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

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

data :(Array.<(oj-c.TabBar.TabData.<(string|number)>|oj-c.TabBar.TabLinkItemData.<(string|number)>)>|DataProvider.<K, (oj-c.TabBar.TabData.<K>|oj-c.TabBar.TabLinkItemData.<K>)>)

Specifies the data definitions for the tabs.
Default Value:
  • []
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 :"standard"|"icons"|"stacked"

Whether to display both the label and icons ("standard") or just the icons ("icons") or to render stacked display ("stacked"). In the latter case, the label is displayed in a tooltip instead.
Supported Values:
Value Description
icons Only icons are shown for all tabs.
stacked Stacks the badge over the icon and icon over the label when applicable.
standard Label and icon are shown for all tabs.
Default Value:
  • "standard"
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

edge :"top"|"bottom"

The position of the TabBar.
Default Value:
  • "top"
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

layout :"stretch"|"condense"

Whether to stretch the tab bar items to occupy available space or to condense items
Supported Values:
Value Description
condense Condenses the space occupied by tab bar items
stretch Stretches the tab bar items to occupy available space
Default Value:
  • "stretch"
Names
Item Name
Property layout
Property change event layoutChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-layout-changed

overflow :"hidden"|"popup"|"conveyor"

Specifies the overflow behavior
Default Value:
  • "hidden"
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

reorderable :"enabled"|"disabled"

Specifies if the tabs can be reordered within the tab bar. Note: Do not use with overflow="popup" as reorder is not supported with popup.
Supported Values:
Value Description
disabled Disables reordering of items in tabbar.
enabled Enables reordering of items in tabbar.
Default Value:
  • "disabled"
Names
Item Name
Property reorderable
Property change event reorderableChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-reorderable-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

truncation :"none"|"progressive"

Truncation applies to the tab labels when there is not enough room to display all tabs.
Default Value:
  • "none"
Names
Item Name
Property truncation
Property change event truncationChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-truncation-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

ojReorder

Triggered when user performs a reorder gesture on a tab. The reorder gestures include:
  • User drags a tab and drops it in a new drop location
  • User presses Command + Shift + Arrow key(s) on a tab
Note: Do not use with overflow="popup" as reorder is not supported with popup.
Properties:

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

Name Type Description
reorderedKeys Array<K> The new order of keys after reorder

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>

The data item object that represents a tab.
Properties:
Name Type Argument Description
badge number <optional>
 The content to be rendered inside the Badge component.
icon { type?: 'class'; class: string; } | { type: 'img'; src: string; } <optional>
 The icon before the label in non-stack case, icon above the label in stacked case or the stand alone icon when no label is specified.
isRemovable boolean <optional>
 Renders a remove icon allowing the tabs to be removed.
itemKey K Key of the TabBarItem
label string Label of the TabBarItem. For icon only display this label is the content for aria-label and tooltip text of the Tab.
metadata string <optional>
 The content to be rendered inside the Text component as a metadata, that appears after the label in non stack case only.
severity "none" | "error" | "confirmation" | "info" | "warning" <optional>
 The status icon to be rendered after the label in non stack case only.
tabPanelId string <optional>
 Accepts the tabpanel element's ID associated with the tab item

TabLinkItemData<K extends string | number>

The data item object that represents a tab with link. Note: Do not use with overflow="popup" as links are currently not supported in overflow items inside a popup.
Properties:
Name Type Argument Description
badge number <optional>
 The content to be rendered inside the Badge component.
href string Sets the URL that the hyperlink points to. If there is no valid URL use "#" for href value to navigate to the top of the page.
icon { type?: 'class'; class: string; } | { type: 'img'; src: string; } <optional>
 The icon before the label in non-stack case, icon above the label in stacked case or the stand alone icon when no label is specified.
itemKey K Key of the TabBarItem
label string Label of the TabBarItem. For icon only display this label is the content for aria-label and tooltip text of the Tab.
metadata string <optional>
 The content to be rendered inside the Text component as a metadata, that appears after the label in non stack case only.
severity "none" | "error" | "confirmation" | "info" | "warning" <optional>
 The status icon to be rendered after the label in non stack case only.
tabPanelId string <optional>
 Accepts the tabpanel element's ID associated with the tab item