Komponent Splitter — sgcHTML

W skrócie

TsgcHTMLComponent_Splitter

Wypełnij panel A i panel B surowym kodem HTML, ustaw orientację i początkowy podział, a następnie odczytaj właściwość HTML.

Klasa komponentu

TsgcHTMLComponent_Splitter

Renderuje

Panele flex + uchwyt + dedykowany CSS + skrypt przeciągania wskaźnikiem

Rodzina

Nawigacja i struktura

Języki

Delphi, C++ Builder, .NET

Szybki start

Wypełnij oba panele, wyrenderuj

Wstaw surowy kod HTML do każdego panelu za pomocą AddPaneA / AddPaneB, ustaw Orientation, InitialSplit oraz minimalne wartości w pikselach, a następnie odczytaj 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

Dokumentacja

Kluczowe właściwości i metody

Składniki, po które sięgasz najczęściej.

Dodawanie zawartości panelu

AddPaneA(aHTML) / AddPaneB(aHTML) dołączają surowy kod HTML do lewego/górnego panelu lub prawego/dolnego panelu.

Orientacja

Orientation to soHorizontal (obok siebie, przeciąganie w lewo/prawo) lub soVertical (jeden nad drugim, przeciąganie w górę/dół).

Początkowy podział

InitialSplit to początkowa pozycja przegrody, wyrażona jako procent (0-100) panelu A.

Ograniczenia rozmiaru

MinSizeA / MinSizeB to minimalne wartości w pikselach wymuszane podczas przeciągania; GutterSize ustawia szerokość samego przeciąganego uchwytu.

Zapamiętywana pozycja

Gdy ustawiony jest PersistKey, ostatnia przeciągnięta pozycja jest zapamiętywana dla danej przeglądarki za pomocą localStorage i przywracana przy następnym renderowaniu.

Układ

Height ustawia stałą wysokość obszaru podziału; HTML zwraca panele, uchwyt oraz skrypt przeciągania obsługujący zdarzenia wskaźnika.

Zasoby

Poznawaj dalej

	Pomoc onlinePełna dokumentacja API i przewodnik użytkowania tego komponentu.	Otwórz
	Wszystkie komponenty sgcHTMLPrzejrzyj pełną matrycę funkcji 80+ komponentów.	Otwórz
	Pobierz bezpłatną wersję próbną30-dniowa wersja próbna zawiera projekty demonstracyjne 60.HTML.	Otwórz
	CennikLicencje Single, Team i Site z pełnym kodem źródłowym.	Otwórz

Splitter