Badge Component — sgcHTML | eSeGeCe

Badge

TsgcHTMLComponent_Badge — erzeugen Sie ein einzelnes Bootstrap-5-Abzeichen mit Farbe, Pill-Form, einem Inline-Icon und einem positionierbaren Benachrichtigungspunkt-Modus, in Delphi, C++ Builder und .NET.

Auf einen Blick

TsgcHTMLComponent_Badge

Setzen Sie den Text und die Farbe, und lesen Sie dann die HTML-Eigenschaft — oder überspringen Sie das Erstellen/Freigeben ganz mit dem statischen Build-Helfer.

Komponentenklasse

TsgcHTMLComponent_Badge

Rendert

Ein einzelnes Bootstrap-5-<span class="badge">

Familie

Inhalt & Layout

Sprachen

Delphi, C++ Builder, .NET

QuickStart

In einer Zeile erstellen, oder vollständig konfigurieren

Rufen Sie den statischen Build(text, color, pill) für ein schnelles Inline-Abzeichen auf, oder erstellen Sie die Komponente, um zusätzlich Icon und Positioned zu setzen, und lesen Sie dann 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);

Referenz

Wichtige Eigenschaften & Methoden

Die Member, die Sie am häufigsten verwenden.

Text & Farbe

Text ist die Beschriftung; Color (TsgcHTMLBadgeStyle: bgPrimary, bgSecondary, bgSuccess, bgDanger, bgWarning, bgInfo, bgLight, bgDark) legt die Bootstrap-Variante fest.

Pill

Pill schaltet das Abzeichen auf die vollständig abgerundete rounded-pill-Form um.

Icon

Icon rendert ein <i>-Element (z. B. eine Bootstrap-Icons-Klasse) vor dem Text.

Positioned

Positioned fügt position-absolute top-0 start-100 translate-middle hinzu und verwandelt das Abzeichen in einen Benachrichtigungspunkt, verankert an einem position-relative-Elternelement.

Statischer Helfer

Build(aText, aColor, aPill) gibt das Abzeichen-HTML direkt zurück, ohne eine Instanz erstellen oder freigeben zu müssen.

Ausgabe

HTML gibt ein einzelnes <span class="badge bg-...">-Element zurück, bereit zum Inline-Einbetten.

Ressourcen

Weiter entdecken

	Online-HilfeVollständige API-Referenz und Verwendungshandbuch für diese Komponente.	Öffnen
	Alle sgcHTML-KomponentenDurchsuchen Sie die vollständige Funktionsmatrix von über 80 Komponenten.	Öffnen
	Kostenlose Testversion herunterladenDie 30-Tage-Testversion enthält die 60.HTML-Demoprojekte.	Öffnen
	PreiseSingle-, Team- und Site-Lizenzen mit vollständigem Quellcode.	Öffnen