In één oogopslag

Een navigatiecomponent dat een Bootstrap-<ol class="breadcrumb"> uitstuurt. Het laatste item (of een met Active gemarkeerd) rendert als de huidige pagina. Voeg items toe en lees dan de HTML-eigenschap.

Componentklasse

TsgcHTMLComponent_Breadcrumb

Rendert

Bootstrap-breadcrumb-markup

Familie

Navigatie en structuur

Talen

Delphi, C++ Builder, .NET

QuickStart

Maak hem aan, voeg items toe, render hem

Duw één item per padsegment in Items, stel optioneel een aangepaste Divider in en lees dan 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">

Referentie

Belangrijkste eigenschappen en methoden

De members die je het vaakst gebruikt.

Items

Items.Add retourneert een TsgcHTMLBreadcrumbItem; stel zijn Text en Href in voor elk padsegment, in volgorde.

Huidige pagina

Het laatste item, of elk item dat met Active is gemarkeerd, rendert als platte tekst met aria-current="page" in plaats van een link.

Divider

Divider overschrijft het scheidingsteken tussen items (bijvoorbeeld '>' of '/') via de Bootstrap-variabele --bs-breadcrumb-divider.

Identiteit

BreadcrumbID stelt de id in op de omsluitende <nav> voor styling- of scripting-hooks.

Uitvoer

HTML retourneert de volledige <nav aria-label="breadcrumb"> met zijn geordende lijst — serveer hem, of wijs hem toe aan de BodyContent van een paginatemplate.

Bronnen

Blijf ontdekken

	Alle sgcHTML-componentenBlader door de volledige functiematrix van 60+ componenten.	Openen
	Download gratis proefversieDe proefversie van 30 dagen bevat de 60.HTML-demoprojecten.	Openen
	PrijzenSingle-, Team- en Site-licenties met volledige broncode.	Openen

Breadcrumb

TsgcHTMLComponent_Breadcrumb