Komponent Sidebar — sgcHTML

W skrócie

TsgcHTMLComponent_Sidebar

Komponent nawigacji, który generuje pionowy panel boczny Bootstrap 5 z opcjonalną marką, linkami nav-pill, nagłówkami, separatorami i stopką. Dodaj pozycje, a następnie odczytaj właściwość HTML.

Klasa komponentu

TsgcHTMLComponent_Sidebar

Renderuje

Znaczniki panelu bocznego Bootstrap 5

Rodzina

Nawigacja i struktura

Języki

Delphi, C++ Builder, .NET

Szybki start

Utwórz go, dodaj pozycje, wyrenderuj

Ustaw Brand i Width, dodaj pozycje (linki, nagłówki, separatory) do Items, a następnie odczytaj 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

Dokumentacja

Kluczowe właściwości i metody

Składniki, po które sięgasz najczęściej.

Marka

Brand ustawia nagłówek wyświetlany na górze panelu; BrandHref to link, do którego prowadzi (domyślnie #).

Pozycje

Items.Add zwraca TsgcHTMLSidebarItem; ustaw Text, Href, Icon i Active dla linku lub oznacz Header / Divider dla tytułu sekcji lub linii.

Motyw

Dark (domyślnie True) przełącza między ciemnym a jasnym tłem i odpowiednim kolorem tekstu linków.

Układ

Width ustawia szerokość panelu (domyślnie 250px); Fixed przypina go do lewej krawędzi; SidebarID i CSSClass ustawiają identyfikator i dodatkowe klasy.

Stopka

FooterHTML wstrzykuje surowe znaczniki poniżej separatora, a FooterText renderuje przygaszony podpis, gdy nie ustawiono HTML.

Wynik

HTML zwraca pełną pionową nawigację <div> — udostępnij ją lub przypisz do właściwości BodyContent szablonu strony.

Zasoby

Poznawaj dalej

	Wszystkie komponenty sgcHTMLPrzejrzyj pełną matrycę funkcji 60+ komponentów.	Otwórz
	Pobierz bezpłatną wersję próbną30-dniowa wersja próbna zawiera projekty demonstracyjne 60.HTML.	Otwórz
	CennikLicencje Single, Team i Site z pełnym kodem źródłowym.	Otwórz

Sidebar