Breadcrumb

TsgcHTMLComponent_Breadcrumb — 渲染一条显示用户在站点中位置的面包屑路径，适用于 Delphi、C++ Builder 和 .NET。

概览

TsgcHTMLComponent_Breadcrumb

一个导航组件，发出 Bootstrap <ol class="breadcrumb">。最后一个项目（或被标记为 Active 的项目）渲染为当前页面。添加项目，然后读取 HTML 属性。

组件类

TsgcHTMLComponent_Breadcrumb

渲染为

Bootstrap 面包屑标记

家族

导航与结构

语言

Delphi, C++ Builder, .NET

快速入门

创建它、添加项目、渲染它

为每个路径段向 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 授权，均含完整源代码。 打开

准备好开始了吗？

下载免费试用版，开始在 Delphi、C++ Builder 和 .NET 中构建 Web 界面。

下载免费试用版 查看价格