Komponent CommandPalette — sgcHTML | eSeGeCe

CommandPalette

TsgcHTMLComponent_CommandPalette — nakładkowy launcher Ctrl+K / Cmd+K znany z VS Code, Slacka i Lineara, z filtrowaniem najpierw po podciągu, a potem rozmytym, kategoriami i akcjami kierowanymi po stronie serwera, w Delphi, C++ Builder i .NET.

TsgcHTMLComponent_CommandPalette

Dodaj pozycje za pomocą AddItem lub Items.Add, a następnie odczytaj właściwość HTML; Ctrl+K (lub Cmd+K) otwiera nakładkę, pisanie ją filtruje, Enter aktywuje zaznaczenie.

Klasa komponentu

TsgcHTMLComponent_CommandPalette

Renderuje

Ukryta nakładka Ctrl+K + skrypt wbudowany

Języki

Delphi, C++ Builder, .NET

Dodaj pozycje, naciśnij Ctrl+K

Pozycje są renderowane jako znaczniki po stronie serwera, a nie wysyłane do przeglądarki jako JSON do filtrowania po stronie klienta, więc każdy podpis jest kodowany do HTML dokładnie raz.

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

Kluczowe właściwości i metody

Składniki, po które sięgasz najczęściej.

Items

Kolekcja pozycji TsgcHTMLCommandItem: Caption, Description, Icon, Href, DataAction, Shortcut (tylko do wyświetlania), Category i Enabled.

AddItem

Metoda pomocnicza dodająca jedną pozycję i zwracająca ją, dzięki czemu można później ustawić jeszcze Icon/Description.

HotKey / HotKeyCtrl / HotKeyMeta

Pojedynczy znak plus modyfikatory; zarówno Ctrl, jak i Meta domyślnie mają wartość True, więc zarówno Ctrl+K, jak i Cmd+K otwierają go od razu po instalacji.

MaxResults

Domyślnie 10; 0 pokazuje jednocześnie wszystkie pasujące pozycje.

ShowCategories

Domyślnie True, grupuje listę pod nagłówkami w kolejności pierwszego wystąpienia (nie alfabetycznie).

WSSend / Action

Aktywacja polecenia zawsze wyzwala zdarzenie DOM sgc:command, a gdy ustawiona jest którakolwiek z tych właściwości, wysyła dane przez most WebSocket sgcHTMX lub POST-em do Action.

Poznawaj dalej

Pomoc onlinePełna dokumentacja API i przewodnik użytkowania tego komponentu.
Wszystkie komponenty sgcHTMLPrzejrzyj pełną matrycę funkcji 80+ komponentów.
Pobierz bezpłatną wersję próbną30-dniowa wersja próbna zawiera projekty demonstracyjne 60.HTML.
CennikLicencje Single, Team i Site z pełnym kodem źródłowym.
Najkorzystniejsza oferta: All-AccessWszystkie produkty eSeGeCe, ze wsparciem Premium w cenie, już od €1,059 rocznie.
Zobacz cennik All-Access

Gotowy, aby zacząć?

Pobierz bezpłatną wersję próbną i zacznij budować interfejsy webowe w Delphi, C++ Builder i .NET.