Splitter Component — sgcHTML | eSeGeCe

Splitter

TsgcHTMLComponent_Splitter — renderizza due pannelli ridimensionabili con un divisore trascinabile, orizzontale o verticale, con una posizione persistente opzionale, in Delphi, C++ Builder e .NET.

In sintesi

TsgcHTMLComponent_Splitter

Riempi il pannello A e il pannello B con HTML grezzo, imposta l’orientamento e la suddivisione iniziale, quindi leggi la proprietà HTML.

Classe del componente

TsgcHTMLComponent_Splitter

Renderizza

Flex panes + gutter + scoped CSS + pointer-drag script

Famiglia

Navigazione e Struttura

Linguaggi

Delphi, C++ Builder, .NET

QuickStart

Riempi entrambi i pannelli, renderizzalo

Inserisci markup grezzo in ciascun pannello con AddPaneA / AddPaneB, imposta Orientation, InitialSplit e i limiti minimi in pixel, quindi leggi 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

Riferimento

Proprietà e metodi principali

I membri che utilizzerai più spesso.

Aggiungere contenuto ai pannelli

AddPaneA(aHTML) / AddPaneB(aHTML) aggiungono markup HTML grezzo al pannello sinistro/superiore o a quello destro/inferiore.

Orientamento

Orientation è soHorizontal (affiancati, trascinamento sinistra/destra) oppure soVertical (impilati, trascinamento su/giù).

Suddivisione iniziale

InitialSplit è la posizione iniziale del divisore, espressa in percentuale (0-100) del pannello A.

Limiti di dimensione

MinSizeA / MinSizeB sono i limiti minimi in pixel applicati durante il trascinamento; GutterSize imposta la larghezza del divisore trascinabile stesso.

Posizione persistente

Quando PersistKey è impostato, l’ultima posizione trascinata viene memorizzata per browser tramite localStorage e ripristinata al rendering successivo.

Layout

Height imposta l’altezza fissa dell’area divisa; HTML restituisce i pannelli, il divisore e lo script di trascinamento basato su pointer-event.

Risorse

Continua a esplorare

	Guida in lineaRiferimento API completo e guida all’uso per questo componente.	Apri
	Tutti i componenti sgcHTMLEsplora la matrice completa delle funzionalità di oltre 80 componenti.	Apri
	Scarica la Prova GratuitaLa prova di 30 giorni include i progetti demo 60.HTML.	Apri
	PrezziLicenze Single, Team e Site con codice sorgente completo.	Apri