Platform: Menu Button Component Technical Design

Menu Button

Summary

The menu button is a button used for triggering the display of a menu. Its display usually shows a "down arrow" icon to identify that additional information/actions will be displayed when it is clicked on.

This component is used in conjunction with the Menu/Menu Trigger.

Example

<fdp-menu-button
  [icon]="sap-icon--cart"
  (buttonClick)="onButtonClick()"
  [menuTriggerFor]="menu">Actions</fdp-menu-button>
<fdp-menu #menu>
   <fdp-menu-item>Item #1</fdp-menu-item>
   <fdp-menu-item>Item #2</fdp-menu-item>
   <fdp-menu-item>Item #3</fdp-menu-item>
</fdp-menu>

Property Bindings

icon: string

Class name of icon to display alongside the button label. This icon is an addition to the "arrow-down" icon normally displayed; the "icon" does not replace the "arrow-down" icon.

Event Bindings

buttonClick

Event which is emitted when the button is clicked.

---

i18n

Link to general support for i18n: Supporting internationalization in ngx/platform

Special Usecase: No

• fdp-menu-button can be supported normally with i18n marker:

<fdp-menu-button
  i18n="@@actions"
  [icon]="sap-icon--cart"
  (buttonClick)="onButtonClick()"
  [menuTriggerFor]="menu">
  Actions
</fdp-menu-button>

Redesign Required: No

---