CommandPalette 组件 — sgcHTML | eSeGeCe

CommandPalette

TsgcHTMLComponent_CommandPalette — 一个如 VS Code、Slack 和 Linear 中那样熟悉的 Ctrl+K / Cmd+K 覆盖层启动器,具有先子串匹配、再模糊匹配的筛选方式、分类以及服务器路由的操作,适用于 Delphi、C++ Builder 和 .NET。

TsgcHTMLComponent_CommandPalette

使用 AddItemItems.Add 添加条目,然后读取 HTML 属性;Ctrl+K(或 Cmd+K)会打开覆盖层,输入内容进行筛选,Enter 键激活所选项。

组件类

TsgcHTMLComponent_CommandPalette

渲染为

隐藏的 Ctrl+K 覆盖层 + 内联脚本

语言

Delphi, C++ Builder, .NET

添加条目,按下 Ctrl+K

条目在服务器端渲染为标记,而不是作为 JSON 发送到浏览器在客户端进行筛选,因此每个标题都恰好经过一次 HTML 编码。

uses
  sgcHTML_Component_CommandPalette;

var
  oPalette: TsgcHTMLComponent_CommandPalette;
begin
  oPalette := TsgcHTMLComponent_CommandPalette.Create(nil);
  try
    oPalette.PaletteID := 'app_commands';

    oPalette.AddItem('New Invoice', '/invoices/new', 'invoice:new', 'Create', 'Ctrl+N');
    oPalette.AddItem('Customer Search', '/customers', '', 'Navigate');
    with oPalette.Items.Add do
    begin
      Caption := 'Export Report';
      Icon := 'bi bi-download';
      DataAction := 'report:export';
      Category := 'Actions';
    end;

    WebModule.Response := oPalette.HTML;   // hidden overlay + inline script
  finally
    oPalette.Free;
  end;
end;
// includes: sgcHTML_Component_CommandPalette.hpp

TsgcHTMLComponent_CommandPalette *oPalette = new TsgcHTMLComponent_CommandPalette(NULL);
try
{
  oPalette->PaletteID = "app_commands";

  oPalette->AddItem("New Invoice", "/invoices/new", "invoice:new", "Create", "Ctrl+N");

  TsgcHTMLCommandItem *oItem = oPalette->Items->Add();
  oItem->Caption = "Export Report";
  oItem->Icon = "bi bi-download";
  oItem->DataAction = "report:export";
  oItem->Category = "Actions";

  String html = oPalette->HTML;   // hidden overlay + inline script
}
__finally
{
  delete oPalette;
}
using esegece.sgcWebSockets;

var palette = new TsgcHTMLComponent_CommandPalette();
palette.PaletteID = "app_commands";

palette.AddItem("New Invoice", "/invoices/new", "invoice:new", "Create", "Ctrl+N");

var item = palette.Items.Add();
item.Caption = "Export Report";
item.Icon = "bi bi-download";
item.DataAction = "report:export";
item.Category = "Actions";

string html = palette.HTML;   // hidden overlay + inline script

关键属性与方法

您最常使用的成员。

Items

TsgcHTMLCommandItem 条目组成的集合:CaptionDescriptionIconHrefDataActionShortcut(仅用于显示)、CategoryEnabled

AddItem

便捷方法,用于追加一个条目并返回该条目,以便之后仍可设置 Icon/Description

HotKey / HotKeyCtrl / HotKeyMeta

单个字符加修饰键;Ctrl 和 Meta 默认均为 True,因此开箱即用地支持 Ctrl+K 和 Cmd+K 两种方式打开。

MaxResults

默认值为 10;设为 0 时会一次显示所有匹配的条目。

ShowCategories

默认值为 True,按条目首次出现的顺序(而非字母顺序)将列表分组显示在标题下。

WSSend / Action

激活某个命令时始终会触发一个 sgc:command DOM 事件;设置其中任一项后,还会通过 sgcHTMX WebSocket 桥推送或 POST 到 Action

继续探索

在线帮助此组件的完整 API 参考和使用指南。
所有 sgcHTML 组件浏览 80 多个组件的完整功能矩阵。
下载免费试用版30 天试用版附带 60.HTML 演示项目。
价格Single、Team 和 Site 授权,均含完整源代码。
超值之选:All-AccesseSeGeCe 全部产品,含高级支持,每年 €1,059 起。
查看 All-Access 价格

准备好开始了吗?

下载免费试用版,开始在 Delphi、C++ Builder 和 .NET 中构建 Web 界面。