Visual
Overview
A menu button is a button that opens a menu.
Usage Examples
Basic Usage
<ptcs-menu-button items="[[items]]"></ptcs-menu-button>
Component API
Properties
Property |
Type |
Description |
Default |
Triggers a changed event? |
disabled |
Boolean |
Disables the button |
false |
No |
offset |
Number |
The distance between the button and the menu edge. |
8 |
No |
openOnHover |
Boolean |
Determines whether hovering the button will trigger the menu. |
false |
No |
buttonVariant |
String |
Set a button variant. |
"tertiary" |
No |
icon |
String |
Sets an icon. |
"cds:icon_more_vertical" |
No |
iconSrc |
String |
Sets an icon source. |
|
No |
contentAlign |
String |
Align the label in button to the left, right or center. |
"center" |
No |
buttonMaxWidth |
Number |
Set a maximum width for the button widget. |
|
No |
label |
String |
The text label in button. |
|
No |
tooltip |
String |
The tooltip that appears when hovering over the button |
|
No |
tooltipIcon |
String |
The icon for the tooltip |
|
No |
displayIcons |
Boolean |
When false, icon data is ignored by the menu, and no icons are rendered. |
false |
No |
allowMissingIcons |
Boolean |
When allowMissingIcons is false, and displayIcons is true, a default icon will be assigned to any Menu Item that has no icon data associated with it. |
false |
No |
menuMaxWidth |
String |
Sets the maximum width the menu can be reduced to. May be defined by a custom value, in pixels. If set to "auto", the menu will assume the width of its widest menu item. |
"auto" |
No |
menuMinWidth |
String |
Sets the minimum width the menu can be reduced to. May be defined by a custom value, in pixels. If set to "auto", the menu will not become narrower than its widest menu item. |
"auto" |
No |
maxMenuItems |
String |
Defines the maximum number of visible dropdown menu and submenu items. |
5 |
No |
iconPlacement |
String |
Sets the tooltip icon image on the left or right of the text label if there is any. |
"right" |
No |
menuPlacement |
String |
Sets the placement of the menu in relation to its button. The property lets you choose to place the menu on the top/bottom(vertically) or left/right(horizontally) of the button. The exact alignment of the menu will be auto adjusted based on the menu button’s position on the page. Options: "vertical" / "horizontal". |
"vertical" |
No |
menuIconSize |
Number |
Setting the size will set the width and the height of the icon |
|
No |
Events
Name |
Data |
Description |
action |
ev.detail = { item } |
Generated when the user clicks on a "leaf" in the menu tree (an item without a submenu) |