Komponent Breadcrumb — sgcHTML

W skrócie

Komponent nawigacji, który generuje element <ol class="breadcrumb"> Bootstrap. Ostatnia pozycja (lub oznaczona jako Active) renderuje się jako bieżąca strona. Dodaj pozycje, a następnie odczytaj właściwość HTML.

Klasa komponentu

TsgcHTMLComponent_Breadcrumb

Renderuje

Znaczniki breadcrumb Bootstrap

Rodzina

Nawigacja i struktura

Języki

Delphi, C++ Builder, .NET

Szybki start

Utwórz go, dodaj pozycje, wyrenderuj

Przekaż po jednej pozycji na każdy segment ścieżki do Items, opcjonalnie ustaw własny Divider, a następnie odczytaj 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">

Dokumentacja

Kluczowe właściwości i metody

Składniki, po które sięgasz najczęściej.

Pozycje

Items.Add zwraca TsgcHTMLBreadcrumbItem; ustaw jego Text i Href dla każdego segmentu ścieżki, po kolei.

Bieżąca strona

Ostatnia pozycja lub dowolna oznaczona jako Active renderuje się jako zwykły tekst z aria-current="page" zamiast linku.

Separator

Divider nadpisuje separator między pozycjami (na przykład '>' lub '/') za pomocą zmiennej --bs-breadcrumb-divider Bootstrap.

Tożsamość

BreadcrumbID ustawia identyfikator na opakowującym elemencie <nav> dla stylowania lub punktów zaczepienia skryptów.

Wynik

HTML zwraca pełny element <nav aria-label="breadcrumb"> z listą uporządkowaną — udostępnij go lub przypisz do właściwości BodyContent szablonu strony.

Zasoby

Poznawaj dalej

	Wszystkie komponenty sgcHTMLPrzejrzyj pełną matrycę funkcji 60+ komponentów.	Otwórz
	Pobierz bezpłatną wersję próbną30-dniowa wersja próbna zawiera projekty demonstracyjne 60.HTML.	Otwórz
	CennikLicencje Single, Team i Site z pełnym kodem źródłowym.	Otwórz

Breadcrumb

TsgcHTMLComponent_Breadcrumb