Komponent NavBar — sgcHTML

W skrócie

TsgcHTMLComponent_NavBar

Komponent nawigacji, który generuje element <nav class="navbar"> Bootstrap 5 z marką, responsywnym przełącznikiem i zwijaną listą linków. Ustaw markę, dodaj pozycje, a następnie odczytaj właściwość HTML.

Klasa komponentu

TsgcHTMLComponent_NavBar

Renderuje

Znaczniki navbar Bootstrap 5

Rodzina

Nawigacja i struktura

Języki

Delphi, C++ Builder, .NET

Szybki start

Utwórz go, dodaj linki, wyrenderuj

Ustaw Brand, dodaj jedną lub więcej pozycji do Items, a następnie odczytaj HTML (albo umieść go na stronie TsgcHTMLTemplate_Bootstrap).

uses
  sgcHTML_Component_NavBar;

var
  oNavBar: TsgcHTMLComponent_NavBar;
begin
  oNavBar := TsgcHTMLComponent_NavBar.Create(nil);
  try
    oNavBar.Brand := 'Acme Inc.';
    oNavBar.BrandHref := '/';
    oNavBar.Theme := ntDark;
    oNavBar.Expand := neLarge;

    with oNavBar.Items.Add do begin Text := 'Home'; Href := '/'; Active := True; end;
    with oNavBar.Items.Add do begin Text := 'Products'; Href := '/products'; end;
    with oNavBar.Items.Add do begin Text := 'Contact'; Href := '/contact'; end;

    WebModule.Response := oNavBar.HTML;   // <nav class="navbar"> ...
  finally
    oNavBar.Free;
  end;
end;

// includes: sgcHTML_Component_NavBar.hpp

TsgcHTMLComponent_NavBar *oNavBar = new TsgcHTMLComponent_NavBar(NULL);
try
{
  oNavBar->Brand = "Acme Inc.";
  oNavBar->BrandHref = "/";
  oNavBar->Theme = ntDark;
  oNavBar->Expand = neLarge;

  TsgcHTMLNavItem *oItem = oNavBar->Items->Add();
  oItem->Text = "Home"; oItem->Href = "/"; oItem->Active = true;
  oItem = oNavBar->Items->Add(); oItem->Text = "Products"; oItem->Href = "/products";
  oItem = oNavBar->Items->Add(); oItem->Text = "Contact"; oItem->Href = "/contact";

  String html = oNavBar->HTML;   // <nav class="navbar"> ...
}
__finally
{
  delete oNavBar;
}

using esegece.sgcWebSockets;

var navbar = new TsgcHTMLComponent_NavBar();
navbar.Brand = "Acme Inc.";
navbar.BrandHref = "/";
navbar.Theme = TsgcHTMLNavBarTheme.ntDark;
navbar.Expand = TsgcHTMLNavBarExpand.neLarge;

var item = navbar.Items.Add();
item.Text = "Home"; item.Href = "/"; item.Active = true;
item = navbar.Items.Add(); item.Text = "Products"; item.Href = "/products";
item = navbar.Items.Add(); item.Text = "Contact"; item.Href = "/contact";

string html = navbar.HTML;   // <nav class="navbar"> ...

Dokumentacja

Kluczowe właściwości i metody

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

Marka

Brand ustawia tekst marki wyświetlany po lewej; BrandHref to link, do którego prowadzi (domyślnie #).

Linki

Items.Add zwraca TsgcHTMLNavItem; ustaw jego Text, Href, Active i Disabled, aby zbudować zwijaną listę linków.

Motyw

Theme wybiera ntDark (domyślnie) lub ntLight, odpowiadając ciemnemu/jasnemu tłu paska nawigacji Bootstrap.

Punkt responsywny

Expand wybiera, kiedy przełącznik się zwija: neSmall, neMedium, neLarge (domyślnie), neXLarge lub neAlways.

Układ

Fluid przełącza między container-fluid a container; NavBarID ustawia identyfikator elementu; CSSClass dołącza dodatkowe klasy.

Wynik

HTML zwraca pełny element <nav class="navbar"> z marką, przełącznikiem i zwijaną nawigacją — udostępnij go 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

NavBar