Context Menu

Animated context menu component that does not require JavaScript coding for a basic use. This component is framework-agnostic, it will play nicely in combination with any UI framework.

Example

Usage

1. Import context-menu module

<script type="module">
import "https://zuixjs.github.io/zkit/lib/1.2/components/context-menu.module.js";
</script>

2. Add component to the page

Put inside the #menu field the code of your menu items.

<context-menu z-context="my-menu">

<div #menu>

<!-- menu items list -->
<button>Option 1</button>
<button>Option 2</button>
<button>Option 3</button>

</div>

</context-menu>

1. Include zuix.js library

If not already included, add the following line right before the end of the head section in the HTML document:

<script src="https://cdn.jsdelivr.net/npm/zuix-dist@1.1.13/js/zuix.min.js"></script>

2. Add component to the page

Put inside the #menu field the code of your menu items.

<div z-load="https://zuixjs.github.io/zkit/lib/1.2/components/context-menu"
z-context="my-menu">


<div #menu>

<!-- menu items list -->
<button>Option 1</button>
<button>Option 2</button>
<button>Option 3</button>

</div>

</div>

The context menu already provides basic styling for the button element, though you can use any kind of element and custom styling.

Option attributes

  • z-context="<context_id>" optional
    identifier name to be used to access this component from JavaScript.
  • :on:<event_name>="<handler>" optional
    set handler function for event <event_name>

Events

  • open - occurs when the menu opens
  • close - occurs when the menu is closed

Scripting

Get a reference to the component instance:

zuix.context('my-menu', (menu) => {
// store a global reference for later use
self.contextMenu = menu;
});

Programmatically show/hide:

// show the menu
contextMenu.show();

// hide the menu
contextMenu.hide();

Example

 
Next arrow_right 
Support this work
extension
zKit components v1.2.1
web enhancing bits