Element: <oj-c-tab-bar>

CORE PACK

Oracle® JavaScript Extension Toolkit (JET)
21.0.0
G39657-01

Since:
  • 17.0.0
Module:
  • tab-bar

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

QuickNav

Attributes

Events

Methods

Type Definitions

Exported Types

Documentation-only Types

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.
LeftArrow or RightArrow Navigate to the previous or next tab.
Delete Remove the current tab.
Esc Hide the tooltip if tooltip is shown.
Home Navigates to the first tab in the tablist.
End Navigates to the last tab in the tablist.
Command/Ctrl + Shift + LeftArrow (RightArrow in RTL) Moves the tab before the previous tab.
Command/Ctrl + Shift + RightArrow (LeftArrow in RTL) Moves the tab after the next tab.
Dropdown UpArrow or DownArrow Navigate the tab represented as item in the list in the direction of the arrow.
Enter or Space Select the highlighted choice from the dropdown and close the dropdown.
Esc Close the dropdown.

Accessibility

It is not recommended to use oj-c-tab-bar only for the purpose of rendering links that navigate to a different page. Instead, each item that has a link should be interactive and activating it should display or switch a content panel within the same page or context.


Usage

Signature:

interface CTabBarElement<K extends string | number = string | number>

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

context-menu-config :oj-c.TabBar.CTabBarContextMenuConfig.<K>

Specifies a context menu configuration. It takes the keys `accessibleLabel` and `items`, where `accessibleLabel` is optional and items required . `items` function returns an array of menu item object representations that indicates what menu items are going to be part of menu based on some specific context menu context.
Context Menu Item TypeDef
ContextMenuSeparator{ type: 'separator'}
MenuItem{ type?: 'item'; label: string; key: string; disabled?: boolean; onAction?: () => void; startIcon?: MenuIcon; endIcon?: MenuIcon; variant?: 'standard' | 'destructive'; };
ContextMenuSubMenu{ type: 'submenu'; label?: string; disabled?: boolean; startIcon?: string; items?: Array<ContextMenuItems>; };
ContextMenuSelectSingle{ type: 'selectsingle'; key?: string; items?: Array<MenuSelectItem>; selection?: string; onSelection?: (detail: { value: string }) => void; };
ContextMenuSelectMultiple{ type: 'selectmultiple'; key?: string; items?: Array<MenuSelectItem>; selection?: Array<string>; onSelection?: (detail: { value: Array<string> }) => void; };
MenuIcon{ type?: 'class'; class: string; } | { type: 'img'; src: string; };
MenuSelectItem{ label: string; disabled?: boolean; endIcon?: MenuIcon; value: string; }
Names
Item Name
Property contextMenuConfig
Property change event contextMenuConfigChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-context-menu-config-changed

