Visão geral

TsgcHTMLComponent_Tabs

Um componente de navegação que emite uma nav de abas Bootstrap mais um bloco tab-content de painéis conectados com data-bs-toggle="tab". Adicione itens com seu título e conteúdo e então leia a propriedade HTML.

Classe do componente

TsgcHTMLComponent_Tabs

Renderiza

Abas Bootstrap + painéis de conteúdo

Família

Navegação & Estrutura

Linguagens

Delphi, C++ Builder, .NET

QuickStart

Crie, adicione painéis, renderize

Escolha um Style, adicione itens com um Title e Content (marque um como Active) e então leia 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

Referência

Principais propriedades & métodos

Os membros que você usa com mais frequência.

Items

Items.Add retorna um TsgcHTMLTabItem; defina Title, Content (o markup do painel) e marque um como Active para que um painel apareça no carregamento.

Estilo

Style seleciona tsTab (padrão), tsPill ou tsUnderline, mapeando para nav-tabs, nav-pills ou nav-underline.

Layout

Vertical dispõe a nav ao lado; Fill e Justify distribuem os botões de aba pela largura disponível.

Estado

Por item, Disabled acinzenta uma aba e TabID substitui o id de painel gerado (caso contrário ele é derivado de TabsID).

Identidade

TabsID (padrão sgcTabs) prefixa os ids de aba e painel gerados que conectam cada botão ao seu painel.

Saída

HTML retorna a lista de nav mais os painéis tab-content — sirva-o ou atribua-o ao BodyContent de um template de página.

Recursos

Continue explorando

	Todos os Componentes sgcHTMLExplore a matriz completa de recursos com mais de 60 componentes.	Abrir
	Baixar Versão de Avaliação GratuitaA avaliação de 30 dias inclui os projetos de demonstração 60.HTML.	Abrir
	PreçosLicenças Single, Team e Site com código-fonte completo.	Abrir

Tabs