Element: <oj-c-toolbar>

CORE PACK

Oracle® JavaScript Extension Toolkit (JET)
18.1.0
G25382-01

Since:
  • 18.0.0
Module:
  • toolbar

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

QuickNav

Attributes

Events

Methods

Type Definitions

Other Topics


JET Toolbar

Description: A toolbar displays a strip of control elements such as buttons and menu buttons, often grouped by separators.

<oj-c-toolbar items="[[toolbarItems]]">
</oj-c-toolbar>

Touch End User Information

Keyboard End User Information

Target Gesture Action
Navigate right Right Arrow Key or Left Arrow Key(RTL) Change focus to next item on the right
Navigate left Left Arrow Key or Right Arrow Key(RTL) Change focus to next item on the left

Accessibility

JET Toolbar takes care of focus management, as noted above.

The application is responsible for applying aria-label and/or aria-controls attributes to the toolbar element, if applicable per the instructions that follow:

If this toolbar is (or might be) placed in context with other toolbars, then the application should apply an aria-label to the toolbar element to distinguish it, e.g. an "Edit" toolbar. The aria-label is optional when there is only one toolbar.

If the toolbar is controlling something else on the page, e.g. bold / italic / underline buttons controlling a rich text editor, then the application should apply an aria-controls attribute to the toolbar element, e.g. aria-controls="myTextEditor".

Disabled content: JET supports an accessible luminosity contrast ratio, as specified in WCAG 2.0 - Section 1.4.3 "Contrast", in the themes that are accessible. (See the "Theming" chapter of the JET Developer Guide for more information on which themes are accessible.) Note that Section 1.4.3 says that text or images of text that are part of an inactive user interface component have no contrast requirement. Because disabled content may not meet the minimum contrast ratio required of enabled content, it cannot be used to convey meaningful information.


Usage

Signature:

interface CToolbarElement

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

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

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

chroming :"borderless"|"outlined"

Specifies the chroming to be set on content to be placed into the toolbar.
Names
Item Name
Property chroming
Property change event chromingChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-chroming-changed

items :Array.<(oj-c.Toolbar.ToolbarButton|oj-c.Toolbar.ToolbarMenuButton|oj-c.Toolbar.ToolbarSplitMenuButton|oj-c.Toolbar.ToolbarButtonsetSingle|oj-c.Toolbar.ToolbarButtonsetMultiple|oj-c.Toolbar.ToolbarToggleButton|oj-c.Toolbar.ToolbarProgressButton|oj-c.Toolbar.ToolbarSeparator)>

Specifies the content to be placed into the toolbar.
Default Value:
  • []
Names
Item Name
Property items
Property change event itemsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-items-changed

size :"sm"|"md"|"lg"

Specifies the size of content to be placed into the toolbar.
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

spacing :"sm"|"lg"

Specifies the spacing between content. 'sm' spacing is recommended for button variants that don't have a background or border, for example borderless buttons. 'lg' spacing is recommended for button variants that have a background or border, for example outlined or solid buttons.
Supported Values:
Value Description
lg Default spacing between content.
sm Compact spacing between content.
Names
Item Name
Property spacing
Property change event spacingChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-spacing-changed

toolbar-selection :Readonly<Record<string, ToolbarSelection>>

An array containing key/value objects for selection groups.
Default Value:
  • [object Object]
Supports writeback:
  • true
Names
Item Name
Property toolbarSelection
Property change event toolbarSelectionChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-toolbar-selection-changed

Events

ojToolbarAction

Triggered when a toolbar item is clicked, whether by keyboard, mouse, or touch events. Detail indicates which toolbar item was clicked.
Properties:

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

Name Type
key string

ojToolbarSelection

Triggered when a toolbar selection group item is clicked, whether by keyboard, mouse, or touch events. Detail indicates new selection value for group.
Properties:

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

Name Type
toolbarSelectionGroupKey string
value T

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

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.
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.
value string The value associated with the selectable item.
Specifies a menu item representing a select multiple.
Properties:
Name Type Argument Description
items Array.<oj-c.Toolbar.MenuSelectItem> <optional>
 Specifies the array of select items that make up the select multiple.
