Offcanvas
TsgcHTMLComponent_Offcanvas — erzeuge ein Bootstrap-5-Off-Canvas-Slide-in-Panel von der Start-, End-, oberen oder unteren Kante, mit optionalem Dark-Theme und statischem Backdrop, in Delphi, C++ Builder und .NET.
TsgcHTMLComponent_Offcanvas — erzeuge ein Bootstrap-5-Off-Canvas-Slide-in-Panel von der Start-, End-, oberen oder unteren Kante, mit optionalem Dark-Theme und statischem Backdrop, in Delphi, C++ Builder und .NET.
Eine Slide-in-Panel-Komponente, die Bootstrap-5-offcanvas-Markup ausgibt. Wähle eine Platzierungskante, setze Titel und Body und lies dann die Eigenschaft HTML — oder rufe den statischen Helfer Build für einen Einzeiler auf.
TsgcHTMLComponent_Offcanvas
Bootstrap-5-Offcanvas-Markup
Delphi, C++ Builder, .NET
Rufe Build(id, title, body, placement, dark) für ein schnelles Panel auf, oder erstelle die Komponente, setze Placement und Dark und lies dann HTML. Kombiniere es mit BuildTriggerButton, um das Panel zu öffnen.
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 markupDie am häufigsten verwendeten Member.
Title setzt die Header-Überschrift und Body enthält den Panel-Inhalt; OffcanvasID ist die von Triggern referenzierte Element-id.
Placement lässt das Panel über TsgcHTMLOffcanvasPlacement von opStart, opEnd, opTop oder opBottom einfahren.
Dark wendet das dunkle Farbschema an (und einen weißen Close-Button); CSSClass hängt zusätzliche Klassen an das Panel an.
StaticBackdrop hält das Panel bei einem Klick außerhalb geöffnet; ShowClose schaltet den Close-Button im Header um.
Build(id, title, body, placement, dark) liefert ein fertiges Panel; BuildTriggerButton(offcanvasID, text, style) erzeugt einen Button, der es öffnet.
HTML liefert das vollständige Bootstrap-Offcanvas-Markup — liefere es aus oder weise es dem BodyContent einer Seitenvorlage zu.
| Alle sgcHTML-KomponentenDurchsuche die vollständige Funktionsmatrix von über 60 Komponenten. | Öffnen | |
| Kostenlose Testversion herunterladenDie 30-Tage-Testversion enthält die 60.HTML-Demoprojekte. | Öffnen | |
| PreiseSingle-, Team- und Site-Lizenzen mit vollständigem Quellcode. | Öffnen |