Bir bakışta

TsgcHTMLComponent_NavBar

Bir marka, duyarlı bir aç/kapa düğmesi ve daraltılabilir bir bağlantı listesine sahip bir Bootstrap 5 <nav class="navbar"> üreten bir gezinme bileşeni. Markayı ayarlayın, öğeler ekleyin, ardından HTML özelliğini okuyun.

Bileşen sınıfı

TsgcHTMLComponent_NavBar

İşler

Bootstrap 5 navbar işaretlemesi

Aile

Gezinme & Yapı

Diller

Delphi, C++ Builder, .NET

QuickStart

Oluşturun, bağlantılar ekleyin, işleyin

Brand'i ayarlayın, Items içine bir veya daha fazla öğe iletin, ardından HTML'i okuyun (ya da bir TsgcHTMLTemplate_Bootstrap sayfasına yerleştirin).

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"> ...

Başvuru

Temel özellikler & yöntemler

En sık başvurduğunuz üyeler.

Marka

Brand, solda gösterilen marka metnini ayarlar; BrandHref, işaret ettiği bağlantıdır (varsayılan #).

Bağlantılar

Items.Add, bir TsgcHTMLNavItem döndürür; daraltılabilir bağlantı listesini oluşturmak için onun Text, Href, Active ve Disabled'ını ayarlayın.

Tema

Theme, Bootstrap koyu/açık navbar arka planıyla eşleşerek ntDark (varsayılan) veya ntLight seçer.

Duyarlı kırılma noktası

Expand, aç/kapa düğmesinin ne zaman daralacağını seçer: neSmall, neMedium, neLarge (varsayılan), neXLarge veya neAlways.

Düzen

Fluid, container-fluid ile container arasında geçiş yapar; NavBarID, öğe kimliğini ayarlar; CSSClass, ek sınıflar ekler.

Çıktı

HTML, marka, aç/kapa düğmesi ve daraltılabilir gezinmeyle birlikte tam <nav class="navbar">'yı döndürür — sunun ya da bir sayfa şablonunun BodyContent'ine atayın.

Kaynaklar

Keşfetmeye devam edin

	Tüm sgcHTML Bileşenleri60'tan fazla bileşenin tam özellik matrisine göz atın.	Aç
	Ücretsiz Deneme Sürümünü İndirin30 günlük deneme, 60.HTML demo projeleriyle birlikte gelir.	Aç
	FiyatlandırmaTam kaynak kodlu Single, Team ve Site lisansları.	Aç

NavBar