In sintesi

TsgcHTMLComponent_Sidebar

Un componente di navigazione che emette una sidebar verticale Bootstrap 5 con brand opzionale, link nav-pill, intestazioni, divisori e un piè di pagina. Aggiungi gli elementi, quindi leggi la proprietà HTML.

Classe del componente

TsgcHTMLComponent_Sidebar

Renderizza

Bootstrap 5 sidebar markup

Famiglia

Navigazione e Struttura

Linguaggi

Delphi, C++ Builder, .NET

QuickStart

Crealo, aggiungi gli elementi, renderizzalo

Imposta Brand e Width, inserisci gli elementi (link, intestazioni, divisori) in Items, quindi leggi 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

Riferimento

Proprietà e metodi principali

I membri che utilizzerai più spesso.

Brand

Brand imposta l’intestazione mostrata in cima al pannello; BrandHref è il link a cui punta (il valore predefinito è #).

Items

Items.Add restituisce un TsgcHTMLSidebarItem; imposta Text, Href, Icon e Active per un link, oppure contrassegna Header / Divider per un titolo di sezione o una linea.

Tema

Dark (predefinito True) alterna tra sfondi scuri e chiari e il colore del testo dei link corrispondente.

Layout

Width imposta la larghezza del pannello (il valore predefinito è 250px); Fixed lo fissa al bordo sinistro; SidebarID e CSSClass impostano l’id e le classi extra.

Piè di pagina

FooterHTML inietta markup grezzo sotto un divisore, oppure FooterText renderizza una didascalia attenuata quando non è impostato alcun HTML.

Output

HTML restituisce l’intera navigazione verticale <div> — servila, oppure assegnala al BodyContent di un template di pagina.

Risorse

Continua a esplorare

	Tutti i componenti sgcHTMLEsplora la matrice completa delle funzionalità di oltre 60 componenti.	Apri
	Scarica la Prova GratuitaLa prova di 30 giorni include i progetti demo 60.HTML.	Apri
	PrezziLicenze Single, Team e Site con codice sorgente completo.	Apri

Sidebar