Offcanvas

TsgcHTMLComponent_Offcanvas — affichez un panneau coulissant hors-canevas Bootstrap 5 depuis le bord de début, de fin, du haut ou du bas, avec un thème sombre et un arrière-plan statique optionnels, en Delphi, C++ Builder et .NET.

En bref

TsgcHTMLComponent_Offcanvas

Un composant de panneau coulissant qui émet du balisage offcanvas Bootstrap 5. Choisissez un bord de placement, définissez le titre et le corps, puis lisez la propriété HTML — ou appelez l'assistant statique Build pour une seule ligne.

Classe du composant

TsgcHTMLComponent_Offcanvas

Produit

Du balisage offcanvas Bootstrap 5

Famille

Surcouches & Retours

Langages

Delphi, C++ Builder, .NET

QuickStart

Construisez-le en une ligne, ou configurez-le entièrement

Appelez Build(id, title, body, placement, dark) pour un panneau rapide, ou créez le composant, définissez Placement et Dark, puis lisez HTML. Associez-le à BuildTriggerButton pour ouvrir le panneau.

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

Référence

Propriétés & méthodes clés

Les membres que vous utilisez le plus souvent.

Contenu

Title définit l'en-tête et Body contient le contenu du panneau ; OffcanvasID est l'identifiant d'élément référencé par les déclencheurs.

Placement

Placement fait glisser le panneau depuis opStart, opEnd, opTop ou opBottom via TsgcHTMLOffcanvasPlacement.

Thème

Dark applique le schéma de couleurs sombre (et un bouton de fermeture blanc) ; CSSClass ajoute des classes supplémentaires au panneau.

Comportement

StaticBackdrop garde le panneau ouvert lors d'un clic extérieur ; ShowClose active le bouton de fermeture d'en-tête.

Assistants statiques

Build(id, title, body, placement, dark) renvoie un panneau prêt ; BuildTriggerButton(offcanvasID, text, style) émet un bouton qui l'ouvre.

Sortie

HTML renvoie le balisage offcanvas Bootstrap complet — servez-le, ou affectez-le au BodyContent d'un modèle de page.

Ressources

Continuez l'exploration

	Tous les composants sgcHTMLParcourez la matrice complète des fonctionnalités de plus de 60 composants.	Ouvrir
	Télécharger la version d'essai gratuiteLa version d'essai de 30 jours fournit les projets de démonstration 60.HTML.	Ouvrir
	TarifsLicences Single, Team et Site avec code source complet.	Ouvrir