mirror of
https://github.com/wavetermdev/waveterm.git
synced 2025-11-28 05:00:26 +08:00
141 lines
2.9 KiB
Markdown
141 lines
2.9 KiB
Markdown
# Context Menu Quick Reference
|
|
|
|
This guide provides a quick overview of how to create and display a context menu using our system.
|
|
|
|
---
|
|
|
|
## ContextMenuItem Type
|
|
|
|
Define each menu item using the `ContextMenuItem` type:
|
|
|
|
```ts
|
|
type ContextMenuItem = {
|
|
label?: string;
|
|
type?: "separator" | "normal" | "submenu" | "checkbox" | "radio";
|
|
role?: string; // Electron role (optional)
|
|
click?: () => void; // Callback for item selection (not needed if role is set)
|
|
submenu?: ContextMenuItem[]; // For nested menus
|
|
checked?: boolean; // For checkbox or radio items
|
|
visible?: boolean;
|
|
enabled?: boolean;
|
|
sublabel?: string;
|
|
};
|
|
```
|
|
|
|
---
|
|
|
|
## Import and Show the Menu
|
|
|
|
Import the context menu module:
|
|
|
|
```ts
|
|
import { ContextMenuModel } from "@/app/store/contextmenu";
|
|
```
|
|
|
|
To display the context menu, call:
|
|
|
|
```ts
|
|
ContextMenuModel.showContextMenu(menu, event);
|
|
```
|
|
|
|
- **menu**: An array of `ContextMenuItem`.
|
|
- **event**: The mouse event that triggered the context menu (typically from an onContextMenu handler).
|
|
|
|
---
|
|
|
|
## Basic Example
|
|
|
|
A simple context menu with a separator:
|
|
|
|
```ts
|
|
const menu: ContextMenuItem[] = [
|
|
{
|
|
label: "New File",
|
|
click: () => {
|
|
/* create a new file */
|
|
},
|
|
},
|
|
{
|
|
label: "New Folder",
|
|
click: () => {
|
|
/* create a new folder */
|
|
},
|
|
},
|
|
{ type: "separator" },
|
|
{
|
|
label: "Rename",
|
|
click: () => {
|
|
/* rename item */
|
|
},
|
|
},
|
|
];
|
|
|
|
ContextMenuModel.showContextMenu(menu, e);
|
|
```
|
|
|
|
---
|
|
|
|
## Example with Submenu and Checkboxes
|
|
|
|
Toggle settings using a submenu with checkbox items:
|
|
|
|
```ts
|
|
const isClearOnStart = true; // Example setting
|
|
|
|
const menu: ContextMenuItem[] = [
|
|
{
|
|
label: "Clear Output On Restart",
|
|
submenu: [
|
|
{
|
|
label: "On",
|
|
type: "checkbox",
|
|
checked: isClearOnStart,
|
|
click: () => {
|
|
// Set the config to enable clear on restart
|
|
},
|
|
},
|
|
{
|
|
label: "Off",
|
|
type: "checkbox",
|
|
checked: !isClearOnStart,
|
|
click: () => {
|
|
// Set the config to disable clear on restart
|
|
},
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
ContextMenuModel.showContextMenu(menu, e);
|
|
```
|
|
|
|
---
|
|
|
|
## Editing a Config File Example
|
|
|
|
Open a configuration file (e.g., `widgets.json`) in preview mode:
|
|
|
|
```ts
|
|
{
|
|
label: "Edit widgets.json",
|
|
click: () => {
|
|
fireAndForget(async () => {
|
|
const path = `${getApi().getConfigDir()}/widgets.json`;
|
|
const blockDef: BlockDef = {
|
|
meta: { view: "preview", file: path },
|
|
};
|
|
await createBlock(blockDef, false, true);
|
|
});
|
|
},
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Summary
|
|
|
|
- **Menu Definition**: Use the `ContextMenuItem` type.
|
|
- **Actions**: Use `click` for actions; use `submenu` for nested options.
|
|
- **Separators**: Use `type: "separator"` to group items.
|
|
- **Toggles**: Use `type: "checkbox"` or `"radio"` with the `checked` property.
|
|
- **Displaying**: Use `ContextMenuModel.showContextMenu(menu, event)` to render the menu.
|