context-menu

Create and display Wave Terminal context menus with TypeScript.

22.0k|1.1k|Updated Jun 8, 2022
One-click install
npx skills add https://github.com/wavetermdev/waveterm --skill context-menu
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: context-menu
Source: https://github.com/wavetermdev/waveterm/tree/main/.kilocode/skills/context-menu
Command: npx skills add https://github.com/wavetermdev/waveterm --skill context-menu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides clear guidance and examples for implementing context menus within the Wave Terminal application, enabling users to interact with elements through right-click menus.

Core Features & Use Cases

  • Context Menu Definition: Learn how to define menu items using the ContextMenuItem type, including labels, types (separator, normal, submenu, checkbox, radio), and actions.
  • Menu Display: Understand how to import and use the ContextMenuModel to show menus based on user interactions.
  • Advanced Features: Implement submenus, checkbox/radio items for settings, and dynamic visibility/enabled states.
  • Use Case: When a user right-clicks on a file in the file explorer, a context menu appears allowing them to "Open", "Rename", "Delete", or "Copy Path".

Quick Start

Use the context-menu skill to create a new file menu item with a click handler.

Frequently Asked Questions about context-menu

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a context menu in Wave Terminal using TypeScript?

To create a context menu in Wave Terminal, define menu items using the ContextMenuItem type with labels and types, then invoke `ContextMenuModel.getInstance().showContextMenu` to display it on right-click interactions.

What types of context menu items can I define for a user interface?

You can define several context menu item types including 'separator', 'normal', 'submenu', 'checkbox', and 'radio' to structure menus with standard actions, nested options, or settings toggles.

How do I add a submenu to a right-click menu in a TypeScript application?

To add a submenu to a right-click menu, define a ContextMenuItem with the type set to 'submenu' and provide nested child items, allowing users to access secondary options through a main menu entry.

Can I implement checkbox or radio items for settings toggles in a context menu?

Yes, you can implement checkbox and radio item types within your ContextMenuItem definitions to create interactive settings toggles directly inside the right-click context menu.

How do I trigger a file operations menu when a user right-clicks in the UI?

You trigger a file operations menu by capturing the right-click event and calling `ContextMenuModel.getInstance().showContextMenu` with defined items like Open, Rename, Delete, or Copy Path.

Does the context menu guide support dynamic visibility and enabled states for menu items?

Yes, the context menu guide covers implementing dynamic visibility and enabled states, allowing you to control when specific menu items appear or become clickable based on application logic.