vwc-menu 2.43.0
Install from the command line:
Learn more about npm packages
$ npm install @vonage/vwc-menu@2.43.0
Install via package.json:
"@vonage/vwc-menu": "2.43.0"
About this version
vwc-menu
is a surfacing menu component, showing up on demand, eg upon user action.
vwc-menu
fetured with an internal list, while all LightDOM elements of it become children of that list.
This component is an extension of <mwc-menu>.
Usage example:
<vwc-menu>
<vwc-list-item>Item 1</vwc-list-item>
<vwc-list-item>Item 2</vwc-list-item>
<vwc-list-item>Item 3</vwc-list-item>
<vwc-list-item>Item 4</vwc-list-item>
</vwc-menu>
vwc-list-item
should be used for the menu items, putting any of you custom content within, including rich HTML if needed.
It is still consumer's responsibility to initiate
vwc-list-item
, as any other Vivid component.
Initiate vwc-menu
to be available in your component/application:
import '@vonage/vwc-menu';
// or, to be able to use casting in TypeScript, do
import { VWCMenu } from '@vonage/vwc-menu';
import '@vonage/vwc-list/vwc-list-item.js';
vwc-menu
exposes several APIs to provide its fuctionality, namely properties, methods and events.
Property | Modifiers | Type | Description |
---|---|---|---|
absolute |
boolean |
||
activatable |
boolean |
||
anchor |
HTMLElement | null |
||
corner |
"TOP_LEFT" | "TOP_RIGHT" | "BOTTOM_LEFT" | "BOTTOM_RIGHT" | "TOP_START" | "TOP_END" | "BOTTOM_START" | "BOTTOM_END" |
||
defaultFocus |
"NONE" | "LIST_ROOT" | "FIRST_ITEM" | "LAST_ITEM" |
||
fixed |
boolean |
||
forceGroupSelection |
boolean |
||
fullwidth |
boolean |
||
index |
readonly | MWCListIndex |
|
innerRole |
"menu" | "listbox" |
||
items |
readonly | ListItemBase[] |
|
menuCorner |
MenuCorner |
||
multi |
boolean |
||
open |
boolean |
||
quick |
boolean |
||
selected |
readonly | ListItemBase | ListItemBase[] | null |
|
slotElement |
HTMLSlotElement | null |
||
wrapFocus |
boolean |
||
x |
number | null |
||
y |
number | null |
Method | Type |
---|---|
close |
(): void |
focusItemAtIndex |
(index: number): void |
getFocusedItemIndex |
(): number |
layout |
(updateItems?: boolean | undefined): void |
select |
(index: MWCListIndex): void |
show |
(): void |
Event | Description |
---|---|
action |
{ActionDetail} |
closed |
|
items-updated |
|
opened |
|
selected |
{SelectedDetail} |
Using the menu's fixed
or absolute
properties will position the menu relative to the window or ancestor (absolute/relative) element respectively.
If the menu doesn't show up in the right position, make sure that an ancestor element exists and positioned correctly, and that an anchor
property is defined, along with corner
and menuCorner
. For more information, please refer to MWC's documentation where you can find a live demo.