Splitter Component — sgcHTML | eSeGeCe

Splitter

TsgcHTMLComponent_Splitter — rendert zwei größenveränderbare Bereiche mit einem ziehbaren Griffsteg, horizontal oder vertikal, mit optional gespeicherter Position, in Delphi, C++ Builder und .NET.

Auf einen Blick

TsgcHTMLComponent_Splitter

Füllen Sie Bereich A und Bereich B mit rohem HTML, legen Sie die Ausrichtung und die Anfangsteilung fest, und lesen Sie dann die HTML-Eigenschaft.

Komponentenklasse

TsgcHTMLComponent_Splitter

Rendert

Flex-Bereiche + Griffsteg + scoped CSS + Pointer-Drag-Skript

Familie

Navigation & Struktur

Sprachen

Delphi, C++ Builder, .NET

QuickStart

Beide Bereiche füllen, rendern

Fügen Sie mit AddPaneA/AddPaneB rohes Markup in jeden Bereich ein, legen Sie Orientation, InitialSplit und die Pixel-Untergrenzen fest, und lesen Sie dann 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

Referenz

Wichtige Eigenschaften & Methoden

Die Member, die Sie am häufigsten verwenden.

Bereichsinhalt hinzufügen

AddPaneA(aHTML)/AddPaneB(aHTML) fügen rohes HTML-Markup zum linken/oberen bzw. rechten/unteren Bereich hinzu.

Ausrichtung

Orientation ist soHorizontal (nebeneinander, links/rechts ziehen) oder soVertical (gestapelt, hoch/runter ziehen).

Anfangsteilung

InitialSplit ist die Startposition der Trennlinie, als Prozentsatz (0-100) von Bereich A.

Größenbegrenzungen

MinSizeA/MinSizeB sind Pixel-Untergrenzen, die beim Ziehen durchgesetzt werden; GutterSize legt die Breite des ziehbaren Griffstegs selbst fest.

Gespeicherte Position

Wenn PersistKey gesetzt ist, wird die zuletzt gezogene Position pro Browser über localStorage gespeichert und beim nächsten Rendering wiederhergestellt.

Layout

Height legt die feste Höhe des Teilungsbereichs fest; HTML gibt die Bereiche, den Griffsteg und das Pointer-Event-Drag-Skript zurück.

Ressourcen

Weiter entdecken

	Online-HilfeVollständige API-Referenz und Verwendungshandbuch für diese Komponente.	Öffnen
	Alle sgcHTML-KomponentenDurchsuchen Sie die vollständige Funktionsmatrix von über 80 Komponenten.	Öffnen
	Kostenlose Testversion herunterladenDie 30-Tage-Testversion enthält die 60.HTML-Demoprojekte.	Öffnen
	PreiseSingle-, Team- und Site-Lizenzen mit vollständigem Quellcode.	Öffnen