Offcanvas

TsgcHTMLComponent_Offcanvas — renderize um painel deslizante off-canvas do Bootstrap 5 a partir da borda de início, fim, topo ou base, com tema escuro opcional e backdrop estático, em Delphi, C++ Builder e .NET.

Visão geral

TsgcHTMLComponent_Offcanvas

Um componente de painel deslizante que emite markup offcanvas do Bootstrap 5. Escolha uma borda de posicionamento, defina o título e o corpo e então leia a propriedade HTML — ou chame o helper estático Build para uma linha única.

Classe do componente

TsgcHTMLComponent_Offcanvas

Renderiza

Markup de offcanvas do Bootstrap 5

Família

Overlays & Feedback

Linguagens

Delphi, C++ Builder, .NET

QuickStart

Construa em uma linha, ou configure-o por completo

Chame Build(id, title, body, placement, dark) para um painel rápido, ou crie o componente, defina Placement e Dark e então leia HTML. Combine-o com BuildTriggerButton para abrir o painel.

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

Referência

Principais propriedades & métodos

Os membros que você usa com mais frequência.

Conteúdo

Title define o título do cabeçalho e Body contém o conteúdo do painel; OffcanvasID é o id do elemento referenciado pelos gatilhos.

Posicionamento

Placement desliza o painel a partir de opStart, opEnd, opTop ou opBottom via TsgcHTMLOffcanvasPlacement.

Tema

Dark aplica o esquema de cores escuro (e um botão de fechar branco); CSSClass adiciona classes extras ao painel.

Comportamento

StaticBackdrop mantém o painel aberto em um clique externo; ShowClose alterna o botão de fechar do cabeçalho.

Helpers estáticos

Build(id, title, body, placement, dark) retorna um painel pronto; BuildTriggerButton(offcanvasID, text, style) emite um botão que o abre.

Saída

HTML retorna o markup completo do offcanvas Bootstrap — sirva-o ou atribua-o ao BodyContent de um template de página.

Recursos

Continue explorando

	Todos os Componentes sgcHTMLExplore a matriz completa de recursos com mais de 60 componentes.	Abrir
	Baixar Versão de Avaliação GratuitaA avaliação de 30 dias inclui os projetos de demonstração 60.HTML.	Abrir
	PreçosLicenças Single, Team e Site com código-fonte completo.	Abrir