Bir bakışta

TsgcHTMLComponent_Sidebar

İsteğe bağlı bir marka, nav-pill bağlantıları, başlıklar, ayraçlar ve bir altbilgi içeren dikey bir Bootstrap 5 kenar çubuğu üreten bir gezinme bileşeni. Öğeler ekleyin, ardından HTML özelliğini okuyun.

Bileşen sınıfı

TsgcHTMLComponent_Sidebar

İşler

Bootstrap 5 kenar çubuğu işaretlemesi

Aile

Gezinme & Yapı

Diller

Delphi, C++ Builder, .NET

QuickStart

Oluşturun, öğeler ekleyin, işleyin

Brand ve Width'i ayarlayın, Items içine öğeler (bağlantılar, başlıklar, ayraçlar) iletin, ardından HTML'i okuyun.

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

Başvuru

Temel özellikler & yöntemler

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

Marka

Brand, panelin üst kısmında gösterilen başlığı ayarlar; BrandHref, işaret ettiği bağlantıdır (varsayılan #).

Öğeler

Items.Add, bir TsgcHTMLSidebarItem döndürür; bir bağlantı için Text, Href, Icon ve Active'i ayarlayın ya da bir bölüm başlığı veya çizgisi için Header / Divider'ı işaretleyin.

Tema

Dark (varsayılan True), koyu ve açık arka planlar ile eşleşen bağlantı metni rengi arasında geçiş yapar.

Düzen

Width, panel genişliğini ayarlar (varsayılan 250px); Fixed, onu sol kenara sabitler; SidebarID ve CSSClass, kimliği ve ek sınıfları ayarlar.

Altbilgi

FooterHTML, bir ayracın altına ham işaretleme enjekte eder ya da HTML ayarlanmadığında FooterText, soluk bir başlık işler.

Çıktı

HTML, tam dikey <div> gezinmesini 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ç

Sidebar