data :(Array.<(oj-c.TabBar.TabData.<K>|oj-c.TabBar.TabLinkItemData.<K>)>|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
standard Label and icon are shown for all tabs.
icons Only icons are shown for all tabs.
stacked Stacks the badge over the icon and icon over the label when applicable.
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
stretch Stretches the tab bar items to occupy available space
condense Condenses the space occupied by tab bar items
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
enabled Enables reordering of items in tabbar.
disabled Disables 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

Note: The event detail contains the following properties: oj-c.TabBar.KeyDetail<K>

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

See Events and Listeners for additional information.

ojRemove

Note: The event detail contains the following properties: oj-c.TabBar.KeyDetail<K>

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

See Events and Listeners for additional information.

ojReorder

Note: The event detail contains the following properties: oj-c.TabBar.ReorderDetail<K>

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.

See Events and Listeners for additional information.

ojSelectionAction

Note: The event detail contains the following properties: oj-c.TabBar.SelectionActionDetail<K>

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

See Events and Listeners for additional information.

Methods

getProperty(property) : {any}

Retrieves the value of a property or a subproperty.
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 corresponding 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

Type Definitions

Exported Types

Note: Type definitions in this section are exported by the module, and so can be imported for use in application code.

TabData<K extends string | number>

The data item object that represents a tab.
Typescript Import Format
//To import this type, use the format below.
import { TabData } from "oj-c/tab-bar";
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.
Typescript Import Format
//To import this type, use the format below.
import { TabLinkItemData } from "oj-c/tab-bar";
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.

Note: This value is rendered as a link href. Applications are responsible for providing trusted URLs, choosing protocols appropriate for their use case, and enforcing any required origin or host allowlist.
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

Documentation-only Types

Note: Type definitions in this section have been provided for documentation purposes and cannot be imported into application code.

ContextMenuSelectMultiple

Properties:
Name Type Argument Description
items Array.<oj-c.TabBar.MenuSelectItem> <optional>
 Specifies the array of select items that make up the select multiple.
key string A unique key associated with the select multiple.
onSelection (detail: oj-c.TabBar.SelectMenuItemDetail<string[]>) => void <optional>
selection Array<string> <optional>
type "selectmultiple" Specifies a select multiple menu item.

ContextMenuSelectSingle

Properties:
Name Type Argument Description
items Array.<oj-c.TabBar.MenuSelectItem> <optional>
 Specifies the array of select items that make up the select single.
key string A unique key associated with the select single.
onSelection (detail: oj-c.TabBar.SelectMenuItemDetail<string>) => void <optional>
selection string <optional>
type "selectsingle" Specifies a select single menu item.

ContextMenuSeparator

Properties:
Name Type
type "separator"

ContextMenuSubMenu

Properties:
Name Type Argument Description
disabled boolean <optional>
 Specifies if the submenu is disabled (enabled by default).
items Array<string | oj-c.TabBar.MenuItem | oj-c.TabBar.ContextMenuSeparator | oj-c.TabBar.ContextMenuSubMenu | oj-c.TabBar.ContextMenuSelectSingle | oj-c.TabBar.ContextMenuSelectMultiple> <optional>
key string <optional>
 A unique key associated with the submenu menu item.
label string <optional>
 The submenu label.
startIcon { type?: 'class'; class: string; } | { type: 'img'; src: string; } <optional>
 Optional icon to render at the start of the submenu.
type "submenu" Specifies a submenu menu item.

CTabBarContextMenuConfig<K>

Properties:
Name Type Argument
accessibleLabel string <optional>
items (context: oj-c.TabBar.CTabBarItemContextMenuContext<K>) => ("remove" | ContextMenuItems | "defaultMenuItems" | "reorder")[]

CTabBarItemContextMenuContext<K>

Properties:
Name Type
hasDefaultMenuItems boolean
itemKey K

KeyDetail<K extends string | number>

Payload for onOjBeforeSelect and onOjRemove events.
Properties:
Name Type Description
accept (acceptPromise:Promise<void>) => void 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
Specifies a standard menu item.
Properties:
Name Type Argument Description
disabled boolean <optional>
 Specifies if the menu item is disabled (enabled by default).
endIcon { type?: 'class'; class: string; } | { type: 'img'; src: string; } <optional>
 Optional icon to render at the end of the menu item.
key string A unique key associated with the menu item.
label string The menu item label.
onAction function <optional>
 Optional callback function associated with the menu item.
startIcon { type?: 'class'; class: string; } | { type: 'img'; src: string; } <optional>
 Optional icon to render at the start of the menu item.
type "item" <optional>
 Specifies a standard menu item.
variant "standard" | "destructive" <optional>
 Specifies the menu item behavior.
Properties:
Name Type
at (index: number) => string | undefined
Specifies a selectable item in a menu item.
Properties:
Name Type Argument Description
disabled boolean <optional>
 Specifies if the selectable item is disabled (enabled by default).
endIcon { type?: 'class'; class: string; } | { type: 'img'; src: string; } <optional>
 Optional icon to render at the end of the selectable item.
label string The selectable item label.
startIcon { type?: 'class'; class: string; } | { type: 'img'; src: string; } <optional>
 Optional icon to render at the start of the selectable item.
value string The value associated with the selectable item.

ReorderDetail<K extends string | number>

Payload for onOjReorder event.
Properties:
Name Type Description
reorderedKeys Array<K> The new order of keys after reorder

SelectionActionDetail<K extends string | number>

Payload for onOjSelectionAction event.
Properties:
Name Type
previousValue K
value K

SelectMenuItemDetail<T extends oj-c.TabBar.MenuSelection>

Properties:
Name Type
menuSelectionGroupKey string
value T