Usage
Signature:
interface CMenuButtonElement
Typescript Import Format
//To typecheck the element APIs, import as below.
import { CMenuButtonElement } from "oj-c/menu-button";
//For the transpiled javascript to load the element's module, import as below
import "oj-c/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.
Slots
JET components that allow child content support slots. Please see the slots section of the JET component overview doc for more information on allowed slot content and slot types.
-
endIcon
-
The endIcon slot is the button's end icon. The oj-c-menu-button element accepts DOM nodes as children with the endIcon slot.
-
startIcon
-
The startIcon slot is the button's start icon. The oj-c-menu-button element accepts DOM nodes as children with the startIcon slot.
Attributes
-
chroming :"ghost"|"borderless"|"outlined"|"solid"
-
Indicates in what states the button has chromings in background and border.
- Default Value:
"outlined"
Supported Values:
Value Description borderless
Borderless buttons are a more prominent variation. Borderless buttons are useful for supplemental actions that require minimal emphasis. ghost
Ghost buttons are the least prominent variation. Ghost buttons are useful for performing low-priority tasks, such as manipulating the UI. 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
-
display :"all"|"icons"|"label"
-
Display just the label, the icons, or all. Label is used as tooltip and should be set in all cases.
- Default Value:
"all"
Supported Values:
Value Description all
Display both the label and icons. icons
Display only the icons. label
Display only the text label. 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
-
items :Array<MenuSeparator|MenuItem|MenuSubMenu|MenuSelectSingle|MenuSelectMultiple>
-
Type Def MenuSeparator { type: 'separator'} MenuItem { type?: 'item'; label: string; key: string; disabled?: boolean; onAction?: () => void; startIcon?: MenuIcon; endIcon?: MenuIcon; variant?: 'standard' | 'destructive'; }; MenuSubMenu { type: 'submenu'; label?: string; disabled?: boolean; startIcon?: string; items?: Array<MenuItems>; }; MenuSelectSingle { type: 'selectsingle'; key?: string; items?: Array<MenuSelectItem>; }; MenuSelectMultiple { type: 'selectmultiple'; key?: string; items?: Array<MenuSelectItem>; }; MenuIcon { type?: 'class'; class: string; } | { type: 'img'; src: string; }; MenuSelectItem { label: string; disabled?: boolean; endIcon?: MenuIcon; value: string; } - 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
-
selection :object
-
An array containing key/value objects for menu selection groups.
- 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
-
size :"xs"|"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. xs
Display an extra small button. Only suppported for component developers with ghost chroming in icon display mode. 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
-
suffix :string
-
Suffix appended to menu label to indicate last selection.
Names
Item Name Property suffix
Property change event suffixChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-suffix-changed
-
tooltip :string
-
Text to show in the tooltip. This overrides the default tooltip that renders the label when in icon mode.
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
-
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