Splitter
TsgcHTMLComponent_Splitter — Delphi、C++ Builder、.NET で、ドラッグ可能なガターを持つ、水平または垂直の 2 つのリサイズ可能なペインを、任意で位置を保持しながらレンダリングします。
TsgcHTMLComponent_Splitter — Delphi、C++ Builder、.NET で、ドラッグ可能なガターを持つ、水平または垂直の 2 つのリサイズ可能なペインを、任意で位置を保持しながらレンダリングします。
ペイン 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 は、ペイン、ガター、ポインターイベントによるドラッグスクリプトを返します。