NavBar

TsgcHTMLComponent_NavBar — 渲染一个响应式顶部导航栏，带有品牌标识和可折叠的导航链接，适用于 Delphi、C++ Builder 和 .NET。

概览

TsgcHTMLComponent_NavBar

一个导航组件，发出带有品牌标识、响应式切换按钮和可折叠链接列表的 Bootstrap 5 <nav class="navbar">。设置品牌，添加项目，然后读取 HTML 属性。

组件类

TsgcHTMLComponent_NavBar

渲染为

Bootstrap 5 导航栏标记

家族

导航与结构

语言

Delphi, C++ Builder, .NET

快速入门

创建它、添加链接、渲染它

设置 Brand，向 Items 推入一个或多个项目，然后读取 HTML（或将其放入 TsgcHTMLTemplate_Bootstrap 页面）。

uses
  sgcHTML_Component_NavBar;

var
  oNavBar: TsgcHTMLComponent_NavBar;
begin
  oNavBar := TsgcHTMLComponent_NavBar.Create(nil);
  try
    oNavBar.Brand := 'Acme Inc.';
    oNavBar.BrandHref := '/';
    oNavBar.Theme := ntDark;
    oNavBar.Expand := neLarge;

    with oNavBar.Items.Add do begin Text := 'Home'; Href := '/'; Active := True; end;
    with oNavBar.Items.Add do begin Text := 'Products'; Href := '/products'; end;
    with oNavBar.Items.Add do begin Text := 'Contact'; Href := '/contact'; end;

    WebModule.Response := oNavBar.HTML;   // <nav class="navbar"> ...
  finally
    oNavBar.Free;
  end;
end;
// includes: sgcHTML_Component_NavBar.hpp

TsgcHTMLComponent_NavBar *oNavBar = new TsgcHTMLComponent_NavBar(NULL);
try
{
  oNavBar->Brand = "Acme Inc.";
  oNavBar->BrandHref = "/";
  oNavBar->Theme = ntDark;
  oNavBar->Expand = neLarge;

  TsgcHTMLNavItem *oItem = oNavBar->Items->Add();
  oItem->Text = "Home"; oItem->Href = "/"; oItem->Active = true;
  oItem = oNavBar->Items->Add(); oItem->Text = "Products"; oItem->Href = "/products";
  oItem = oNavBar->Items->Add(); oItem->Text = "Contact"; oItem->Href = "/contact";

  String html = oNavBar->HTML;   // <nav class="navbar"> ...
}
__finally
{
  delete oNavBar;
}
using esegece.sgcWebSockets;

var navbar = new TsgcHTMLComponent_NavBar();
navbar.Brand = "Acme Inc.";
navbar.BrandHref = "/";
navbar.Theme = TsgcHTMLNavBarTheme.ntDark;
navbar.Expand = TsgcHTMLNavBarExpand.neLarge;

var item = navbar.Items.Add();
item.Text = "Home"; item.Href = "/"; item.Active = true;
item = navbar.Items.Add(); item.Text = "Products"; item.Href = "/products";
item = navbar.Items.Add(); item.Text = "Contact"; item.Href = "/contact";

string html = navbar.HTML;   // <nav class="navbar"> ...
参考

关键属性与方法

您最常使用的成员。

品牌

Brand 设置显示在左侧的品牌文本；BrandHref 是它指向的链接（默认为 #）。

链接

Items.Add 返回一个 TsgcHTMLNavItem；设置其 Text、Href、Active 和 Disabled 以构建可折叠的链接列表。

主题

Theme 选择 ntDark（默认）或 ntLight，映射到 Bootstrap 暗色/明亮导航栏背景。

响应式断点

Expand 选择切换按钮何时折叠：neSmall、neMedium、neLarge（默认）、neXLarge 或 neAlways。

布局

Fluid 切换 container-fluid 与 container；NavBarID 设置元素 id；CSSClass 追加额外的类。

输出

HTML 返回带有品牌、切换按钮和可折叠导航的完整 <nav class="navbar"> — 直接提供服务，或将其赋给页面模板的 BodyContent。

资源

继续探索

所有 sgcHTML 组件浏览 60 多个组件的完整功能矩阵。 打开
下载免费试用版30 天试用版附带 60.HTML 演示项目。 打开
价格Single、Team 和 Site 授权，均含完整源代码。 打开

准备好开始了吗？

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

下载免费试用版 查看价格