key string A unique key associated with the select multiple.
type "selectmultiple" Specifies a select multiple menu item.
Specifies a menu item representing a select single.
Properties:
Name Type Argument Description
items Array.<oj-c.Toolbar.MenuSelectItem> <optional>
 Specifies the array of select items that make up the select single.
key string A unique key associated with the select single.
type "selectsingle" Specifies a select single menu item.
Specifies a menu separator: { type: "separator" }.
Properties:
Name Type Description
type separator | divider
Deprecated:
Since Value Description
17.0.0 divider Use 'separator' instead.
"separator" 		Specifies a separator menu item.
Specifies a menu item representing a submenu.
Properties:
Name Type Argument Description
disabled boolean <optional>
 Specifies if the submenu is disabled (enabled by default).
items Array<oj-c.Toolbar.MenuSeparator | oj-c.Toolbar.MenuItem | oj-c.Toolbar.MenuSubMenu | oj-c.Toolbar.MenuSelectSingle | oj-c.Toolbar.MenuSelectMultiple> <optional>
 Specifies the array of menu items that make up the submenu.
key string <optional>
 A unique key associated with the submenu menu item.
label string <optional>
 The submenu label.
startIcon string <optional>
 Optional icon to render at the start of the submenu.
type "submenu" Specifies a submenu menu item.

ToggleItem

Properties:
Name Type Argument Description
disabled boolean <optional>
 Specifies if the toggle 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 toggle item.
label string The toggle item label.
startIcon { type?: 'class'; class: string; } | { type: 'img'; src: string; } <optional>
 Optional icon to render at the start of the toggle item.
value string The toggle item value.

ToolbarButton

Describes an oj-c-button item in the Toolbar.
Properties:
Name Type Argument Description
chroming "solid" | "ghost" | "borderless" | "outlined" | "callToAction" | "danger" <optional>
 Indicates in what states the button has variants in background and border.
disabled boolean <optional>
 Specifies that the button element should be disabled.
display "all" | "label" | "icons" <optional>
 Display just the label, the icons, or all. Label is used as tooltip and should be set in all cases.
endIcon { type?: 'class'; class: string; } | { type: 'img'; src: string; } <optional>
 Optional icon to render at the end of the button.
key string A unique key associated with the toolbar item.
label string Text to show in the button.
onAction function <optional>
 Optional callback function associated with the toolbar item.
startIcon { type?: 'class'; class: string; } | { type: 'img'; src: string; } <optional>
 Optional icon to render at the start of the button.
tooltip string <optional>
 Text to show in the tooltip. This overrides the default tooltip that renders the label when in icon mode.
type "button" Specifies the desired toolbar item.

ToolbarButtonsetMultiple

Describes an oj-c-buttonset-multiple item in the Toolbar.
Properties:
Name Type Argument Description
chroming "borderless" | "outlined" <optional>
 Indicates in what states the button has chromings in background and border.
disabled boolean <optional>
 Specifies that the buttonset should be disabled.
display "all" | "label" | "icons" <optional>
 Display just the label, the icons, or all.
items Array.<oj-c.Toolbar.ToggleItem> <optional>
 Specifies the toggle buttons rendered by the buttonset.
key string A unique key associated with the toolbar item.
type "buttonset-multiple" Specifies the desired toolbar item.

ToolbarButtonsetSingle

Describes an oj-c-buttonset-single item in the Toolbar.
Properties:
Name Type Argument Description
chroming "borderless" | "outlined" <optional>
 Indicates in what states the button has chromings in background and border.
disabled boolean <optional>
 Specifies that the buttonset should be disabled.
display "all" | "label" | "icons" <optional>
 Display just the label, the icons, or all.
items Array.<oj-c.Toolbar.ToggleItem> <optional>
 Specifies the toggle buttons rendered by the buttonset.
key string A unique key associated with the toolbar item.
type "buttonset-single" Specifies the desired toolbar item.

ToolbarMenuButton

Describes an oj-c-menu-button item in the Toolbar.
Properties:
Name Type Argument Description
chroming "solid" | "ghost" | "borderless" | "outlined" <optional>
 Indicates in what states the button has chromings in background and border.
