Componente Breadcrumb — sgcHTML

De un vistazo

Un componente de navegación que emite un <ol class="breadcrumb"> de Bootstrap. El último elemento (o uno marcado como Active) se genera como la página actual. Añade elementos y luego lee la propiedad HTML.

Clase del componente

TsgcHTMLComponent_Breadcrumb

Genera

Marcado de migas de pan de Bootstrap

Familia

Navegación y Estructura

Lenguajes

Delphi, C++ Builder, .NET

Inicio rápido

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

Añade un elemento por cada segmento de la ruta a Items, opcionalmente define un Divider personalizado y luego lee HTML.

uses
  sgcHTML_Component_Breadcrumb;

var
  oBreadcrumb: TsgcHTMLComponent_Breadcrumb;
begin
  oBreadcrumb := TsgcHTMLComponent_Breadcrumb.Create(nil);
  try
    oBreadcrumb.Divider := '>';

    with oBreadcrumb.Items.Add do begin Text := 'Home'; Href := '/'; end;
    with oBreadcrumb.Items.Add do begin Text := 'Products'; Href := '/products'; end;
    with oBreadcrumb.Items.Add do begin Text := 'sgcHTML'; Active := True; end;

    WebModule.Response := oBreadcrumb.HTML;   // <ol class="breadcrumb">
  finally
    oBreadcrumb.Free;
  end;
end;

// includes: sgcHTML_Component_Breadcrumb.hpp

TsgcHTMLComponent_Breadcrumb *oBreadcrumb = new TsgcHTMLComponent_Breadcrumb(NULL);
try
{
  oBreadcrumb->Divider = ">";

  TsgcHTMLBreadcrumbItem *oItem = oBreadcrumb->Items->Add();
  oItem->Text = "Home"; oItem->Href = "/";
  oItem = oBreadcrumb->Items->Add(); oItem->Text = "Products"; oItem->Href = "/products";
  oItem = oBreadcrumb->Items->Add(); oItem->Text = "sgcHTML"; oItem->Active = true;

  String html = oBreadcrumb->HTML;   // <ol class="breadcrumb">
}
__finally
{
  delete oBreadcrumb;
}

using esegece.sgcWebSockets;

var breadcrumb = new TsgcHTMLComponent_Breadcrumb();
breadcrumb.Divider = ">";

var item = breadcrumb.Items.Add();
item.Text = "Home"; item.Href = "/";
item = breadcrumb.Items.Add(); item.Text = "Products"; item.Href = "/products";
item = breadcrumb.Items.Add(); item.Text = "sgcHTML"; item.Active = true;

string html = breadcrumb.HTML;   // <ol class="breadcrumb">

Referencia

Propiedades y métodos clave

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

Elementos

Items.Add devuelve un TsgcHTMLBreadcrumbItem; define su Text y Href para cada segmento de la ruta, en orden.

Página actual

El último elemento, o cualquier elemento marcado como Active, se genera como texto plano con aria-current="page" en lugar de como un enlace.

Separador

Divider sobrescribe el separador entre elementos (por ejemplo '>' o '/') mediante la variable --bs-breadcrumb-divider de Bootstrap.

Identidad

BreadcrumbID define el id en el <nav> que lo envuelve para usarlo como gancho de estilo o de scripting.

Salida

HTML devuelve el <nav aria-label="breadcrumb"> completo con su lista ordenada — 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

Breadcrumb

TsgcHTMLComponent_Breadcrumb