In één oogopslag

TsgcHTMLComponent_Sidebar

Een navigatiecomponent dat een verticale Bootstrap 5-sidebar uitstuurt met een optioneel merk, nav-pill-links, koppen, scheidingslijnen en een voettekst. Voeg items toe en lees dan de HTML-eigenschap.

Componentklasse

TsgcHTMLComponent_Sidebar

Rendert

Bootstrap 5-sidebar-markup

Familie

Navigatie en structuur

Talen

Delphi, C++ Builder, .NET

QuickStart

Maak hem aan, voeg items toe, render hem

Stel Brand en Width in, voeg items (links, koppen, scheidingslijnen) toe aan Items en lees dan 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

Referentie

Belangrijkste eigenschappen en methoden

De members die je het vaakst gebruikt.

Merk

Brand stelt de kop in die bovenaan het paneel wordt getoond; BrandHref is de link waarnaar het verwijst (standaard #).

Items

Items.Add retourneert een TsgcHTMLSidebarItem; stel Text, Href, Icon en Active in voor een link, of markeer Header / Divider voor een sectietitel of lijn.

Thema

Dark (standaard True) schakelt tussen donkere en lichte achtergronden en de bijbehorende linktekstkleur.

Layout

Width stelt de paneelbreedte in (standaard 250px); Fixed verankert het aan de linkerrand; SidebarID en CSSClass stellen de id en extra classes in.

Voettekst

FooterHTML injecteert ruwe markup onder een scheidingslijn, of FooterText rendert een gedempt bijschrift wanneer er geen HTML is ingesteld.

Uitvoer

HTML retourneert de volledige verticale <div>-navigatie — serveer hem, of wijs hem toe aan de BodyContent van een paginatemplate.

Bronnen

Blijf ontdekken

	Alle sgcHTML-componentenBlader door de volledige functiematrix van 60+ componenten.	Openen
	Download gratis proefversieDe proefversie van 30 dagen bevat de 60.HTML-demoprojecten.	Openen
	PrijzenSingle-, Team- en Site-licenties met volledige broncode.	Openen

Sidebar