Composant Splitter — sgcHTML | eSeGeCe

Splitter

TsgcHTMLComponent_Splitter — affichez deux volets redimensionnables avec une gouttière déplaçable, horizontale ou verticale, avec une position persistée optionnelle, en Delphi, C++ Builder et .NET.

En bref

TsgcHTMLComponent_Splitter

Remplissez le volet A et le volet B avec du HTML brut, définissez l'orientation et la répartition de départ, puis lisez la propriété HTML.

Classe du composant

TsgcHTMLComponent_Splitter

Produit

Des volets flexibles + gouttière + CSS dédié + script de glissement pointeur

Famille

Navigation & Structure

Langages

Delphi, C++ Builder, .NET

QuickStart

Remplissez les deux volets, affichez-le

Ajoutez du balisage brut dans chaque volet avec AddPaneA / AddPaneB, définissez Orientation, InitialSplit et les tailles planchers en pixels, puis lisez 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

Référence

Propriétés & méthodes clés

Les membres que vous utilisez le plus souvent.

Contenu des volets

AddPaneA(aHTML) / AddPaneB(aHTML) ajoutent du balisage HTML brut au volet gauche/haut ou au volet droit/bas.

Orientation

Orientation vaut soHorizontal (côte à côte, glissement gauche/droite) ou soVertical (empilé, glissement haut/bas).

Répartition de départ

InitialSplit est la position de départ du séparateur, en pourcentage (0-100) du volet A.

Limites de taille

MinSizeA / MinSizeB sont des tailles planchers en pixels appliquées pendant le glissement ; GutterSize définit la largeur de la gouttière déplaçable elle-même.

Position persistée

Lorsque PersistKey est défini, la dernière position glissée est mémorisée par navigateur via localStorage et restaurée au prochain affichage.

Mise en page

Height définit la hauteur fixe de la zone divisée ; HTML renvoie les volets, la gouttière et le script de glissement par événements pointeur.

Ressources

Continuez l'exploration

	Aide en ligneRéférence API complète et guide d’utilisation pour ce composant.	Ouvrir
	Tous les composants sgcHTMLParcourez la matrice complète des fonctionnalités de plus de 80 composants.	Ouvrir
	Télécharger la version d'essai gratuiteLa version d'essai de 30 jours fournit les projets de démonstration 60.HTML.	Ouvrir
	TarifsLicences Single, Team et Site avec code source complet.	Ouvrir