CommandPalette
TsgcHTMLComponent_CommandPalette — Delphi、C++ Builder、.NET で、VS Code、Slack、Linear でおなじみの Ctrl+K / Cmd+K オーバーレイランチャーをレンダリングします。部分一致からあいまい検索へと進むフィルタリング、カテゴリー分け、サーバーへルーティングされるアクションを備えています。
TsgcHTMLComponent_CommandPalette — Delphi、C++ Builder、.NET で、VS Code、Slack、Linear でおなじみの Ctrl+K / Cmd+K オーバーレイランチャーをレンダリングします。部分一致からあいまい検索へと進むフィルタリング、カテゴリー分け、サーバーへルーティングされるアクションを備えています。
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 を持ちます。
1 件のエントリを追加してそれを返す便利メソッドです。後から Icon や Description を設定することもできます。
1 文字とモディファイアキーの組み合わせです。Ctrl と Meta はどちらも既定値が True のため、Ctrl+K と Cmd+K の両方がそのまま利用できます。
既定値は 10 です。0 にすると、一致するすべてのエントリを一度に表示します。
既定値は True で、リストを見出しごとにグループ化します。順序はアルファベット順ではなく、最初に現れた順です。
コマンドを実行すると sgc:command の DOM イベントが常に発火し、いずれかを設定していれば sgcHTMX の WebSocket ブリッジ経由でプッシュするか Action に POST します。