Splitter 组件 — sgcHTML | eSeGeCe

Splitter

TsgcHTMLComponent_Splitter — 渲染两个可通过可拖动分隔条调整大小的面板,支持水平或垂直方向,可选择保存分隔位置,适用于 Delphi、C++ Builder 和 .NET。

TsgcHTMLComponent_Splitter

用原始 HTML 填充面板 A 和面板 B,设置方向和起始分隔位置,然后读取 HTML 属性。

组件类

TsgcHTMLComponent_Splitter

渲染为

Flex 面板 + 分隔条 + 作用域 CSS + 指针拖动脚本

语言

Delphi, C++ Builder, .NET

填充两个面板,渲染它

使用 AddPaneA / AddPaneB 向每个面板推送原始标记,设置 OrientationInitialSplit 和像素下限,然后读取 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 标记追加到左侧/顶部面板或右侧/底部面板。

方向

OrientationsoHorizontal(左右并排,左右拖动)或 soVertical(上下堆叠,上下拖动)。

起始分隔位置

InitialSplit 是分隔条的起始位置,以面板 A 的百分比(0-100)表示。

尺寸限制

MinSizeA / MinSizeB 是拖动时强制执行的像素下限;GutterSize 设置可拖动分隔条本身的宽度。

记住位置

设置 PersistKey 后,最后一次拖动的位置会通过 localStorage 按浏览器记住,并在下次渲染时恢复。

布局

Height 设置分隔区域的固定高度;HTML 返回面板、分隔条以及指针事件拖动脚本。

继续探索

在线帮助此组件的完整 API 参考和使用指南。
所有 sgcHTML 组件浏览 80 多个组件的完整功能矩阵。
下载免费试用版30 天试用版附带 60.HTML 演示项目。
价格Single、Team 和 Site 授权,均含完整源代码。

准备好开始了吗?

下载免费试用版,开始在 Delphi、C++ Builder 和 .NET 中构建 Web 界面。