Visão geral

TsgcHTMLComponent_Sidebar

Um componente de navegação que emite uma sidebar vertical do Bootstrap 5 com uma marca opcional, links nav-pill, cabeçalhos, divisores e um rodapé. Adicione itens e então leia a propriedade HTML.

Classe do componente

TsgcHTMLComponent_Sidebar

Renderiza

Markup de sidebar do Bootstrap 5

Família

Navegação & Estrutura

Linguagens

Delphi, C++ Builder, .NET

QuickStart

Crie, adicione itens, renderize

Defina Brand e Width, adicione itens (links, cabeçalhos, divisores) a Items e então leia HTML.

uses
  sgcHTML_Component_Sidebar;

var
  oSidebar: TsgcHTMLComponent_Sidebar;
begin
  oSidebar := TsgcHTMLComponent_Sidebar.Create(nil);
  try
    oSidebar.Brand := 'Dashboard';
    oSidebar.Width := '240px';
    oSidebar.Dark := True;

    with oSidebar.Items.Add do begin Text := 'Main'; Header := True; end;
    with oSidebar.Items.Add do begin Text := 'Home'; Href := '/'; Active := True; end;
    with oSidebar.Items.Add do begin Text := 'Reports'; Href := '/reports'; end;
    oSidebar.Items.Add.Divider := True;
    with oSidebar.Items.Add do begin Text := 'Settings'; Href := '/settings'; end;

    oSidebar.FooterText := 'v2.0';

    WebModule.Response := oSidebar.HTML;   // vertical <div> nav
  finally
    oSidebar.Free;
  end;
end;

// includes: sgcHTML_Component_Sidebar.hpp

TsgcHTMLComponent_Sidebar *oSidebar = new TsgcHTMLComponent_Sidebar(NULL);
try
{
  oSidebar->Brand = "Dashboard";
  oSidebar->Width = "240px";
  oSidebar->Dark = true;

  TsgcHTMLSidebarItem *oItem = oSidebar->Items->Add();
  oItem->Text = "Main"; oItem->Header = true;
  oItem = oSidebar->Items->Add(); oItem->Text = "Home"; oItem->Href = "/"; oItem->Active = true;
  oItem = oSidebar->Items->Add(); oItem->Text = "Reports"; oItem->Href = "/reports";
  oSidebar->Items->Add()->Divider = true;
  oItem = oSidebar->Items->Add(); oItem->Text = "Settings"; oItem->Href = "/settings";

  oSidebar->FooterText = "v2.0";

  String html = oSidebar->HTML;   // vertical <div> nav
}
__finally
{
  delete oSidebar;
}

using esegece.sgcWebSockets;

var sidebar = new TsgcHTMLComponent_Sidebar();
sidebar.Brand = "Dashboard";
sidebar.Width = "240px";
sidebar.Dark = true;

var item = sidebar.Items.Add();
item.Text = "Main"; item.Header = true;
item = sidebar.Items.Add(); item.Text = "Home"; item.Href = "/"; item.Active = true;
item = sidebar.Items.Add(); item.Text = "Reports"; item.Href = "/reports";
sidebar.Items.Add().Divider = true;
item = sidebar.Items.Add(); item.Text = "Settings"; item.Href = "/settings";

sidebar.FooterText = "v2.0";

string html = sidebar.HTML;   // vertical <div> nav

Referência

Principais propriedades & métodos

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

Marca

Brand define o título exibido no topo do painel; BrandHref é o link para o qual ele aponta (padrão #).

Items

Items.Add retorna um TsgcHTMLSidebarItem; defina Text, Href, Icon e Active para um link, ou marque Header / Divider para um título de seção ou regra.

Tema

Dark (padrão True) alterna entre fundos escuro e claro e a cor de texto de link correspondente.

Layout

Width define a largura do painel (padrão 250px); Fixed o fixa na borda esquerda; SidebarID e CSSClass definem o id e classes extras.

Rodapé

FooterHTML injeta markup bruto abaixo de um divisor, ou FooterText renderiza uma legenda esmaecida quando nenhum HTML é definido.

Saída

HTML retorna a navegação vertical <div> completa — sirva-a ou atribua-a 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

Sidebar