Skip to content

CommandItem

CommandItem is the definition of a custom menu, tool or shortcut, and is applied to the following interfaces:

  • pixso.setTopTools(tools: Tool[]): void
  • pixso.setTopLeftTools(tools: Tool[]): void
  • pixso.setBottomTools(tools: Tool[]): void
  • pixso.stickyToolbar.open(tools: Tool[]): void
  • pixso.setContextMenus(menus: ContextMenuItem[]): void
  • pixso.setShortcuts(shortcuts: ShortcutItem[]): void
typescript
interface CommandItem = {
  label: string;
  value: string;
  disabled?: boolean;
  description?: string;
  icon?: string | Uint8Array; // svg string or image binary data. PS: When iconUrl also exists, icon data will be used first.
  iconUrl?: string;
  size?: number; // Icon size, supported by top-left tools only.
  tippy?: {
    showOnCreate?: boolean; // Whether to show the tooltip when created, supported by top-left tools only.
    maxWidth?: number; // Tooltip max width, supported by top-left tools only.
    placement?: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end"; // Tooltip placement. Defaults to "bottom". Supported by top-left tools only.
  };
  guide?: {
    // A persistent guide bubble (PxGuideCard) anchored to the tool icon. Supported by top-left tools only.
    // When enabled, the bubble does not auto-dismiss and only closes when the user clicks the close button
    // or clicks the tool icon. The closed state is not persisted.
    enabled: boolean;
    title?: string;
    content?: string; // Body text. Falls back to label when omitted.
    closeText?: string; // Close button text. Defaults to "我知道了".
  };
  children: Array<CommandItem>
};

type CommandItemWithoutIcon = Omit<CommandItem, "icon" | "iconUrl">;

type SeparatorItem = {
  separator: true;
};

ToolItem

typescript
type ToolItem =
  | SeparatorItem
  | (CommandItem & {
      children?: Array<ToolItem>;
    });

ContextMenuItem

typescript
type ContextMenuItem =
  | SeparatorItem
  | (CommandItemWithoutIcon & {
      children?: Array<ContextMenuItem>;
    });

ShortcutItem

typescript
type SubShortcutItem = CommandItemWithoutIcon & {
  children?: Array<SubShortcutItem>;
};

type ShortcutItem = CommandItem & {
  children?: Array<SubShortcutItem>;
};