@finastra/menu
Version:
Menu Web Component
63 lines (54 loc) • 7.67 kB
Markdown
# fds-menu
## Properties
| Property | Attribute | Modifiers | Type | Default | Description |
|-----------------------|-----------------------|-----------|--------------------------------------------------|------------------------|--------------------------------------------------|
| `absolute` | `absolute` | | `boolean` | false | Makes the menu's position absolute which will be relative to whichever ancestor has position:relative. Setting x and y will modify the menu's left and top. Setting anchor will attempt to position the menu to the anchor. |
| `activatable` | `activatable` | | `boolean` | false | Proxies to mwc-list's activatable property. |
| `anchor` | `anchor` | | `HTMLElement \| null` | null | Determines from which element the floating menu should calculate sizing and position offsets. In the default case, both mwc-menu and the anchor should share a parent with position:relative. Changing anchor typically requires absolute or fixed. |
| `corner` | `corner` | | `"TOP_LEFT" \| "TOP_RIGHT" \| "BOTTOM_LEFT" \| "BOTTOM_RIGHT" \| "TOP_START" \| "TOP_END" \| "BOTTOM_START" \| "BOTTOM_END"` | "TOP_START" | Corner of the anchor from which the menu should position itself. |
| `defaultFocus` | `defaultFocus` | | `"NONE" \| "LIST_ROOT" \| "FIRST_ITEM" \| "LAST_ITEM"` | "LIST_ROOT" | Item to focus upon menu open. |
| `fixed` | `fixed` | | `boolean` | false | Makes the menu's position fixed which will be relative to the window. Setting x and y will modify the menu's left and top. Setting anchor will attempt to position the menu to the anchor's immediate position before opening. |
| `forceGroupSelection` | `forceGroupSelection` | | `boolean` | false | Forces a menu group to have a selected item by preventing deselection of menu items in menu groups via user interaction. |
| `fullwidth` | `fullwidth` | | `boolean` | false | Sets surface width to 100%. |
| `index` | | readonly | `MWCListIndex` | | |
| `innerAriaLabel` | `innerAriaLabel` | | `string \| null` | null | Proxies to mwc-list's innerAriaLabel property. |
| `innerRole` | `innerRole` | | `"menu" \| "listbox"` | "menu" | Proxies to mwc-list's innerRole property. |
| `items` | `items` | | `ListItemBase[]` | "[]" | Proxies to mwc-list's index property. |
| `mdcRoot` | | | `MenuSurface` | | Root element for MDC Foundation usage.<br /><br />Define in your component with the `` decorator |
| `menuCorner` | `menuCorner` | | `MenuCorner` | "START" | Horizontal corner of the menu from which the menu should position itself. NOTE: Only horizontal corners are supported. |
| `multi` | `multi` | | `boolean` | false | Proxies to mwc-list's multi property. |
| `open` | `open` | | `boolean` | false | Whether the menu should open and display. |
| `quick` | `quick` | | `boolean` | false | Whether to skip the opening animation. |
| `selected` | `selected` | | `ListItemBase \| ListItemBase[] \| null` | null | Proxies to mwc-list's selected property. |
| `slotElement` | | | `HTMLSlotElement \| null` | | |
| `stayOpenOnBodyClick` | `stayOpenOnBodyClick` | | `boolean` | false | Prevents the menu from closing when clicking outside the menu. |
| `styles` | | | `CSSResult[]` | ["baseStyle","styles"] | |
| `wrapFocus` | `wrapFocus` | | `boolean` | false | Proxies to mwc-list's wrapFocus property. |
| `x` | `x` | | `number \| null` | null | Sets horizontal position when absolute. When given an anchor, sets horizontal position relative to anchor at given corner. Requires y not to be null. |
| `y` | `y` | | `number \| null` | null | Sets vertical position when absolute. When given an anchor, sets vertical position relative to anchor at given corner. Requires x not to be null. |
## Methods
| Method | Type |
|-----------------------|----------------------------------------------|
| `click` | `(): void` |
| `close` | `(): void` |
| `focusItemAtIndex` | `(index: number): void` |
| `getFocusedItemIndex` | `(): number` |
| `layout` | `(updateItems?: boolean \| undefined): void` |
| `select` | `(index: MWCListIndex): void` |
| `show` | `(): void` |
## Events
| Event | Type |
|-----------------|------------------|
| `action` | `ActionDetail` |
| `closed` | |
| `items-updated` | |
| `opened` | |
| `selected` | `SelectedDetail` |
## CSS Custom Properties
| Property | Default | Description |
|--------------------------|----------------------|-----------------------------------------------|
| `--fds-menu-item-height` | "48px" | Height of single-line list-items in the menu. |
| `--fds-menu-max-height` | "calc(100vh - 32px)" | Menu max-height. |
| `--fds-menu-max-width` | "calc(100vw - 32px)" | Menu max-width. |
| `--fds-menu-min-width` | "112px" | Menu min-width. |
| `--fds-menu-z-index` | 8 | Z-index of the popup menu surface. |