Badge

TsgcHTMLComponent_Badge — renderiza una insignia individual de Bootstrap 5 con color, forma de píldora, un icono en línea y un modo de punto de notificación posicionado, en Delphi, C++ Builder y .NET.

De un vistazo

TsgcHTMLComponent_Badge

Define el texto y el color, y luego lee la propiedad HTML — o evita por completo la creación/liberación con el ayudante estático Build.

Clase del componente

TsgcHTMLComponent_Badge

Genera

Una sola etiqueta <span class="badge"> de Bootstrap 5

Familia

Contenido y Diseño

Lenguajes

Delphi, C++ Builder, .NET

Inicio rápido

Constrúyela en una línea, o configúrala por completo

Llama al método estático Build(text, color, pill) para una insignia rápida en línea, o crea el componente para también definir Icon y Positioned, y luego lee 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);

Referencia

Propiedades y métodos clave

Los miembros que más vas a usar.

Texto y color

Text es la etiqueta; Color (TsgcHTMLBadgeStyle: bgPrimary, bgSecondary, bgSuccess, bgDanger, bgWarning, bgInfo, bgLight, bgDark) define la variante de Bootstrap.

Píldora

Pill cambia la insignia a la forma completamente redondeada rounded-pill.

Icono

Icon renderiza un elemento <i> (por ejemplo, una clase de Bootstrap Icons) antes del texto.

Posicionado

Positioned añade position-absolute top-0 start-100 translate-middle, convirtiendo la insignia en un punto de notificación anclado a un elemento padre position-relative.

Ayudante estático

Build(aText, aColor, aPill) devuelve el HTML de la insignia directamente, sin necesidad de crear ni liberar una instancia.

Salida

HTML devuelve un único elemento <span class="badge bg-...">, listo para insertarlo en línea.

Recursos

Sigue explorando

	Ayuda en líneaReferencia completa de la API y guía de uso para este componente.	Abrir
	Todos los componentes de sgcHTMLExplora la matriz completa de más de 80 componentes.	Abrir
	Descargar prueba gratuitaLa prueba de 30 días incluye los proyectos de demostración 60.HTML.	Abrir
	PreciosLicencias Single, Team y Site con código fuente completo.	Abrir