Splitter
TsgcHTMLComponent_Splitter — Delphi, C++ Builder 및 .NET에서 드래그 가능한 구분선을 가진 크기 조절이 가능한 두 개의 패널을 가로 또는 세로로 렌더링하며, 위치를 선택적으로 저장할 수 있습니다.
TsgcHTMLComponent_Splitter — Delphi, C++ Builder 및 .NET에서 드래그 가능한 구분선을 가진 크기 조절이 가능한 두 개의 패널을 가로 또는 세로로 렌더링하며, 위치를 선택적으로 저장할 수 있습니다.
패널 A와 패널 B를 원시 HTML로 채우고, 방향과 시작 분할 비율을 설정한 다음, HTML 속성을 읽습니다.
TsgcHTMLComponent_Splitter
Flex 패널 + 구분선 + 범위 지정 CSS + 포인터 드래그 스크립트
Delphi, C++ Builder, .NET
AddPaneA / AddPaneB로 각 패널에 원시 마크업을 채우고, Orientation, InitialSplit 및 픽셀 하한을 설정한 다음, HTML을 읽습니다.
uses
sgcHTML_Component_Splitter;
var
oSplitter: TsgcHTMLComponent_Splitter;
begin
oSplitter := TsgcHTMLComponent_Splitter.Create(nil);
try
oSplitter.SplitterID := 'workspace';
oSplitter.Orientation := soHorizontal;
oSplitter.InitialSplit := 30;
oSplitter.MinSizeA := 180;
oSplitter.MinSizeB := 320;
oSplitter.GutterSize := 8;
oSplitter.Height := '560px';
oSplitter.PersistKey := 'workspace-split';
oSplitter.AddPaneA('<div class="p-3"><h5>Files</h5>...</div>');
oSplitter.AddPaneB('<div class="p-3"><h5>Editor</h5>...</div>');
WebModule.Response := oSplitter.HTML; // two panes + gutter + scoped CSS + drag script
finally
oSplitter.Free;
end;
end;// includes: sgcHTML_Component_Splitter.hpp
TsgcHTMLComponent_Splitter *oSplitter = new TsgcHTMLComponent_Splitter(NULL);
try
{
oSplitter->SplitterID = "workspace";
oSplitter->Orientation = soHorizontal;
oSplitter->InitialSplit = 30;
oSplitter->MinSizeA = 180;
oSplitter->MinSizeB = 320;
oSplitter->GutterSize = 8;
oSplitter->Height = "560px";
oSplitter->PersistKey = "workspace-split";
oSplitter->AddPaneA("<div class=\"p-3\"><h5>Files</h5>...</div>");
oSplitter->AddPaneB("<div class=\"p-3\"><h5>Editor</h5>...</div>");
String html = oSplitter->HTML; // two panes + gutter + scoped CSS + drag script
}
__finally
{
delete oSplitter;
}using esegece.sgcWebSockets;
var splitter = new TsgcHTMLComponent_Splitter();
splitter.SplitterID = "workspace";
splitter.Orientation = TsgcHTMLSplitterOrientation.soHorizontal;
splitter.InitialSplit = 30;
splitter.MinSizeA = 180;
splitter.MinSizeB = 320;
splitter.GutterSize = 8;
splitter.Height = "560px";
splitter.PersistKey = "workspace-split";
splitter.AddPaneA("<div class=\"p-3\"><h5>Files</h5>...</div>");
splitter.AddPaneB("<div class=\"p-3\"><h5>Editor</h5>...</div>");
string html = splitter.HTML; // two panes + gutter + scoped CSS + drag script가장 자주 사용하게 되는 멤버.
AddPaneA(aHTML) / AddPaneB(aHTML)는 왼쪽/상단 패널 또는 오른쪽/하단 패널에 원시 HTML 마크업을 추가합니다.
Orientation은 soHorizontal(나란히 배치, 좌우로 드래그) 또는 soVertical(위아래로 쌓기, 상하로 드래그)입니다.
InitialSplit은 분할선의 시작 위치를 패널 A 기준 백분율(0-100)로 나타냅니다.
MinSizeA / MinSizeB는 드래그 중 적용되는 픽셀 하한이며, GutterSize는 드래그 가능한 구분선 자체의 너비를 설정합니다.
PersistKey가 설정되면 마지막으로 드래그한 위치가 브라우저별로 localStorage를 통해 기억되어 다음 렌더링 시 복원됩니다.
Height는 분할 영역의 고정 높이를 설정하며, HTML은 패널, 구분선 및 포인터 이벤트 드래그 스크립트를 반환합니다.