Dropdown

TsgcHTMLComponent_Dropdown — 渲染一个 Bootstrap 下拉按钮,带有由链接、标题和分隔符组成的菜单,适用于 Delphi、C++ Builder 和 .NET。

TsgcHTMLComponent_Dropdown

一个下拉组件,发出 Bootstrap 5 切换按钮及其 <ul class="dropdown-menu">。添加菜单项,设置按钮样式,然后读取 HTML 属性。

组件类

TsgcHTMLComponent_Dropdown

渲染为

Bootstrap 5 dropdown 按钮 + 菜单

语言

Delphi, C++ Builder, .NET

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

设置 ButtonTextButtonStyleEnum,添加链接 / 标题 / 分隔符项目,然后读取 HTML(或将其放入 TsgcHTMLTemplate_Bootstrap 页面)。

uses
  sgcHTML_Enums, sgcHTML_Component_Dropdown;

var
  oDropdown: TsgcHTMLComponent_Dropdown;
  oItem: TsgcHTMLDropdownItem;
begin
  oDropdown := TsgcHTMLComponent_Dropdown.Create(nil);
  try
    oDropdown.ButtonText := 'Account';
    oDropdown.ButtonStyleEnum := bsPrimary;

    oItem := oDropdown.Items.Add;
    oItem.Text := 'Settings';
    oItem.Header := True;

    oItem := oDropdown.Items.Add;
    oItem.Text := 'Profile';
    oItem.Href := '/profile';

    oItem := oDropdown.Items.Add;
    oItem.Divider := True;

    oItem := oDropdown.Items.Add;
    oItem.Text := 'Sign out';
    oItem.Href := '/logout';

    WebModule.Response := oDropdown.HTML;   // Bootstrap dropdown
  finally
    oDropdown.Free;
  end;
end;
// includes: sgcHTML_Enums.hpp, sgcHTML_Component_Dropdown.hpp

TsgcHTMLComponent_Dropdown *oDropdown = new TsgcHTMLComponent_Dropdown(NULL);
try
{
  oDropdown->ButtonText = "Account";
  oDropdown->ButtonStyleEnum = bsPrimary;

  TsgcHTMLDropdownItem *oItem = oDropdown->Items->Add();
  oItem->Text = "Settings";
  oItem->Header = true;

  oItem = oDropdown->Items->Add();
  oItem->Text = "Profile";
  oItem->Href = "/profile";

  oItem = oDropdown->Items->Add();
  oItem->Divider = true;

  oItem = oDropdown->Items->Add();
  oItem->Text = "Sign out";
  oItem->Href = "/logout";

  String html = oDropdown->HTML;   // Bootstrap dropdown
}
__finally
{
  delete oDropdown;
}
using esegece.sgcWebSockets;

var dropdown = new TsgcHTMLComponent_Dropdown();
dropdown.ButtonText = "Account";
dropdown.ButtonStyleEnum = TsgcHTMLButtonStyle.bsPrimary;

var item = dropdown.Items.Add();
item.Text = "Settings";
item.Header = true;

item = dropdown.Items.Add();
item.Text = "Profile";
item.Href = "/profile";

item = dropdown.Items.Add();
item.Divider = true;

item = dropdown.Items.Add();
item.Text = "Sign out";
item.Href = "/logout";

string html = dropdown.HTML;   // Bootstrap dropdown

关键属性与方法

您最常使用的成员。

Items

ItemsTsgcHTMLDropdownItems 集合;Items.Add 返回一个带有 TextHrefDisabled 以及 Header / Divider 标志的 TsgcHTMLDropdownItem

项目种类

设置 Header 表示区块标签,Divider 表示分隔线,或两者都不设置以构成普通链接条目;Disabled 将条目置灰。

按钮

ButtonText 是切换按钮的标题;ButtonStyleEnum(如 bsPrimary 之类的 TsgcHTMLButtonStyle)选择变体,ButtonClass 用原始类覆盖它。

拆分

Split 将切换按钮渲染为主操作按钮旁边的独立箭头按钮。

输出

HTML 返回下拉包装器、切换按钮和菜单,DropdownID 设置其元素 id — 直接提供服务,或将其赋给页面模板的 BodyContent

继续探索

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

准备好开始了吗?

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