CommandPalette
TsgcHTMLComponent_CommandPalette — 一个如 VS Code、Slack 和 Linear 中那样熟悉的 Ctrl+K / Cmd+K 覆盖层启动器,具有先子串匹配、再模糊匹配的筛选方式、分类以及服务器路由的操作,适用于 Delphi、C++ Builder 和 .NET。
TsgcHTMLComponent_CommandPalette — 一个如 VS Code、Slack 和 Linear 中那样熟悉的 Ctrl+K / Cmd+K 覆盖层启动器,具有先子串匹配、再模糊匹配的筛选方式、分类以及服务器路由的操作,适用于 Delphi、C++ Builder 和 .NET。
使用 AddItem 或 Items.Add 添加条目,然后读取 HTML 属性;Ctrl+K(或 Cmd+K)会打开覆盖层,输入内容进行筛选,Enter 键激活所选项。
TsgcHTMLComponent_CommandPalette
隐藏的 Ctrl+K 覆盖层 + 内联脚本
Delphi, C++ Builder, .NET
条目在服务器端渲染为标记,而不是作为 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
您最常使用的成员。
由 TsgcHTMLCommandItem 条目组成的集合:Caption、Description、Icon、Href、DataAction、Shortcut(仅用于显示)、Category 和 Enabled。
便捷方法,用于追加一个条目并返回该条目,以便之后仍可设置 Icon/Description。
单个字符加修饰键;Ctrl 和 Meta 默认均为 True,因此开箱即用地支持 Ctrl+K 和 Cmd+K 两种方式打开。
默认值为 10;设为 0 时会一次显示所有匹配的条目。
默认值为 True,按条目首次出现的顺序(而非字母顺序)将列表分组显示在标题下。
激活某个命令时始终会触发一个 sgc:command DOM 事件;设置其中任一项后,还会通过 sgcHTMX WebSocket 桥推送或 POST 到 Action。