Componente Splitter — sgcHTML | eSeGeCe

Splitter

TsgcHTMLComponent_Splitter — renderize dois painéis redimensionáveis com uma calha arrastável, horizontal ou vertical, com uma posição persistida opcional, em Delphi, C++ Builder e .NET.

Visão geral

TsgcHTMLComponent_Splitter

Preencha o painel A e o painel B com HTML bruto, defina a orientação e a divisão inicial e então leia a propriedade HTML.

Classe do componente

TsgcHTMLComponent_Splitter

Renderiza

Painéis flex + calha + CSS com escopo + script de arraste por ponteiro

Família

Navegação & Estrutura

Linguagens

Delphi, C++ Builder, .NET

QuickStart

Preencha os dois painéis, renderize

Insira markup bruto em cada painel com AddPaneA / AddPaneB, defina Orientation, InitialSplit e os limites mínimos em pixels e então leia 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

Referência

Principais propriedades & métodos

Os membros que você usa com mais frequência.

Adicionando conteúdo aos painéis

AddPaneA(aHTML) / AddPaneB(aHTML) adicionam markup HTML bruto ao painel esquerdo/superior ou ao painel direito/inferior.

Orientação

Orientation é soHorizontal (lado a lado, arraste para esquerda/direita) ou soVertical (empilhado, arraste para cima/baixo).

Divisão inicial

InitialSplit é a posição inicial do divisor, como porcentagem (0-100) do painel A.

Limites de tamanho

MinSizeA / MinSizeB são limites mínimos em pixels aplicados durante o arraste; GutterSize define a largura da própria calha arrastável.

Posição persistida

Quando PersistKey é definido, a última posição arrastada é lembrada por navegador via localStorage e restaurada na próxima renderização.

Layout

Height define a altura fixa da área dividida; HTML retorna os painéis, a calha e o script de arraste por eventos de ponteiro.

Recursos

Continue explorando

	Ajuda onlineReferência completa da API e guia de uso para este componente.	Abrir
	Todos os Componentes sgcHTMLExplore a matriz completa de recursos com mais de 80 componentes.	Abrir
	Baixar Versão de Avaliação GratuitaA avaliação de 30 dias inclui os projetos de demonstração 60.HTML.	Abrir
	PreçosLicenças Single, Team e Site com código-fonte completo.	Abrir