Badge
TsgcHTMLComponent_Badge — Delphi、C++ Builder、.NET で、色、ピル形状、インラインアイコン、位置指定された通知ドットモードを備えた、単一の Bootstrap 5 バッジをレンダリングします。
TsgcHTMLComponent_Badge — Delphi、C++ Builder、.NET で、色、ピル形状、インラインアイコン、位置指定された通知ドットモードを備えた、単一の Bootstrap 5 バッジをレンダリングします。
テキストと色を設定してから、HTML プロパティを読み取ります — または、静的な Build ヘルパーを使えば create/free 自体を省略できます。
TsgcHTMLComponent_Badge
単一の Bootstrap 5 <span class="badge">
Delphi, C++ Builder, .NET
手早くインラインバッジを作るには静的な Build(text, color, pill) を呼び出し、Icon や Positioned も設定したい場合はコンポーネントを作成してから 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 はラベルで、Color（TsgcHTMLBadgeStyle: bgPrimary、bgSecondary、bgSuccess、bgDanger、bgWarning、bgInfo、bgLight、bgDark）は 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-..."> 要素を返します。