Komponent Offcanvas — sgcHTML

W skrócie

TsgcHTMLComponent_Offcanvas

Komponent wysuwanego panelu, który generuje znaczniki offcanvas Bootstrap 5. Wybierz krawędź umieszczenia, ustaw tytuł i treść, a następnie odczytaj właściwość HTML — albo wywołaj statyczną metodę pomocniczą Build dla jednolinijkowca.

Klasa komponentu

TsgcHTMLComponent_Offcanvas

Renderuje

Znaczniki offcanvas Bootstrap 5

Rodzina

Nakładki i komunikaty

Języki

Delphi, C++ Builder, .NET

Szybki start

Zbuduj go w jednej linii lub skonfiguruj w pełni

Wywołaj Build(id, title, body, placement, dark) dla szybkiego panelu albo utwórz komponent, ustaw Placement i Dark, a następnie odczytaj HTML. Połącz go z BuildTriggerButton, aby otworzyć 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 markup

Dokumentacja

Kluczowe właściwości i metody

Składniki, po które sięgasz najczęściej.

Treść

Title ustawia nagłówek, a Body przechowuje treść panelu; OffcanvasID to identyfikator elementu, do którego odwołują się wyzwalacze.

Umieszczenie

Placement wysuwa panel z opStart, opEnd, opTop lub opBottom za pomocą TsgcHTMLOffcanvasPlacement.

Motyw

Dark stosuje ciemny schemat kolorów (i biały przycisk zamknięcia); CSSClass dołącza dodatkowe klasy do panelu.

Zachowanie

StaticBackdrop utrzymuje panel otwarty po kliknięciu poza nim; ShowClose przełącza przycisk zamknięcia w nagłówku.

Metody pomocnicze

Build(id, title, body, placement, dark) zwraca gotowy panel; BuildTriggerButton(offcanvasID, text, style) generuje przycisk, który go otwiera.

Wynik

HTML zwraca kompletne znaczniki offcanvas Bootstrap — udostępnij je lub przypisz do właściwości BodyContent szablonu strony.

Zasoby

Poznawaj dalej

	Wszystkie komponenty sgcHTMLPrzejrzyj pełną matrycę funkcji 60+ komponentów.	Otwórz
	Pobierz bezpłatną wersję próbną30-dniowa wersja próbna zawiera projekty demonstracyjne 60.HTML.	Otwórz
	CennikLicencje Single, Team i Site z pełnym kodem źródłowym.	Otwórz

Offcanvas