@jimka/typescript-ui

Appearance

MenuBar ​

MenuBar is the top-of-window menu bar — File, Edit, View, etc. Construct it with a config array describing each top-level entry; the bar handles dropdown panels, keyboard navigation, and submenus internally.

Usage ​

typescript
import { Body } from '@jimka/typescript-ui/core';
import { MenuBar } from '@jimka/typescript-ui/component/menubar';
const bar = MenuBar([
    { label: 'File', items: [
        { text: 'New',       shortcut: 'Ctrl+N', action: () => newFile() },
        { text: 'Open…',     shortcut: 'Ctrl+O', action: () => openFile() },
        { separator: true },
        { text: 'Quit', enabled: false },
    ]},
    { label: 'Edit', items: [
        { text: 'Undo', shortcut: 'Ctrl+Z', action: () => undo() },
        { text: 'Redo', shortcut: 'Ctrl+Y', action: () => redo() },
    ]},
]);

Body.getInstance().addComponent(bar);

Config shape ​

The config is MenuConfig[] (see MenuConfig).

Each entry has:

  • label — bar button text.
  • glyph (optional) — registry Glyph name displayed to the left of the bar button's label (e.g. "file", "pen-to-square", "eye", "info-circle").
  • items — array of MenuItemConfig entries.

Each MenuItemConfig supports:

FieldPurpose
textDisplay label.
actionCalled when the item is activated (click or Enter).
enabledDefaults to true. Disabled items are dimmed.
shortcutHint string displayed on the right (e.g. "Ctrl+S").
glyphRegistry Glyph name displayed on the left. Takes precedence over icon when both are set.
iconLegacy single-character icon displayed on the left. Prefer glyph.
submenuNested MenuConfig; opens a child panel instead of calling action.
separatorWhen true, render a horizontal rule and ignore other fields.

Notes ​

  • The shortcut field is purely a visual hint — wire the actual keyboard binding yourself, e.g. via Event.addListener(window, 'keydown', …).
  • Nested submenu panels open after a 150 ms hover delay — see MenuItem.

See also ​