Componente Tabs — sgcHTML

De un vistazo

TsgcHTMLComponent_Tabs

Un componente de navegación que emite una navegación de pestañas de Bootstrap más un bloque tab-content de paneles conectados con data-bs-toggle="tab". Añade elementos con su título y contenido, y luego lee la propiedad HTML.

Clase del componente

TsgcHTMLComponent_Tabs

Genera

Pestañas de Bootstrap + paneles de contenido

Familia

Navegación y Estructura

Lenguajes

Delphi, C++ Builder, .NET

Inicio rápido

Créalo, añade paneles, renderízalo

Elige un Style, añade elementos con un Title y un Content (marca uno como Active) y luego lee HTML.

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

Referencia

Propiedades y métodos clave

Los miembros que usarás con más frecuencia.

Elementos

Items.Add devuelve un TsgcHTMLTabItem; define Title, Content (el marcado del panel) y marca uno como Active para que se muestre un panel al cargar.

Estilo

Style selecciona tsTab (por defecto), tsPill o tsUnderline, que se corresponden con nav-tabs, nav-pills o nav-underline.

Diseño

Vertical dispone la navegación en el lateral; Fill y Justify reparten los botones de pestaña a lo ancho del espacio disponible.

Estado

Por elemento, Disabled atenúa una pestaña, y TabID sobrescribe el id de panel generado (de lo contrario se deriva de TabsID).

Identidad

TabsID (por defecto sgcTabs) prefija los ids de pestaña y panel generados que conectan cada botón con su panel.

Salida

HTML devuelve la lista de navegación más los paneles tab-content — sírvelo o asígnalo al BodyContent de una plantilla de página.

Recursos

Sigue explorando

	Todos los componentes de sgcHTMLExplora la matriz completa de más de 60 componentes.	Abrir
	Descargar prueba gratuitaLa prueba de 30 días incluye los proyectos de demostración 60.HTML.	Abrir
	PreciosLicencias Single, Team y Site con código fuente completo.	Abrir

Tabs