Splitter-component — sgcHTML | eSeGeCe

Splitter

TsgcHTMLComponent_Splitter — render twee herschaalbare panelen met een sleepbare scheidingslijn, horizontaal of verticaal, met een optioneel bewaarde positie, in Delphi, C++ Builder en .NET.

In één oogopslag

TsgcHTMLComponent_Splitter

Vul paneel A en paneel B met rauwe HTML, stel de oriëntatie en startverdeling in, en lees dan de HTML-eigenschap.

Componentklasse

TsgcHTMLComponent_Splitter

Rendert

Flex-panelen + scheidingslijn + scoped CSS + pointer-sleepscript

Familie

Navigatie en structuur

Talen

Delphi, C++ Builder, .NET

QuickStart

Vul beide panelen, render het

Voeg rauwe markup toe aan elk paneel met AddPaneA / AddPaneB, stel Orientation, InitialSplit en de pixelminima in, en lees dan 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

Referentie

Belangrijkste eigenschappen en methoden

De members die je het vaakst gebruikt.

Paneelinhoud toevoegen

AddPaneA(aHTML) / AddPaneB(aHTML) voegen rauwe HTML-markup toe aan het linker-/bovenste paneel of het rechter-/onderste paneel.

Oriëntatie

Orientation is soHorizontal (naast elkaar, links/rechts slepen) of soVertical (gestapeld, op/neer slepen).

Startverdeling

InitialSplit is de startpositie van de scheidingslijn, als percentage (0-100) van paneel A.

Groottelimieten

MinSizeA / MinSizeB zijn pixelminima die tijdens het slepen worden afgedwongen; GutterSize stelt de breedte van de sleepbare scheidingslijn zelf in.

Bewaarde positie

Wanneer PersistKey is ingesteld, wordt de laatst versleepte positie per browser onthouden via localStorage en hersteld bij de volgende render.

Layout

Height stelt de vaste hoogte van het splitgebied in; HTML retourneert de panelen, de scheidingslijn en het pointer-event-sleepscript.

Bronnen

Blijf ontdekken

	Online helpVolledige API-referentie en gebruikshandleiding voor dit onderdeel.	Open
	Alle sgcHTML-componentenBlader door de volledige functiematrix van 80+ componenten.	Openen
	Download gratis proefversieDe proefversie van 30 dagen bevat de 60.HTML-demoprojecten.	Openen
	PrijzenSingle-, Team- en Site-licenties met volledige broncode.	Openen