disabled boolean <optional>
 Specifies that the button element should be disabled.
display "all" | "label" | "icons" <optional>
 Display just the label, the icons, or all. Label is used as tooltip and should be set in all cases.
endIcon { type?: 'class'; class: string; } | { type: 'img'; src: string; } <optional>
 Optional icon to render at the end of the button.
items Array<oj-c.Toolbar.MenuSeparator | oj-c.Toolbar.MenuItem | oj-c.Toolbar.MenuSubMenu | oj-c.Toolbar.MenuSelectSingle | oj-c.Toolbar.MenuSelectMultiple> <optional>
 Items describe the menu items rendered by the menu button.
key string <optional>
 A unique key associated with the toolbar item, only needed for automated testing.
label string Text to show in the button.
startIcon { type?: 'class'; class: string; } | { type: 'img'; src: string; } <optional>
 Optional icon to render at the start of the button.
suffix string <optional>
 Suffix appended to menu label to indicate last selection.
tooltip string <optional>
 Text to show in the tooltip. This overrides the default tooltip that renders the label when in icon mode.
type "menu-button" Specifies the desired toolbar item.

ToolbarProgressButton

Describes an oj-c-progress-button item in the Toolbar.
Properties:
Name Type Argument Description
chroming "solid" | "borderless" | "outlined" | "callToAction" <optional>
 Indicates in what states the button has variants in background and border.
disabled boolean <optional>
 Specifies that the button element should be disabled.
display "all" | "label" | "icons" <optional>
 Display just the label, the icons, or all. Label is used as tooltip and should be set in all cases.
endIcon { type?: 'class'; class: string; } | { type: 'img'; src: string; } <optional>
 Optional icon to render at the end of the button.
isLoading boolean <optional>
 Specifies if progress should be shown.
key string A unique key associated with the toolbar item.
label string Text to show in the button or as tooltip for icon mode.
onAction function <optional>
 Optional callback function associated with the toolbar item.
startIcon { type?: 'class'; class: string; } | { type: 'img'; src: string; } <optional>
 Optional icon to render at the start of the button.
tooltip string <optional>
 Text to show in the tooltip. This overrides the default tooltip that renders the label when in icon mode.
type "progress-button" Specifies the desired toolbar item.

ToolbarSeparator

Describes a separator item in the Toolbar.
Properties:
Name Type Description
type "separator" Specifies the desired toolbar item.

ToolbarSplitMenuButton

Describes an oj-c-split-menu-button item in the Toolbar.
Properties:
Name Type Argument Description
chroming "solid" | "outlined" | "callToAction" <optional>
 Indicates in what states the button has chromings in background and border.
disabled boolean <optional>
 Specifies that the button element should be disabled.
items Array<oj-c.Toolbar.MenuSeparator | oj-c.Toolbar.MenuItem> <optional>
 Items describe the menu items rendered by the menu button.
key string A unique key associated with the toolbar item.
label string Text to show in the button.
onAction function <optional>
 Optional callback function associated with the toolbar item.
tooltip string <optional>
 Text to show in the tooltip.
type "split-menu-button" Specifies the desired toolbar item.

ToolbarToggleButton

Describes an oj-c-toggle-button item in the Toolbar.
Properties:
Name Type Argument Description
chroming "borderless" | "outlined" <optional>
 Indicates in what states the button has variants in background and border.
disabled boolean <optional>
 Specifies that the button element should be disabled.
display "all" | "label" | "icons" <optional>
 Display just the label, the icons, or all. Label is used as tooltip and should be set in all cases.
endIcon { type?: 'class'; class: string; } | { type: 'img'; src: string; } <optional>
 Optional icon to render at the end of the button.
key string A unique key associated with the toolbar item.
label string Text to show in the button.
startIcon { type?: 'class'; class: string; } | { type: 'img'; src: string; } <optional>
 Optional icon to render at the start of the button.
tooltip string <optional>
 Text to show in the tooltip. This overrides the default tooltip that renders the label when in icon mode.
type "toggle-button" Specifies the desired toolbar item.