Breadcrumb コンポーネント — sgcHTML

ひと目でわかる

Bootstrap の <ol class="breadcrumb"> を出力するナビゲーションコンポーネントです。最後の項目（または Active が指定された項目）が現在のページとしてレンダリングされます。項目を追加したら、HTML プロパティを読み取ります。

コンポーネントクラス

TsgcHTMLComponent_Breadcrumb

レンダリング結果

Bootstrap のパンくずマークアップ

ファミリー

ナビゲーション & 構造

言語

Delphi, C++ Builder, .NET

クイックスタート

作成し、項目を追加し、レンダリングする

パンくずの各セグメントごとに項目を 1 つ Items に追加し、必要に応じてカスタム Divider を設定したら、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">

リファレンス

主なプロパティ & メソッド

最もよく使うメンバー。

Items

Items.Add は TsgcHTMLBreadcrumbItem を返します。各パンくずセグメントの Text と Href を順番に設定します。

現在のページ

最後の項目、または Active が指定された項目は、リンクではなく aria-current="page" を付けたプレーンテキストとしてレンダリングされます。

区切り

Divider は、Bootstrap の --bs-breadcrumb-divider 変数を介して項目間の区切り（例：'>' や '/'）を上書きします。

識別子

BreadcrumbID は、スタイリングやスクリプトのフック用に、ラップする <nav> の id を設定します。

出力

HTML は、順序付きリストを含む完全な <nav aria-label="breadcrumb"> を返します — そのまま配信するか、ページテンプレートの BodyContent に割り当てます。

リソース

さらに詳しく

	すべての sgcHTML コンポーネント60 種類以上のコンポーネントの完全な機能マトリックスを見る。	開く
	無料体験版をダウンロード30 日間の体験版には 60.HTML デモプロジェクトが付属します。	開く
	価格完全なソースコード付きの Single、Team、Site ライセンス。	開く

Breadcrumb

TsgcHTMLComponent_Breadcrumb