CommandPalette Component — sgcHTML | eSeGeCe

CommandPalette

TsgcHTMLComponent_CommandPalette — il launcher overlay Ctrl+K / Cmd+K familiare a chi usa VS Code, Slack e Linear, con filtro per sottostringa e poi fuzzy, categorie e azioni instradate al server, in Delphi, C++ Builder e .NET.

TsgcHTMLComponent_CommandPalette

Aggiungi le voci con AddItem o Items.Add, quindi leggi la proprietà HTML; Ctrl+K (o Cmd+K) apre l’overlay, la digitazione lo filtra, Invio attiva la selezione.

Classe del componente

TsgcHTMLComponent_CommandPalette

Renderizza

Overlay Ctrl+K nascosto + script inline

Linguaggi

Delphi, C++ Builder, .NET

Aggiungi le voci, premi Ctrl+K

Le voci vengono renderizzate come markup sul server, non inviate al browser come JSON da filtrare lato client, quindi ogni didascalia viene codificata in HTML esattamente una volta.

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

Proprietà e metodi principali

I membri che utilizzerai più spesso.

Items

Collezione di voci TsgcHTMLCommandItem: Caption, Description, Icon, Href, DataAction, Shortcut (solo visualizzazione), Category ed Enabled.

AddItem

Metodo di comodo che aggiunge una voce e la restituisce, così puoi comunque impostare Icon/Description in seguito.

HotKey / HotKeyCtrl / HotKeyMeta

Un singolo carattere più i modificatori; sia Ctrl che Meta sono predefiniti su True, quindi sia Ctrl+K sia Cmd+K lo aprono già pronti all’uso.

MaxResults

Predefinito 10; 0 mostra tutte le voci corrispondenti in una volta.

ShowCategories

Predefinito True, raggruppa l’elenco sotto intestazioni nell’ordine di prima comparsa (non alfabetico).

WSSend / Action

Attivare un comando genera sempre un evento DOM sgc:command, e invia tramite il bridge WebSocket sgcHTMX o con POST a Action quando una delle due è impostata.

Continua a esplorare

Guida in lineaRiferimento API completo e guida all’uso per questo componente.
Tutti i componenti sgcHTMLEsplora la matrice completa delle funzionalità di oltre 80 componenti.
Scarica la Prova GratuitaLa prova di 30 giorni include i progetti demo 60.HTML.
PrezziLicenze Single, Team e Site con codice sorgente completo.
La scelta più conveniente: All-AccessTutti i prodotti eSeGeCe, con Supporto Premium incluso, a partire da €1,059/anno.
Vedi i prezzi All-Access

Pronto a Iniziare?

Scarica la versione di prova gratuita e inizia a creare interfacce web in Delphi, C++ Builder e .NET.