Naughty Program Manipulator

    @vonage/vwc-menu
    TypeScript icon, indicating that this package has built-in type declarations

    2.36.0 • Public • Published

    vwc-menu

    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

    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';

    API

    vwc-menu exposes several APIs to provide its fuctionality, namely properties, methods and events.

    Properties

    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

    Methods

    Method Type
    close (): void
    focusItemAtIndex (index: number): void
    getFocusedItemIndex (): number
    layout (updateItems?: boolean | undefined): void
    select (index: MWCListIndex): void
    show (): void

    Events

    Event Description
    action {ActionDetail}
    closed
    items-updated
    opened
    selected {SelectedDetail}

    Notice

    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.

    Keywords

    none

    Install

    npm i @vonage/vwc-menu

    DownloadsWeekly Downloads

    710

    Version

    2.36.0

    License

    ISC

    Unpacked Size

    25.8 kB

    Total Files

    9

    Last publish

    Collaborators

    • jeffswartz
    • rhainer
    • deliajolt
    • behaze
    • raulkg
    • liranbin
    • javiermolsanz
    • agus-vonage
    • yonatan.kra
    • v-kpheng
    • vgai-dev
    • nitzanhardon
    • eportolanvonage
    • web-il
    • iceberg-team
    • yinon
    • unified_portal
    • vreporter-npm
    • vbcbe
    • voxip_team
    • gunifydevops
    • yuri.guller
    • idanvon
    • nexmo-devrel
    • vvd
    • vonagemeetings
    • tweinfeld
    • vonage-jenkins
    • maikthomas
    • germangol
    • ashwinvprabhu
    • arivonage