Visão geral

TsgcHTMLComponent_NavBar

Um componente de navegação que emite um <nav class="navbar"> do Bootstrap 5 com uma marca, um toggler responsivo e uma lista recolhível de links. Defina a marca, adicione itens e então leia a propriedade HTML.

Classe do componente

TsgcHTMLComponent_NavBar

Renderiza

Markup de navbar do Bootstrap 5

Família

Navegação & Estrutura

Linguagens

Delphi, C++ Builder, .NET

QuickStart

Crie, adicione links, renderize

Defina Brand, adicione um ou mais itens a Items e então leia HTML (ou insira-o em uma página TsgcHTMLTemplate_Bootstrap).

uses
  sgcHTML_Component_NavBar;

var
  oNavBar: TsgcHTMLComponent_NavBar;
begin
  oNavBar := TsgcHTMLComponent_NavBar.Create(nil);
  try
    oNavBar.Brand := 'Acme Inc.';
    oNavBar.BrandHref := '/';
    oNavBar.Theme := ntDark;
    oNavBar.Expand := neLarge;

    with oNavBar.Items.Add do begin Text := 'Home'; Href := '/'; Active := True; end;
    with oNavBar.Items.Add do begin Text := 'Products'; Href := '/products'; end;
    with oNavBar.Items.Add do begin Text := 'Contact'; Href := '/contact'; end;

    WebModule.Response := oNavBar.HTML;   // <nav class="navbar"> ...
  finally
    oNavBar.Free;
  end;
end;

// includes: sgcHTML_Component_NavBar.hpp

TsgcHTMLComponent_NavBar *oNavBar = new TsgcHTMLComponent_NavBar(NULL);
try
{
  oNavBar->Brand = "Acme Inc.";
  oNavBar->BrandHref = "/";
  oNavBar->Theme = ntDark;
  oNavBar->Expand = neLarge;

  TsgcHTMLNavItem *oItem = oNavBar->Items->Add();
  oItem->Text = "Home"; oItem->Href = "/"; oItem->Active = true;
  oItem = oNavBar->Items->Add(); oItem->Text = "Products"; oItem->Href = "/products";
  oItem = oNavBar->Items->Add(); oItem->Text = "Contact"; oItem->Href = "/contact";

  String html = oNavBar->HTML;   // <nav class="navbar"> ...
}
__finally
{
  delete oNavBar;
}

using esegece.sgcWebSockets;

var navbar = new TsgcHTMLComponent_NavBar();
navbar.Brand = "Acme Inc.";
navbar.BrandHref = "/";
navbar.Theme = TsgcHTMLNavBarTheme.ntDark;
navbar.Expand = TsgcHTMLNavBarExpand.neLarge;

var item = navbar.Items.Add();
item.Text = "Home"; item.Href = "/"; item.Active = true;
item = navbar.Items.Add(); item.Text = "Products"; item.Href = "/products";
item = navbar.Items.Add(); item.Text = "Contact"; item.Href = "/contact";

string html = navbar.HTML;   // <nav class="navbar"> ...

Referência

Principais propriedades & métodos

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

Marca

Brand define o texto da marca exibido à esquerda; BrandHref é o link para o qual ele aponta (padrão #).

Links

Items.Add retorna um TsgcHTMLNavItem; defina seu Text, Href, Active e Disabled para construir a lista de links recolhível.

Tema

Theme escolhe ntDark (padrão) ou ntLight, mapeando para o fundo de navbar escuro/claro do Bootstrap.

Breakpoint responsivo

Expand escolhe quando o toggler se recolhe: neSmall, neMedium, neLarge (padrão), neXLarge ou neAlways.

Layout

Fluid alterna entre container-fluid e container; NavBarID define o id do elemento; CSSClass adiciona classes extras.

Saída

HTML retorna o <nav class="navbar"> completo com marca, toggler e navegação recolhível — 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

NavBar