Componente Splitter — sgcHTML

De un vistazo

TsgcHTMLComponent_Splitter

Rellena el panel A y el panel B con HTML en bruto, define la orientación y la división inicial, y luego lee la propiedad HTML.

Clase del componente

TsgcHTMLComponent_Splitter

Genera

Paneles flex + separador + CSS encapsulado + script de arrastre por puntero

Familia

Navegación y Estructura

Lenguajes

Delphi, C++ Builder, .NET

Inicio rápido

Rellena ambos paneles, renderízalo

Inserta marcado en bruto en cada panel con AddPaneA / AddPaneB, define Orientation, InitialSplit y los mínimos en píxeles, y luego lee 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

Referencia

Propiedades y métodos clave

Los miembros que usarás con más frecuencia.

Añadir contenido a los paneles

AddPaneA(aHTML) / AddPaneB(aHTML) añaden marcado HTML en bruto al panel izquierdo/superior o al panel derecho/inferior.

Orientación

Orientation es soHorizontal (uno junto al otro, arrastre izquierda/derecha) o soVertical (apilados, arrastre arriba/abajo).

División inicial

InitialSplit es la posición inicial del divisor, como porcentaje (0-100) del panel A.

Límites de tamaño

MinSizeA / MinSizeB son mínimos en píxeles que se respetan durante el arrastre; GutterSize define el ancho del propio separador arrastrable.

Posición persistente

Cuando se define PersistKey, la última posición arrastrada se recuerda por navegador mediante localStorage y se restaura en el siguiente renderizado.

Diseño

Height define la altura fija del área dividida; HTML devuelve los paneles, el separador y el script de arrastre por eventos de puntero.

Recursos

Sigue explorando

	Ayuda en líneaReferencia completa de la API y guía de uso para este componente.	Abrir
	Todos los componentes de sgcHTMLExplora la matriz completa de más de 80 componentes.	Abrir
	Descargar prueba gratuitaLa prueba de 30 días incluye los proyectos de demostración 60.HTML.	Abrir
	PreciosLicencias Single, Team y Site con código fuente completo.	Abrir

Splitter