Offcanvas
TsgcHTMLComponent_Offcanvas — 渲染一个从起始、结束、顶部或底部边缘滑入的 Bootstrap 5 画布外面板，带有可选的暗黑主题和静态背景，适用于 Delphi、C++ Builder 和 .NET。
TsgcHTMLComponent_Offcanvas — 渲染一个从起始、结束、顶部或底部边缘滑入的 Bootstrap 5 画布外面板，带有可选的暗黑主题和静态背景，适用于 Delphi、C++ Builder 和 .NET。
一个滑入式面板组件，发出 Bootstrap 5 offcanvas 标记。选择一个放置边缘，设置标题和主体，然后读取 HTML 属性 — 或调用静态 Build 辅助方法实现一行代码。
调用 Build(id, title, body, placement, dark) 可快速创建面板，或创建组件、设置 Placement 和 Dark，然后读取 HTML。搭配 BuildTriggerButton 以打开面板。
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您最常使用的成员。
Title 设置页眉标题，Body 保存面板内容；OffcanvasID 是触发器引用的元素 id。
Placement 通过 TsgcHTMLOffcanvasPlacement 让面板从 opStart、opEnd、opTop 或 opBottom 滑入。
Dark 应用暗色配色方案（以及白色关闭按钮）；CSSClass 为面板追加额外的类。
StaticBackdrop 在点击外部时保持面板打开；ShowClose 切换页眉关闭按钮。
Build(id, title, body, placement, dark) 返回一个现成的面板；BuildTriggerButton(offcanvasID, text, style) 发出一个打开它的按钮。
HTML 返回完整的 Bootstrap offcanvas 标记 — 直接提供服务，或将其赋给页面模板的 BodyContent。