Skip to content

Platform: Menu component Technical Design

kavya-b edited this page May 14, 2020 · 5 revisions

Obsolete tech spec- replaced by Menu/Menu Trigger

Menu Component

Summary

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.

Design:

<fdp-menu 
        [menuItems]= "menuData"
        [showSeparator]='true|false'
        [isScrolling]='true|false' 
        [scrollLimit]='any number'
        [width]="'width-in-px'" >
</fdp-menu>

Property Bindings

[menuItems] : MenuItem[] or MenuGroup[]

is an array of items of type MenuItems or MenuGroup.

MenuItem
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
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: boolean

showSeparator specifies if a separating line should be added between menu items. This field is optional. Default is set to false.

isScrolling: boolean

isScrolling specifies if the menu should scroll. This field is optional. Default is set to false.

scrollLimit: number

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: string

width specifies the maximum width the Menu should take. Minimum width is set to 192px. This field is optional.


Event Bindings

N/A


Two-Way Bindings

N/A


Content Projection

N/A


Interfaces

MenuItem

export interface MenuItem {
    label: string;

    selectable?: boolean;

    selected?: boolean;

    icon?: string;

    secondaryIcon?: string;

    disabled?: boolean;

    tooltipLabel?: string;

    command(): void;
}

MenuGroup

export interface MenuGroup {
    label?: string;

    icon?: string;

    tooltipLabel?: string;

    groupItems: MenuItem[];
}

Related Modules

N/A

Additional Notes


Questions

Clone this wiki locally