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.
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.29/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 opensclose- 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();