-
Notifications
You must be signed in to change notification settings - Fork 125
Platform: Menu component Technical Design
The menu is a list of related actions or items that users can select from. It appears when users interact with a button or an icon. It's used to display content when composing dropdown buttons or popovers.
The Menu component allows user to specify if the menu should scroll, and if it should, after how many items the scrolling should begin. One can also specify the width of the menu, if the items should have a separator line for better look-and-feel.
An array of options is also provided in the way the user sends information on the content to be displayed. A menu item can be customized to be selectable, disabled, perform its own click action, have its own icon(s), and also be part of a group under a group header.
<fdp-menu
[menuItems]= "menuData"
[showSeparator]='true|false'
[isScrolling]='true|false'
[scrollLimit]='any number'
[width]="'width-in-px'" >
</fdp-menu>is an array of items of type MenuItems or MenuGroup.
MenuItem consists of:
* `label`- the name of the item. (Required)
* `selectable`- menu item selectable. If item is selectable, then it will display selected/non-selected state when toggled. (Optional)
* `selected`- if this item is selected. (Optional)
* `icon`- icon to display in front of the menu label. (Optional)
* `secondaryIcon`- another icon to display at the other end of the item. (Optional)
* `disabled`- if this item is to appear in disabled state. (Optional)
* `tooltipLabel`- a customized label to show up on tooltip that is different from `label`. (Optional)
* `id`- unique identifier for each menu item. (Optional by user but handled programmatically)
* `command()`- the function to be called when this item is clicked. Could navigate to another page or do any other action. (Required)
MenuGroup consists of:
* `label`- the name of the group header. (Optional)
* `icon`- icon to display for all items part of this group. (Optional)
* `tooltipLabel`- a customized label to show up on tooltip that is different from `label`. (Optional)
* `groupItems`- all the MenuItems that are part of this group. (Required)
An example of how menuData would look like is:
menuData: (MenuItem | MenuGroup)[] = [];
this.menuData = [{
label: 'First Item',
icon: 'sap-icon--vehicle-repair',
secondaryIcon: 'sap-icon--grid',
command: () => {
alert("First");
}
}, {
label: 'Group 1',
groupItems: [
{
label: 'Item 1 in Group 1',
disabled: true,
command: () => {
alert("Item 1 in Group 1 called");
}
},
{
label: 'Item 2 in Group 1',
tooltipLabel: 'Another item',
command: () => {
alert('Item 2 in Group 1');
}
}
]
}, {
label: 'Third Item',
selectable: true,
selected: true,
command: () => {
alert("Third");
}
}];
showSeparator specifies if a separating line should be added between menu items. This field is optional. Default is set to false.
isScrolling specifies if the menu should scroll. This field is optional. Default is set to false.
scrollLimit specifies the number of items to be displayed after which scrolling begins. This field is optional. Default is set to the total number of items in order to display all items.
width specifies the maximum width the Menu should take. Minimum width is set to 192px. This field is optional.
N/A
N/A
N/A
export interface MenuItem {
label: string;
selectable?: boolean;
selected?: boolean;
icon?: string;
secondaryIcon?: string;
disabled?: boolean;
tooltipLabel?: string;
command(): void;
}export interface MenuGroup {
label?: string;
icon?: string;
tooltipLabel?: string;
groupItems: MenuItem[];
}N/A