Package com.vaadin.flow.component.contextmenu

Class GeneratedVaadinContextMenu<R extends GeneratedVaadinContextMenu<R>>

  • All Implemented Interfaces:
    AttachNotifier, ClickNotifier<R>, DetachNotifier, HasElement, HasStyle, Serializable
    Direct Known Subclasses:
    ContextMenuBase
    @Tag("vaadin-context-menu")
@NpmPackage(value="@vaadin/polymer-legacy-adapter",version="23.2.3") @NpmPackage(value="@vaadin/context-menu",version="23.2.3") @NpmPackage(value="@vaadin/vaadin-context-menu",version="23.2.3")
@JsModule("@vaadin/polymer-legacy-adapter/style-modules.js") @JsModule("@vaadin/context-menu/src/vaadin-context-menu.js") @JsModule("@vaadin/polymer-legacy-adapter/template-renderer.js")
public abstract class GeneratedVaadinContextMenu<R extends GeneratedVaadinContextMenu<R>>
extends Component
implements HasStyle, ClickNotifier<R>

    Description copied from corresponding location in WebComponent:

    <vaadin-context-menu> <template> <vaadin-list-box> <vaadin-item>First menu item</vaadin-item> <vaadin-item>Second menu item</vaadin-item> </vaadin-list-box> </template> </vaadin-context-menu>

    “vaadin-contextmenu” Gesture Event

    vaadin-contextmenu is a gesture event (a custom event fired by Polymer), which is dispatched after either contextmenu and long touch events. This enables support for both mouse and touch environments in a uniform way.

    <vaadin-context-menu> opens the menu overlay on the vaadin-contextmenu event by default.

    Menu Listener

    By default, the <vaadin-context-menu> element listens for the menu opening event on itself. In order to have a context menu on your content, wrap your content with the <vaadin-context-menu> element, and add a template element with a menu. Example:

    <vaadin-context-menu> <template> <vaadin-list-box> <vaadin-item>First menu item</vaadin-item> <vaadin-item>Second menu item</vaadin-item> </vaadin-list-box> </template>

    <p>This paragraph has the context menu provided in the above template.</p> <p>Another paragraph with the context menu.</p> </vaadin-context-menu>

    In case if you do not want to wrap the page content, you can listen for events on an element outside the <vaadin-context-menu> by setting the listenOn property:

    <vaadin-context-menu id="customListener"> <template> <vaadin-list-box> ... </vaadin-list-box> </template> </vaadin-context-menu>

    <div id="menuListener">The element that listens for the context menu.</div>

    &lt;script&gt; const contextMenu = document.querySelector('vaadin-context-menu#customListener'); contextMenu.listenOn = document.querySelector('#menuListener'); &lt;/script&gt;

    Filtering Menu Targets

    By default, the listener element and all its descendants open the context menu. You can filter the menu targets to a smaller set of elements inside the listener element by setting the selector property.

    In the following example, only the elements matching .has-menu will open the context menu:

    <vaadin-context-menu selector=".has-menu"> <template> <vaadin-list-box> ... </vaadin-list-box> </template>

    <p class="has-menu">This paragraph opens the context menu</p> <p>This paragraph does not open the context menu</p> </vaadin-context-menu>

    Menu Context

    You can bind to the following properties in the menu template:

    • target is the menu opening event target, which is the element that the user has called the context menu for
    • detail is the menu opening event detail

    In the following example, the menu item text is composed with the contents of the element that opened the menu:

    <vaadin-context-menu selector="li"> <template> <vaadin-list-box> <vaadin-item>The menu target: [[target.textContent]]</vaadin-item> </vaadin-list-box> </template>

    <ul> <li>Foo</li> <li>Bar</li> <li>Baz</li> </ul> </vaadin-context-menu>

    Styling

    See ThemableMixin – how to apply styles for shadow parts

    See Also:
    Serialized Form

    • Constructor Detail

      • GeneratedVaadinContextMenu

        public GeneratedVaadinContextMenu()

    • Method Detail

      • getSelectorString

        protected String getSelectorString()

        Description copied from corresponding location in WebComponent:

        CSS selector that can be used to target any child element of the context menu to listen for openOn events.

        This property is not synchronized automatically from the client side, so the returned value may not be the same as in client side.

        Returns:
        the selector property from the webcomponent

      • setSelector

        protected void setSelector​(String selector)

        Description copied from corresponding location in WebComponent:

        CSS selector that can be used to target any child element of the context menu to listen for openOn events.

        Parameters:
        selector - the String value to set

      • isOpenedBoolean

        @Synchronize(property="opened",
             value="opened-changed")
protected boolean isOpenedBoolean()

        Description copied from corresponding location in WebComponent:

        True if the overlay is currently displayed.

        This property is synchronized automatically from client side when a 'opened-changed' event happens.

        Returns:
        the opened property from the webcomponent

      • getOpenOnString

        protected String getOpenOnString()

        Description copied from corresponding location in WebComponent:

        Event name to listen for opening the context menu.

        This property is not synchronized automatically from the client side, so the returned value may not be the same as in client side.

        Returns:
        the openOn property from the webcomponent

      • setOpenOn

        protected void setOpenOn​(String openOn)

        Description copied from corresponding location in WebComponent:

        Event name to listen for opening the context menu.

        Parameters:
        openOn - the String value to set

      • getListenOnJsonObject

        protected elemental.json.JsonObject getListenOnJsonObject()

        Description copied from corresponding location in WebComponent:

        The target element that's listened to for context menu opening events. By default the vaadin-context-menu listens to the target's vaadin-contextmenu events.

        This property is not synchronized automatically from the client side, so the returned value may not be the same as in client side.

        Returns:
        the listenOn property from the webcomponent

      • setListenOn

        protected void setListenOn​(elemental.json.JsonObject listenOn)

        Description copied from corresponding location in WebComponent:

        The target element that's listened to for context menu opening events. By default the vaadin-context-menu listens to the target's vaadin-contextmenu events.

        Parameters:
        listenOn - the JsonObject value to set

      • getCloseOnString

        protected String getCloseOnString()

        Description copied from corresponding location in WebComponent:

        Event name to listen for closing the context menu.

        This property is not synchronized automatically from the client side, so the returned value may not be the same as in client side.

        Returns:
        the closeOn property from the webcomponent

      • setCloseOn

        protected void setCloseOn​(String closeOn)

        Description copied from corresponding location in WebComponent:

        Event name to listen for closing the context menu.

        Parameters:
        closeOn - the String value to set

      • close

        protected void close()

        Description copied from corresponding location in WebComponent:

        Closes the overlay.

      • open

        protected void open()

        Description copied from corresponding location in WebComponent:

        Opens the overlay.