Splitter
TsgcHTMLComponent_Splitter — render two resizable panes with a draggable gutter, horizontal or vertical, with an optional persisted position, in Delphi, C++ Builder and .NET.
TsgcHTMLComponent_Splitter — render two resizable panes with a draggable gutter, horizontal or vertical, with an optional persisted position, in Delphi, C++ Builder and .NET.
Fill pane A and pane B with raw HTML, set the orientation and starting split, then read the HTML property.
TsgcHTMLComponent_Splitter
Flex panes + gutter + scoped CSS + pointer-drag script
Delphi, C++ Builder, .NET
Push raw markup into each pane with AddPaneA / AddPaneB, set Orientation, InitialSplit and the pixel floors, then read 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 scriptThe members you reach for most often.
AddPaneA(aHTML) / AddPaneB(aHTML) append raw HTML markup to the left/top pane or the right/bottom pane.
Orientation is soHorizontal (side-by-side, drag left/right) or soVertical (stacked, drag up/down).
InitialSplit is the divider's starting position, as a percentage (0-100) of pane A.
MinSizeA / MinSizeB are pixel floors enforced while dragging; GutterSize sets the width of the draggable gutter itself.
When PersistKey is set, the last dragged position is remembered per-browser via localStorage and restored on the next render.
Height sets the fixed height of the split area; HTML returns the panes, gutter and the pointer-event drag script.
| Online HelpFull API reference and usage guide for this component. | Open | |
| All sgcHTML ComponentsBrowse the full feature matrix of 80+ components. | Open | |
| Download Free TrialThe 30-day trial ships the 60.HTML demo projects. | Open | |
| PricingSingle, Team and Site licenses with full source code. | Open |