CommandPalette-component — sgcHTML | eSeGeCe

CommandPalette

TsgcHTMLComponent_CommandPalette — de Ctrl+K / Cmd+K overlay-launcher die je kent van VS Code, Slack en Linear, met eerst-substring-dan-fuzzy filtering, categorieën en server-gerouteerde acties, in Delphi, C++ Builder en .NET.

In één oogopslag

TsgcHTMLComponent_CommandPalette

Voeg items toe met AddItem of Items.Add en lees dan de HTML-eigenschap; Ctrl+K (of Cmd+K) opent de overlay, typen filtert hem, Enter activeert de selectie.

Componentklasse

TsgcHTMLComponent_CommandPalette

Rendert

Verborgen Ctrl+K-overlay + inline script

Familie

Overlays en feedback

Talen

Delphi, C++ Builder, .NET

QuickStart

Voeg items toe, druk op Ctrl+K

Items worden als markup op de server gerenderd, niet als JSON naar de browser gestuurd om client-side te filteren, zodat elke caption precies één keer HTML-geëncodeerd wordt.

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

Referentie

Belangrijkste eigenschappen en methoden

De members die je het vaakst gebruikt.

Items

Collectie van TsgcHTMLCommandItem-items: Caption, Description, Icon, Href, DataAction, Shortcut (alleen weergave), Category en Enabled.

AddItem

Hulpmethode die één item toevoegt en teruggeeft, zodat je Icon/Description achteraf nog kunt instellen.

HotKey / HotKeyCtrl / HotKeyMeta

Eén teken plus modifiers; zowel Ctrl als Meta staan standaard op True, zodat Ctrl+K en Cmd+K hem meteen openen.

MaxResults

Standaard 10; 0 toont elk overeenkomend item tegelijk.

ShowCategories

Standaard True, groepeert de lijst onder koppen in volgorde van eerste voorkomen (niet alfabetisch).

WSSend / Action

Het activeren van een commando verstuurt altijd een sgc:command DOM-gebeurtenis, en pusht via de sgcHTMX WebSocket-brug of POST't naar Action wanneer een van beide is ingesteld.

Bronnen

Blijf ontdekken

	Online helpVolledige API-referentie en gebruikshandleiding voor dit onderdeel.	Open
	Alle sgcHTML-componentenBlader door de volledige functiematrix van 80+ componenten.	Open
	Download gratis proefversieDe proefversie van 30 dagen bevat de 60.HTML-demoprojecten.	Open
	PrijzenSingle-, Team- en Site-licenties met volledige broncode.	Open

De beste deal: All-AccessElk eSeGeCe-product, inclusief Premium-ondersteuning, vanaf €1,059 per jaar.

Bekijk de All-Access-prijzen