Auf einen Blick

Eine Navigationskomponente, die ein Bootstrap-<ol class="breadcrumb"> ausgibt. Das letzte Element (oder eines mit gesetztem Active) wird als aktuelle Seite dargestellt. Fügen Sie Elemente hinzu und lesen Sie dann die HTML-Eigenschaft.

Komponentenklasse

TsgcHTMLComponent_Breadcrumb

Rendert

Bootstrap-Breadcrumb-Markup

Familie

Navigation & Struktur

Sprachen

Delphi, C++ Builder, .NET

QuickStart

Erstellen, Elemente hinzufügen, rendern

Fügen Sie ein Element pro Pfadsegment in Items ein, setzen Sie optional ein benutzerdefiniertes Divider und lesen Sie dann 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">

Referenz

Wichtige Eigenschaften & Methoden

Die Member, die Sie am häufigsten verwenden.

Items

Items.Add gibt ein TsgcHTMLBreadcrumbItem zurück; setzen Sie dessen Text und Href für jedes Pfadsegment, der Reihe nach.

Aktuelle Seite

Das letzte Element oder jedes mit Active markierte Element wird als reiner Text mit aria-current="page" statt als Link dargestellt.

Divider

Divider überschreibt das Trennzeichen zwischen den Elementen (zum Beispiel '>' oder '/') über die Bootstrap-Variable --bs-breadcrumb-divider.

Identität

BreadcrumbID setzt die id auf dem umschließenden <nav> für Styling- oder Skripthooks.

Ausgabe

HTML gibt das vollständige <nav aria-label="breadcrumb"> mit seiner geordneten Liste zurück — liefern Sie es aus oder weisen Sie es dem BodyContent einer Seitenvorlage zu.

Ressourcen

Weiter entdecken

	Alle sgcHTML-KomponentenDurchsuchen Sie die vollständige Funktionsmatrix von über 60 Komponenten.	Öffnen
	Kostenlose Testversion herunterladenDie 30-Tage-Testversion enthält die 60.HTML-Demoprojekte.	Öffnen
	PreiseSingle-, Team- und Site-Lizenzen mit vollständigem Quellcode.	Öffnen

Breadcrumb

TsgcHTMLComponent_Breadcrumb