CommandPalette 컴포넌트 — sgcHTML | eSeGeCe

CommandPalette

TsgcHTMLComponent_CommandPalette — VS Code, Slack, Linear에서 익숙한 Ctrl+K / Cmd+K 오버레이 실행기로, 부분 문자열 우선 퍼지 필터링, 카테고리 및 서버 라우팅 액션을 제공합니다. Delphi, C++ Builder 및 .NET에서 사용할 수 있습니다.

TsgcHTMLComponent_CommandPalette

AddItem 또는 Items.Add로 항목을 추가한 다음 HTML 속성을 읽습니다. Ctrl+K(또는 Cmd+K)로 오버레이를 열고, 입력하면 필터링되며, Enter로 선택 항목을 실행합니다.

컴포넌트 클래스

TsgcHTMLComponent_CommandPalette

렌더링

숨김 Ctrl+K 오버레이 + 인라인 스크립트

언어

Delphi, C++ Builder, .NET

항목을 추가하고 Ctrl+K를 누르세요

항목은 클라이언트 측에서 필터링하기 위해 브라우저로 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

주요 속성 및 메서드

가장 자주 사용하게 되는 멤버.

Items

TsgcHTMLCommandItem 항목의 컬렉션으로, Caption, Description, Icon, Href, DataAction, Shortcut(표시 전용), CategoryEnabled를 포함합니다.

AddItem

항목 하나를 추가하고 이를 반환하는 편의 메서드로, 이후에도 Icon/Description을 설정할 수 있습니다.

HotKey / HotKeyCtrl / HotKeyMeta

단일 문자와 보조키의 조합입니다. Ctrl과 Meta 모두 기본값이 True이므로 Ctrl+K와 Cmd+K가 별도 설정 없이 모두 열립니다.

MaxResults

기본값은 10입니다. 0으로 설정하면 일치하는 모든 항목이 한 번에 표시됩니다.

ShowCategories

기본값은 True이며, 목록을(알파벳순이 아닌) 처음 등장한 순서대로 제목 아래에 그룹화합니다.

WSSend / Action

명령을 실행하면 항상 sgc:command DOM 이벤트가 발생하며, 둘 중 하나가 설정된 경우 sgcHTMX WebSocket 브리지로 전송하거나 Action으로 POST합니다.

계속 살펴보기

온라인 도움말이 컴포넌트의 전체 API 참조 및 사용 가이드입니다.
모든 sgcHTML 컴포넌트80개 이상의 컴포넌트 전체 기능 매트릭스를 둘러보십시오.
무료 체험판 다운로드30일 체험판에는 60.HTML 데모 프로젝트가 포함됩니다.
가격전체 소스 코드가 포함된 Single, Team 및 Site 라이선스.
최고의 가성비: All-Access모든 eSeGeCe 제품과 프리미엄 지원이 포함되어 연 €1,059부터 이용할 수 있어요.
All-Access 가격 보기

시작할 준비가 되셨습니까?

무료 체험판을 다운로드하고 Delphi, C++ Builder 및 .NET에서 웹 UI를 구축하기 시작하십시오.