Offcanvas

TsgcHTMLComponent_Offcanvas — renderizza un pannello off-canvas a scorrimento Bootstrap 5 dal bordo iniziale, finale, superiore o inferiore, con tema scuro e sfondo statico opzionali, in Delphi, C++ Builder e .NET.

In sintesi

TsgcHTMLComponent_Offcanvas

Un componente pannello a scorrimento che emette markup offcanvas Bootstrap 5. Scegli un bordo di posizionamento, imposta il titolo e il corpo, quindi leggi la proprietà HTML — oppure chiama l’helper statico Build per una soluzione a riga singola.

Classe del componente

TsgcHTMLComponent_Offcanvas

Renderizza

Bootstrap 5 offcanvas markup

Famiglia

Overlay e Feedback

Linguaggi

Delphi, C++ Builder, .NET

QuickStart

Costruiscilo in una riga, o configuralo completamente

Chiama Build(id, title, body, placement, dark) per un pannello rapido, oppure crea il componente, imposta Placement e Dark, quindi leggi HTML. Abbinalo a BuildTriggerButton per aprire il pannello.

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

Riferimento

Proprietà e metodi principali

I membri che utilizzerai più spesso.

Contenuto

Title imposta l’intestazione e Body contiene il contenuto del pannello; OffcanvasID è l’id dell’elemento referenziato dagli attivatori.

Posizionamento

Placement fa scorrere il pannello da opStart, opEnd, opTop o opBottom tramite TsgcHTMLOffcanvasPlacement.

Tema

Dark applica lo schema di colori scuro (e un pulsante di chiusura bianco); CSSClass aggiunge classi extra al pannello.

Comportamento

StaticBackdrop mantiene il pannello aperto al clic esterno; ShowClose attiva/disattiva il pulsante di chiusura nell’intestazione.

Helper statici

Build(id, title, body, placement, dark) restituisce un pannello pronto; BuildTriggerButton(offcanvasID, text, style) emette un pulsante che lo apre.

Output

HTML restituisce il markup completo dell’offcanvas Bootstrap — servilo, oppure assegnalo al BodyContent di un template di pagina.

Risorse

Continua a esplorare

	Tutti i componenti sgcHTMLEsplora la matrice completa delle funzionalità di oltre 60 componenti.	Apri
	Scarica la Prova GratuitaLa prova di 30 giorni include i progetti demo 60.HTML.	Apri
	PrezziLicenze Single, Team e Site con codice sorgente completo.	Apri