Element: <oj-c-split-menu-button>

CORE PACK

Oracle® JavaScript Extension Toolkit (JET)
16.0.0
F83701-01

Since:
  • 14.0.0
Module:
  • split-menu-button

QuickNav

Attributes

Events

Methods

Other Topics


JET Split Menu Button

Description: A Split Menu Button combines a push button and menu button. 

<oj-c-split-menu-button label="Copy" onAction="[[action]]" items="[[items]]">
</oj-c-split-menu-button>

Touch End User Information

Target Gesture Action
Button Tap on action side Invoke the action.
Button Tap on menu side Invoke the menu.

Keyboard End User Information

Target Key Action
Split Menu Button Enter or Space Invoke the Button action.
Split Menu Button Down Arrow Invoke the Button menu.

Accessibility

For accessibility, the label is used as the accessible aria label. This is required as persistent split menu buttons modify the label depending on the last menu item selection.

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 CSplitMenuButtonElement

Typescript Import Format
//To typecheck the element APIs, import as below.
import { CSplitMenuButtonElement } from "oj-c/split-menu-button";

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

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 :"outlined"|"solid"|"callToAction"

Indicates in what states the button has chromings in background and border.
Supported Values:
Value Description
callToAction A Call To Action (CTA) button guides the user to take or complete the action that is the main goal of the page or page section. There should only be one CTA button on a page at any given time.
outlined Outlined buttons are salient, but lighter weight than solid buttons. Outlined buttons are useful for secondary actions.
solid Solid buttons stand out, and direct the user's attention to the most important actions in the UI.
Default Value:
  • "outlined"
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

disabled :boolean

Specifies that the button element should be disabled.
Default Value:
  • false
Names
Item Name
Property disabled
Property change event disabledChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-disabled-changed

items :Array<SplitMenuButtonMenuItem>

Items describe the menu items rendered by the menu button.
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

label* :string

Text to show in the button.
Default Value:
  • ""
Names
Item Name
Property label
Property change event labelChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-label*-changed

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

Size of button
Supported Values:
Value Description
lg Display a large button.
md Display a default size button.
sm Display a small button.
Default Value:
  • "md"
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

width :Size

Specifies that the button style width
Names
Item Name
Property width
Property change event widthChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-width-changed

Events

ojAction

Triggered when a button is clicked, whether by keyboard, mouse, or touch events. To meet accessibility requirements, the only supported way to react to the click of a button is to listen for this event.

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 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