Sidebar

TsgcHTMLComponent_Sidebar — 渲染一个垂直侧边导航，带有图标、区块标题、分隔符和可选的页脚，适用于 Delphi、C++ Builder 和 .NET。

概览

TsgcHTMLComponent_Sidebar

一个导航组件，发出一个 Bootstrap 5 垂直侧边栏，带有可选的品牌标识、导航胶囊链接、标题、分隔符和页脚。添加项目，然后读取 HTML 属性。

组件类

TsgcHTMLComponent_Sidebar

渲染为

Bootstrap 5 侧边栏标记

家族

导航与结构

语言

Delphi, C++ Builder, .NET

快速入门

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

设置 Brand 和 Width，将项目（链接、标题、分隔符）推入 Items，然后读取 HTML。

uses
  sgcHTML_Component_Sidebar;

var
  oSidebar: TsgcHTMLComponent_Sidebar;
begin
  oSidebar := TsgcHTMLComponent_Sidebar.Create(nil);
  try
    oSidebar.Brand := 'Dashboard';
    oSidebar.Width := '240px';
    oSidebar.Dark := True;

    with oSidebar.Items.Add do begin Text := 'Main'; Header := True; end;
    with oSidebar.Items.Add do begin Text := 'Home'; Href := '/'; Active := True; end;
    with oSidebar.Items.Add do begin Text := 'Reports'; Href := '/reports'; end;
    oSidebar.Items.Add.Divider := True;
    with oSidebar.Items.Add do begin Text := 'Settings'; Href := '/settings'; end;

    oSidebar.FooterText := 'v2.0';

    WebModule.Response := oSidebar.HTML;   // vertical <div> nav
  finally
    oSidebar.Free;
  end;
end;
// includes: sgcHTML_Component_Sidebar.hpp

TsgcHTMLComponent_Sidebar *oSidebar = new TsgcHTMLComponent_Sidebar(NULL);
try
{
  oSidebar->Brand = "Dashboard";
  oSidebar->Width = "240px";
  oSidebar->Dark = true;

  TsgcHTMLSidebarItem *oItem = oSidebar->Items->Add();
  oItem->Text = "Main"; oItem->Header = true;
  oItem = oSidebar->Items->Add(); oItem->Text = "Home"; oItem->Href = "/"; oItem->Active = true;
  oItem = oSidebar->Items->Add(); oItem->Text = "Reports"; oItem->Href = "/reports";
  oSidebar->Items->Add()->Divider = true;
  oItem = oSidebar->Items->Add(); oItem->Text = "Settings"; oItem->Href = "/settings";

  oSidebar->FooterText = "v2.0";

  String html = oSidebar->HTML;   // vertical <div> nav
}
__finally
{
  delete oSidebar;
}
using esegece.sgcWebSockets;

var sidebar = new TsgcHTMLComponent_Sidebar();
sidebar.Brand = "Dashboard";
sidebar.Width = "240px";
sidebar.Dark = true;

var item = sidebar.Items.Add();
item.Text = "Main"; item.Header = true;
item = sidebar.Items.Add(); item.Text = "Home"; item.Href = "/"; item.Active = true;
item = sidebar.Items.Add(); item.Text = "Reports"; item.Href = "/reports";
sidebar.Items.Add().Divider = true;
item = sidebar.Items.Add(); item.Text = "Settings"; item.Href = "/settings";

sidebar.FooterText = "v2.0";

string html = sidebar.HTML;   // vertical <div> nav
参考

关键属性与方法

您最常使用的成员。

品牌

Brand 设置显示在面板顶部的标题；BrandHref 是它指向的链接（默认为 #）。

Items

Items.Add 返回一个 TsgcHTMLSidebarItem；为链接设置 Text、Href、Icon 和 Active，或为区块标题或分隔线标记 Header / Divider。

主题

Dark（默认 True）在暗色和明亮背景及其匹配的链接文本颜色之间切换。

布局

Width 设置面板宽度（默认为 250px）；Fixed 将其固定到左边缘；SidebarID 和 CSSClass 设置 id 和额外的类。

页脚

FooterHTML 在分隔符下方注入原始标记，或在未设置 HTML 时，FooterText 渲染一个淡色标题。

输出

HTML 返回完整的垂直 <div> 导航 — 直接提供服务，或将其赋给页面模板的 BodyContent。

资源

继续探索

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

准备好开始了吗？

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

下载免费试用版 查看价格