Offcanvas
TsgcHTMLComponent_Offcanvas — renderiza un panel deslizante off-canvas de Bootstrap 5 desde el borde inicial, final, superior o inferior, con tema oscuro opcional y fondo estático, en Delphi, C++ Builder y .NET.
TsgcHTMLComponent_Offcanvas — renderiza un panel deslizante off-canvas de Bootstrap 5 desde el borde inicial, final, superior o inferior, con tema oscuro opcional y fondo estático, en Delphi, C++ Builder y .NET.
Un componente de panel deslizante que emite marcado offcanvas de Bootstrap 5. Elige el borde de colocación, define el título y el cuerpo y luego lee la propiedad HTML — o llama al método estático Build para hacerlo en una sola línea.
TsgcHTMLComponent_Offcanvas
Marcado offcanvas de Bootstrap 5
Delphi, C++ Builder, .NET
Llama a Build(id, title, body, placement, dark) para un panel rápido, o crea el componente, define Placement y Dark y luego lee HTML. Combínalo con BuildTriggerButton para abrir el 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 markupLos miembros que más vas a usar.
Title define el encabezado de la cabecera y Body contiene el contenido del panel; OffcanvasID es el id del elemento al que hacen referencia los disparadores.
Placement hace que el panel se deslice desde opStart, opEnd, opTop u opBottom mediante TsgcHTMLOffcanvasPlacement.
Dark aplica el esquema de color oscuro (y un botón de cierre blanco); CSSClass añade clases adicionales al panel.
StaticBackdrop mantiene el panel abierto al hacer clic fuera; ShowClose activa o desactiva el botón de cierre de la cabecera.
Build(id, title, body, placement, dark) devuelve un panel listo; BuildTriggerButton(offcanvasID, text, style) emite un botón que lo abre.
HTML devuelve el marcado offcanvas de Bootstrap completo — sírvelo o asígnalo al BodyContent de una plantilla de página.