Offcanvas
TsgcHTMLComponent_Offcanvas — render een Bootstrap 5 off-canvas-paneel dat vanaf de start-, eind-, boven- of onderrand naar binnen schuift, met een optioneel donker thema en statische backdrop, in Delphi, C++ Builder en .NET.
TsgcHTMLComponent_Offcanvas — render een Bootstrap 5 off-canvas-paneel dat vanaf de start-, eind-, boven- of onderrand naar binnen schuift, met een optioneel donker thema en statische backdrop, in Delphi, C++ Builder en .NET.
Een inschuifpaneelcomponent die Bootstrap 5 offcanvas-markup uitstuurt. Kies een plaatsingsrand, stel de titel en body in en lees vervolgens de eigenschap HTML — of roep de statische Build-helper aan voor een one-liner.
TsgcHTMLComponent_Offcanvas
Bootstrap 5 offcanvas-markup
Delphi, C++ Builder, .NET
Roep Build(id, title, body, placement, dark) aan voor een snel paneel, of maak de component aan, stel Placement en Dark in en lees vervolgens HTML. Combineer het met BuildTriggerButton om het paneel te openen.
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 markupDe members die je het vaakst gebruikt.
Title stelt de kop in de header in en Body bevat de paneelcontent; OffcanvasID is de element-id waarnaar triggers verwijzen.
Placement laat het paneel binnenschuiven vanaf opStart, opEnd, opTop of opBottom via TsgcHTMLOffcanvasPlacement.
Dark past het donkere kleurenschema toe (en een witte sluitknop); CSSClass voegt extra klassen toe aan het paneel.
StaticBackdrop houdt het paneel open bij een klik buiten het venster; ShowClose schakelt de sluitknop in de header in of uit.
Build(id, title, body, placement, dark) geeft een kant-en-klaar paneel terug; BuildTriggerButton(offcanvasID, text, style) stuurt een knop uit die het opent.
HTML geeft de volledige Bootstrap offcanvas-markup terug — serveer het of wijs het toe aan de BodyContent van een paginasjabloon.