Bir bakışta

TsgcHTMLComponent_Offcanvas

Bootstrap 5 offcanvas işaretlemesi üreten, kayarak açılan bir panel bileşeni. Bir yerleşim kenarı seçin, başlığı ve gövdeyi ayarlayın, ardından HTML özelliğini okuyun — ya da tek satırlık çözüm için statik Build yardımcısını çağırın.

Bileşen sınıfı

TsgcHTMLComponent_Offcanvas

İşler

Bootstrap 5 offcanvas işaretlemesi

Aile

Katmanlar & Geri Bildirim

Diller

Delphi, C++ Builder, .NET

QuickStart

Tek satırda oluşturun ya da tam olarak yapılandırın

Hızlı bir panel için Build(id, title, body, placement, dark)'i çağırın ya da bileşeni oluşturun, Placement ve Dark'ı ayarlayın, ardından HTML'i okuyun. Paneli açmak için onu BuildTriggerButton ile eşleştirin.

uses
  sgcHTML_Enums, sgcHTML_Component_Offcanvas;

// One-line static helper (primary form):
var
  vTrigger, vPanel: string;
begin
  vTrigger := TsgcHTMLComponent_Offcanvas.BuildTriggerButton('menuPanel',
    'Open menu', bsPrimary);
  vPanel := TsgcHTMLComponent_Offcanvas.Build('menuPanel',
    'Navigation', '<p>Side panel content.</p>', opEnd, True);
  WebModule.Response := vTrigger + vPanel;
end;

// Or configure it fully:
var
  oOC: TsgcHTMLComponent_Offcanvas;
begin
  oOC := TsgcHTMLComponent_Offcanvas.Create(nil);
  try
    oOC.OffcanvasID := 'menuPanel';
    oOC.Title := 'Navigation';
    oOC.Body := '<p>Side panel content.</p>';
    oOC.Placement := opEnd;
    oOC.Dark := True;
    oOC.StaticBackdrop := True;

    WebModule.Response := oOC.HTML;   // Bootstrap offcanvas markup
  finally
    oOC.Free;
  end;
end;

// includes: sgcHTML_Enums.hpp, sgcHTML_Component_Offcanvas.hpp

// One-line static helper (primary form):
String trigger = TsgcHTMLComponent_Offcanvas::BuildTriggerButton("menuPanel",
  "Open menu", bsPrimary);
String panel = TsgcHTMLComponent_Offcanvas::Build("menuPanel",
  "Navigation", "<p>Side panel content.</p>", opEnd, true);

// Or configure it fully:
TsgcHTMLComponent_Offcanvas *oOC = new TsgcHTMLComponent_Offcanvas(NULL);
try
{
  oOC->OffcanvasID = "menuPanel";
  oOC->Title = "Navigation";
  oOC->Body = "<p>Side panel content.</p>";
  oOC->Placement = opEnd;
  oOC->Dark = true;
  oOC->StaticBackdrop = true;

  String html = oOC->HTML;   // Bootstrap offcanvas markup
}
__finally
{
  delete oOC;
}

using esegece.sgcWebSockets;

// One-line static helper (primary form):
string trigger = TsgcHTMLComponent_Offcanvas.BuildTriggerButton("menuPanel",
    "Open menu", TsgcHTMLButtonStyle.bsPrimary);
string panel = TsgcHTMLComponent_Offcanvas.Build("menuPanel",
    "Navigation", "<p>Side panel content.</p>",
    TsgcHTMLOffcanvasPlacement.opEnd, true);

// Or configure it fully:
var oc = new TsgcHTMLComponent_Offcanvas();
oc.OffcanvasID = "menuPanel";
oc.Title = "Navigation";
oc.Body = "<p>Side panel content.</p>";
oc.Placement = TsgcHTMLOffcanvasPlacement.opEnd;
oc.Dark = true;
oc.StaticBackdrop = true;

string html = oc.HTML;   // Bootstrap offcanvas markup

Başvuru

Temel özellikler & yöntemler

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

İçerik

Title, başlık başlığını ayarlar ve Body, panel içeriğini tutar; OffcanvasID, tetikleyiciler tarafından başvurulan öğe kimliğidir.

Yerleşim

Placement, paneli TsgcHTMLOffcanvasPlacement aracılığıyla opStart, opEnd, opTop veya opBottom'dan kaydırarak açar.

Tema

Dark, koyu renk şemasını (ve beyaz bir kapat düğmesini) uygular; CSSClass, panele ek sınıflar ekler.

Davranış

StaticBackdrop, dışarı tıklandığında paneli açık tutar; ShowClose, başlıktaki kapat düğmesini açıp kapatır.

Statik yardımcılar

Build(id, title, body, placement, dark), hazır bir panel döndürür; BuildTriggerButton(offcanvasID, text, style), onu açan bir düğme üretir.

Çıktı

HTML, eksiksiz Bootstrap offcanvas işaretlemesini döndürür — sunun ya da bir sayfa şablonunun BodyContent'ine atayın.

Kaynaklar

Keşfetmeye devam edin

	Tüm sgcHTML Bileşenleri60'tan 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ç

Offcanvas