Badge 组件 — sgcHTML | eSeGeCe

Badge

TsgcHTMLComponent_Badge — 渲染单个 Bootstrap 5 徽章,支持颜色、胶囊形状、内联图标和定位式通知圆点模式,适用于 Delphi、C++ Builder 和 .NET。

TsgcHTMLComponent_Badge

设置文本和颜色,然后读取 HTML 属性 — 或者直接使用静态 Build 辅助方法,完全跳过创建/释放步骤。

组件类

TsgcHTMLComponent_Badge

渲染为

单个 Bootstrap 5 <span class="badge">

语言

Delphi, C++ Builder, .NET

一行代码构建,或完全自定义配置

调用静态方法 Build(text, color, pill) 快速生成一个内联徽章,或者创建组件以同时设置 IconPositioned,然后读取 HTML

uses
  sgcHTML_Enums, sgcHTML_Component_Badge;

var
  oBadge: TsgcHTMLComponent_Badge;
begin
  oBadge := TsgcHTMLComponent_Badge.Create(nil);
  try
    oBadge.Text := '3';
    oBadge.Color := bgDanger;
    oBadge.Pill := True;
    oBadge.Positioned := True;

    WebModule.Response := oBadge.HTML;   // <span class="badge bg-danger rounded-pill ...">
  finally
    oBadge.Free;
  end;
end;

// Or the one-line static helper for a simple inline badge:
WebModule.Response := TsgcHTMLComponent_Badge.Build('New', bgSuccess, True);
// includes: sgcHTML_Enums.hpp, sgcHTML_Component_Badge.hpp

TsgcHTMLComponent_Badge *oBadge = new TsgcHTMLComponent_Badge(NULL);
try
{
  oBadge->Text = "3";
  oBadge->Color = bgDanger;
  oBadge->Pill = true;
  oBadge->Positioned = true;

  String html = oBadge->HTML;   // <span class="badge bg-danger rounded-pill ...">
}
__finally
{
  delete oBadge;
}

// Or the one-line static helper:
String html2 = TsgcHTMLComponent_Badge::Build("New", bgSuccess, true);
using esegece.sgcWebSockets;

var badge = new TsgcHTMLComponent_Badge();
badge.Text = "3";
badge.Color = TsgcHTMLBadgeStyle.bgDanger;
badge.Pill = true;
badge.Positioned = true;

string html = badge.HTML;   // <span class="badge bg-danger rounded-pill ...">

// Or the one-line static helper:
string html2 = TsgcHTMLComponent_Badge.Build("New", TsgcHTMLBadgeStyle.bgSuccess, true);

关键属性与方法

您最常使用的成员。

文本与颜色

Text 是标签文本;ColorTsgcHTMLBadgeStylebgPrimarybgSecondarybgSuccessbgDangerbgWarningbgInfobgLightbgDark)设置 Bootstrap 样式变体。

胶囊形状

Pill 将徽章切换为完全圆角的 rounded-pill 形状。

图标

Icon 在文本前渲染一个 <i> 元素(例如 Bootstrap Icons 的类名)。

定位

Positioned 添加 position-absolute top-0 start-100 translate-middle,将徽章变为锚定在 position-relative 父元素上的通知圆点。

静态辅助方法

Build(aText, aColor, aPill) 直接返回徽章的 HTML,无需创建或释放实例。

输出

HTML 返回单个 <span class="badge bg-..."> 元素,可直接内联嵌入。

继续探索

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

准备好开始了吗?

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