Badge Component — sgcHTML | eSeGeCe

Badge

TsgcHTMLComponent_Badge — renderizza un singolo badge Bootstrap 5 con colore, forma pill, un’icona inline e una modalità posizionata come indicatore di notifica, in Delphi, C++ Builder e .NET.

In sintesi

TsgcHTMLComponent_Badge

Imposta il testo e il colore, quindi leggi la proprietà HTML — oppure salta del tutto create/free con l’helper statico Build.

Classe del componente

TsgcHTMLComponent_Badge

Renderizza

A single Bootstrap 5 <span class="badge">

Famiglia

Contenuti e Layout

Linguaggi

Delphi, C++ Builder, .NET

QuickStart

Costruiscilo in una riga, oppure configuralo interamente

Chiama il metodo statico Build(text, color, pill) per un badge inline rapido, oppure crea il componente per impostare anche Icon e Positioned, quindi leggi 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);

Riferimento

Proprietà e metodi principali

I membri che utilizzerai più spesso.

Testo e colore

Text è l’etichetta; Color (TsgcHTMLBadgeStyle: bgPrimary, bgSecondary, bgSuccess, bgDanger, bgWarning, bgInfo, bgLight, bgDark) imposta la variante Bootstrap.

Pill

Pill passa il badge alla forma completamente arrotondata rounded-pill.

Icon

Icon renderizza un elemento <i> (ad es. una classe Bootstrap Icons) prima del testo.

Positioned

Positioned aggiunge position-absolute top-0 start-100 translate-middle, trasformando il badge in un indicatore di notifica ancorato a un genitore position-relative.

Helper statico

Build(aText, aColor, aPill) restituisce direttamente l’HTML del badge, senza dover creare o liberare un’istanza.

Output

HTML restituisce un singolo elemento <span class="badge bg-...">, pronto per essere incorporato inline.

Risorse

Continua a esplorare

	Guida in lineaRiferimento API completo e guida all’uso per questo componente.	Apri
	Tutti i componenti sgcHTMLEsplora la matrice completa delle funzionalità di oltre 80 componenti.	Apri
	Scarica la Prova GratuitaLa prova di 30 giorni include i progetti demo 60.HTML.	Apri
	PrezziLicenze Single, Team e Site con codice sorgente completo.	Apri