Splitter Bileşeni — sgcHTML | eSeGeCe

Splitter

TsgcHTMLComponent_Splitter — Delphi, C++ Builder ve .NET'te sürüklenebilir bir ayırıcıyla, isteğe bağlı kalıcı konumlu, yatay ya da dikey iki yeniden boyutlandırılabilir bölme işleyin.

Bir bakışta

TsgcHTMLComponent_Splitter

A ve B bölmelerini ham HTML ile doldurun, yönü ve başlangıç bölünmesini ayarlayın, ardından HTML özelliğini okuyun.

Bileşen sınıfı

TsgcHTMLComponent_Splitter

İşler

Esnek bölmeler + ayırıcı + kapsamlı CSS + işaretçi sürükleme betiği

Aile

Gezinme & Yapı

Diller

Delphi, C++ Builder, .NET

QuickStart

Her iki bölmeyi doldurun, işleyin

AddPaneA / AddPaneB ile her bölmeye ham işaretleme ekleyin, Orientation, InitialSplit ve piksel alt sınırlarını ayarlayın, ardından HTML'i okuyun.

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

Başvuru

Temel özellikler & yöntemler

En sık başvurduğunuz üyeler.

Bölme içeriği ekleme

AddPaneA(aHTML) / AddPaneB(aHTML), sol/üst bölmeye ya da sağ/alt bölmeye ham HTML işaretlemesi ekler.

Yön

Orientation, soHorizontal (yan yana, sola/sağa sürükleme) ya da soVertical'dır (üst üste, yukarı/aşağı sürükleme).

Başlangıç bölünmesi

InitialSplit, ayırıcının A bölmesinin yüzdesi (0-100) olarak başlangıç konumudur.

Boyut sınırları

MinSizeA / MinSizeB, sürükleme sırasında uygulanan piksel alt sınırlarıdır; GutterSize, sürüklenebilir ayırıcının genişliğini ayarlar.

Kalıcı konum

PersistKey ayarlandığında, son sürüklenen konum localStorage aracılığıyla tarayıcı başına hatırlanır ve bir sonraki işlemede geri yüklenir.

Düzen

Height, bölünmüş alanın sabit yüksekliğini ayarlar; HTML, bölmeleri, ayırıcıyı ve işaretçi olayı sürükleme betiğini döndürür.

Kaynaklar

Keşfetmeye devam edin

	Çevrimiçi yardımBu bileşen için tam API referansı ve kullanım kılavuzu.	Aç
	Tüm sgcHTML Bileşenleri80'den fazla bileşenin tam özellik matrisine göz atın.	Aç
	Ücretsiz Deneme Sürümünü İndirin30 günlük deneme, 60.HTML demo projeleriyle birlikte gelir.	Aç
	FiyatlandırmaTam kaynak kodlu Single, Team ve Site lisansları.	Aç