Bir bakışta

TsgcHTMLComponent_Tabs

Bir Bootstrap sekme gezinmesinin yanı sıra data-bs-toggle="tab" ile bağlanan bölmelerden oluşan bir tab-content bloğu üreten bir gezinme bileşeni. Başlığı ve içeriğiyle öğeler ekleyin, ardından HTML özelliğini okuyun.

Bileşen sınıfı

TsgcHTMLComponent_Tabs

İşler

Bootstrap sekmeleri + içerik bölmeleri

Aile

Gezinme & Yapı

Diller

Delphi, C++ Builder, .NET

QuickStart

Oluşturun, bölmeler ekleyin, işleyin

Bir Style seçin, bir Title ve Content ile öğeler iletin (birini Active olarak işaretleyin), ardından HTML'i okuyun.

uses
  sgcHTML_Component_Tabs;

var
  oTabs: TsgcHTMLComponent_Tabs;
begin
  oTabs := TsgcHTMLComponent_Tabs.Create(nil);
  try
    oTabs.Style := tsTab;
    oTabs.Fill := True;

    with oTabs.Items.Add do begin Title := 'Overview'; Content := '<p>Welcome.</p>'; Active := True; end;
    with oTabs.Items.Add do begin Title := 'Details'; Content := '<p>The details.</p>'; end;
    with oTabs.Items.Add do begin Title := 'Settings'; Content := '<p>Settings.</p>'; end;

    WebModule.Response := oTabs.HTML;   // nav-tabs + tab-content
  finally
    oTabs.Free;
  end;
end;

// includes: sgcHTML_Component_Tabs.hpp

TsgcHTMLComponent_Tabs *oTabs = new TsgcHTMLComponent_Tabs(NULL);
try
{
  oTabs->Style = tsTab;
  oTabs->Fill = true;

  TsgcHTMLTabItem *oItem = oTabs->Items->Add();
  oItem->Title = "Overview"; oItem->Content = "<p>Welcome.</p>"; oItem->Active = true;
  oItem = oTabs->Items->Add(); oItem->Title = "Details"; oItem->Content = "<p>The details.</p>";
  oItem = oTabs->Items->Add(); oItem->Title = "Settings"; oItem->Content = "<p>Settings.</p>";

  String html = oTabs->HTML;   // nav-tabs + tab-content
}
__finally
{
  delete oTabs;
}

using esegece.sgcWebSockets;

var tabs = new TsgcHTMLComponent_Tabs();
tabs.Style = TsgcHTMLTabStyle.tsTab;
tabs.Fill = true;

var item = tabs.Items.Add();
item.Title = "Overview"; item.Content = "<p>Welcome.</p>"; item.Active = true;
item = tabs.Items.Add(); item.Title = "Details"; item.Content = "<p>The details.</p>";
item = tabs.Items.Add(); item.Title = "Settings"; item.Content = "<p>Settings.</p>";

string html = tabs.HTML;   // nav-tabs + tab-content

Başvuru

Temel özellikler & yöntemler

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

Öğeler

Items.Add, bir TsgcHTMLTabItem döndürür; Title, Content'i (bölme işaretlemesi) ayarlayın ve yüklenişte bir bölmenin görünmesi için birini Active olarak işaretleyin.

Stil

Style, nav-tabs, nav-pills veya nav-underline ile eşleşerek tsTab (varsayılan), tsPill veya tsUnderline seçer.

Düzen

Vertical, gezinmeyi yana yerleştirir; Fill ve Justify, sekme düğmelerini kullanılabilir genişliğe yayar.

Durum

Öğe başına, Disabled bir sekmeyi grileştirir ve TabID, üretilen bölme kimliğini geçersiz kılar (aksi takdirde TabsID'den türetilir).

Kimlik

TabsID (varsayılan sgcTabs), her düğmeyi bölmesine bağlayan üretilen sekme ve bölme kimliklerine ön ek ekler.

Çıktı

HTML, gezinme listesinin yanı sıra tab-content bölmelerini 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ç

Tabs