Offcanvas
TsgcHTMLComponent_Offcanvas — render a Bootstrap 5 off-canvas slide-in panel from the start, end, top or bottom edge, with an optional dark theme and static backdrop, in Delphi, C++ Builder and .NET.
TsgcHTMLComponent_Offcanvas — render a Bootstrap 5 off-canvas slide-in panel from the start, end, top or bottom edge, with an optional dark theme and static backdrop, in Delphi, C++ Builder and .NET.
A slide-in panel component that emits Bootstrap 5 offcanvas markup. Choose a placement edge, set the title and body, then read the HTML property — or call the static Build helper for a one-liner.
TsgcHTMLComponent_Offcanvas
Bootstrap 5 offcanvas markup
Delphi, C++ Builder, .NET
Call Build(id, title, body, placement, dark) for a quick panel, or create the component, set Placement and Dark, then read HTML. Pair it with BuildTriggerButton to open the panel.
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 markupThe members you reach for most often.
Title sets the header heading and Body holds the panel content; OffcanvasID is the element id referenced by triggers.
Placement slides the panel from opStart, opEnd, opTop or opBottom via TsgcHTMLOffcanvasPlacement.
Dark applies the dark color scheme (and a white close button); CSSClass appends extra classes to the panel.
StaticBackdrop keeps the panel open on an outside click; ShowClose toggles the header close button.
Build(id, title, body, placement, dark) returns a ready panel; BuildTriggerButton(offcanvasID, text, style) emits a button that opens it.
HTML returns the complete Bootstrap offcanvas markup — serve it, or assign it to a page template's BodyContent.
| Online HelpFull API reference and usage guide for this component. | Open | |
| All sgcHTML ComponentsBrowse the full feature matrix of 80+ components. | Open | |
| Download Free TrialThe 30-day trial ships the 60.HTML demo projects. | Open | |
| PricingSingle, Team and Site licenses with full source code. | Open |