Popover

TsgcHTMLComponent_Popover — 为任意触发元素附加一个带有标题和主体的 Bootstrap 5 弹出框,带有可配置的放置、触发和关闭行为,适用于 Delphi、C++ Builder 和 .NET。

TsgcHTMLComponent_Popover

一个弹出框组件,用 Bootstrap 5 popover 数据属性和自动初始化脚本包装触发元素。设置内容、标题和主体,然后读取 HTML 属性 — 或调用静态 Build 辅助方法实现一行代码。

组件类

TsgcHTMLComponent_Popover

渲染为

Bootstrap 5 弹出框标记

语言

Delphi, C++ Builder, .NET

一行代码构建,或完整配置它

调用 BuildButton(text, title, body, style, placement) 可获得弹出框按钮,或创建组件、设置 PlacementTrigger,然后读取 HTML

uses
  sgcHTML_Enums, sgcHTML_Component_Popover;

// One-line static helper (primary form):
var
  vHTML: string;
begin
  vHTML := TsgcHTMLComponent_Popover.BuildButton('More info',
    'Pricing', 'All licenses include full source code.',
    bsPrimary, plTop);
  WebModule.Response := vHTML;
end;

// Or configure it fully:
var
  oPop: TsgcHTMLComponent_Popover;
begin
  oPop := TsgcHTMLComponent_Popover.Create(nil);
  try
    oPop.Content := '<a href="#" class="btn btn-info">Details</a>';
    oPop.Title := 'Shipping';
    oPop.Body := 'Free delivery on orders over 50.';
    oPop.Placement := plRight;
    oPop.Trigger := ptHover;
    oPop.Dismissible := True;

    WebModule.Response := oPop.HTML;   // trigger + popover init script
  finally
    oPop.Free;
  end;
end;
// includes: sgcHTML_Enums.hpp, sgcHTML_Component_Popover.hpp

// One-line static helper (primary form):
String html = TsgcHTMLComponent_Popover::BuildButton("More info",
  "Pricing", "All licenses include full source code.",
  bsPrimary, plTop);

// Or configure it fully:
TsgcHTMLComponent_Popover *oPop = new TsgcHTMLComponent_Popover(NULL);
try
{
  oPop->Content = "<a href=\"#\" class=\"btn btn-info\">Details</a>";
  oPop->Title = "Shipping";
  oPop->Body = "Free delivery on orders over 50.";
  oPop->Placement = plRight;
  oPop->Trigger = ptHover;
  oPop->Dismissible = true;

  String html = oPop->HTML;   // trigger + popover init script
}
__finally
{
  delete oPop;
}
using esegece.sgcWebSockets;

// One-line static helper (primary form):
string html = TsgcHTMLComponent_Popover.BuildButton("More info",
    "Pricing", "All licenses include full source code.",
    TsgcHTMLButtonStyle.bsPrimary, TsgcHTMLPlacement.plTop);

// Or configure it fully:
var pop = new TsgcHTMLComponent_Popover();
pop.Content = "<a href=\"#\" class=\"btn btn-info\">Details</a>";
pop.Title = "Shipping";
pop.Body = "Free delivery on orders over 50.";
pop.Placement = TsgcHTMLPlacement.plRight;
pop.Trigger = TsgcHTMLPopoverTrigger.ptHover;
pop.Dismissible = true;

string html = pop.HTML;   // trigger + popover init script

关键属性与方法

您最常使用的成员。

内容

Content 是触发元素的内部 HTML;为空时,将使用由 TitleContentStyle 构建的样式化按钮代替。

弹出框文本

Title 设置弹出框标题,Body 设置其文本(Bootstrap data-bs-content)。

放置

Placement 通过 TsgcHTMLPlacementplTopplBottomplLeftplRight 定位弹出框。

触发

Trigger 选择 ptClickptHoverptFocusptManualDismissible 在下次点击外部时关闭它。

初始化

AutoInit 追加一个为每个弹出框调用 new bootstrap.Popover 的脚本;通过 InitScript 覆盖该脚本。

静态辅助方法与输出

Build(content, title, body, placement, trigger)BuildButton(text, title, body, style, placement) 返回现成的标记;HTML 发出触发器及其初始化脚本。

继续探索

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

准备好开始了吗?

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