Auf einen Blick

TsgcHTMLComponent_Sidebar

Eine Navigationskomponente, die eine vertikale Bootstrap-5-Seitenleiste mit optionalem Brand, Nav-Pill-Links, Überschriften, Trennlinien und einer Fußzeile ausgibt. Fügen Sie Elemente hinzu und lesen Sie dann die HTML-Eigenschaft.

Komponentenklasse

TsgcHTMLComponent_Sidebar

Rendert

Bootstrap-5-Sidebar-Markup

Familie

Navigation & Struktur

Sprachen

Delphi, C++ Builder, .NET

QuickStart

Erstellen, Elemente hinzufügen, rendern

Setzen Sie Brand und Width, fügen Sie Elemente (Links, Überschriften, Trennlinien) in Items ein und lesen Sie dann 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

Referenz

Wichtige Eigenschaften & Methoden

Die Member, die Sie am häufigsten verwenden.

Brand

Brand setzt die oben im Panel angezeigte Überschrift; BrandHref ist der Link, auf den es zeigt (Standard #).

Items

Items.Add gibt ein TsgcHTMLSidebarItem zurück; setzen Sie Text, Href, Icon und Active für einen Link oder setzen Sie Header / Divider für einen Abschnittstitel oder eine Trennlinie.

Theme

Dark (Standard True) wechselt zwischen dunklen und hellen Hintergründen und der passenden Link-Textfarbe.

Layout

Width setzt die Panelbreite (Standard 250px); Fixed heftet es an den linken Rand; SidebarID und CSSClass setzen die id und zusätzliche Klassen.

Fußzeile

FooterHTML fügt rohes Markup unterhalb einer Trennlinie ein, oder FooterText rendert eine gedämpfte Beschriftung, wenn kein HTML gesetzt ist.

Ausgabe

HTML gibt die vollständige vertikale <div>-Navigation zurück — liefern Sie es aus oder weisen Sie es dem BodyContent einer Seitenvorlage zu.

Ressourcen

Weiter entdecken

	Alle sgcHTML-KomponentenDurchsuchen Sie die vollständige Funktionsmatrix von über 60 Komponenten.	Öffnen
	Kostenlose Testversion herunterladenDie 30-Tage-Testversion enthält die 60.HTML-Demoprojekte.	Öffnen
	PreiseSingle-, Team- und Site-Lizenzen mit vollständigem Quellcode.	Öffnen

Sidebar