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.
- Default Value:
"outlined"
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. 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<MenuSeparator|MenuItem>
-
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
-
items[].disabled :boolean
-
Specifies whether the menu item should be disabled.Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
-
items[].endIcon :object
-
Specifies an icon to show at the end position of the menu item.Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
-
items[].endIcon.class :string
-
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
-
items[].endIcon.src :string
-
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
-
items[].endIcon.type :"class"|"img"
-
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
-
items[].key :string
-
Specifes a key value associated with the menu item.Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
-
items[].label :string
-
Specifies the text to show for the menu item.Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
-
items[].onAction
-
A callback function invoked when the menu item is selected.Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
-
items[].startIcon :object
-
Specifies an icon to show at the start position of the menu item.Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
-
items[].startIcon.class :string
-
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
-
items[].startIcon.src :string
-
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
-
items[].startIcon.type :"class"|"img"
-
Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime.
-
items[].type :"item"|"separator"|"divider" items[].type :"item"|"separator"
-
Specifies the type of the menu item.
- Deprecated:
-
Since Description 17.0.0
Use 'separator' instead.
Supported Values:
Value Description divider
A divider that visibly separates menu items (deprecated). item
A selectable menu item that triggers an action. separator
A non-selectable menu item that visibly separates menu items (no other properties apply). Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime. -
items[].variant :"standard"|"destructive"
-
Specifies styling for the menu item based upon its associated action.
Supported Values:
Value Description destructive
Styling for a menu item associated with a non-reversible action standard
Styling for a standard menu item Note: This property is a subproperty of an array-valued property. Such properties cannot be set individually either at init time via HTML attribute syntax or at runtime via JavaScript. Instead, the outermost array-valued attribute, and its ancestor attributes, can be set at init time or runtime. -
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
- Default Value:
"md"
Supported Values:
Value Description lg
Display a large button. md
Display a default size button. sm
Display a small button. 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
-
tooltip :string
-
Text to show in the tooltip.
Names
Item Name Property tooltip
Property change event tooltipChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-tooltip-changed
-
width :(number|string)
-
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.
-
ojMenuAction
-
Triggered when a menu item is clicked, whether by keyboard, mouse, or touch events. Detail indicates which menu 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
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