Element: <oj-c-tab-bar>

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.

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.

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.

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)>>|DataProvider.<K, oj-c.TabBar.TabData.<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`

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

Element: <oj-c-tab-bar>

Attributes

Events

Methods

Type Definitions

Other Topics

Usage

Signature: interface CTabBarElement

Typescript Import Format

Attributes

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

Names

display :"standard"|"icons"|"stacked"

Supported Values:

Names

edge :"top"|"bottom"

Names

layout :"stretch"|"condense"

Supported Values:

Names

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

Names

reorderable :"enabled"|"disabled"

Supported Values:

Names

selection :K

Names

Events

ojBeforeSelect

Properties:

ojRemove

Properties:

ojReorder

Properties:

ojSelectionAction

Properties:

Methods

getProperty(property) : {any}

Parameters:

Returns:

setProperties(properties) : {void}

Parameters:

Returns:

setProperty(property, value) : {void}

Parameters:

Returns:

Type Definitions

TabData<K extends string | number>

Properties:

Signature:
interface CTabBarElement