Badge-component — sgcHTML | eSeGeCe

Badge

TsgcHTMLComponent_Badge — render een enkele Bootstrap 5-badge met kleur, pilvorm, een inline icoon en een positioneerbare meldingsstip-modus, in Delphi, C++ Builder en .NET.

In één oogopslag

TsgcHTMLComponent_Badge

Stel de tekst en kleur in en lees dan de HTML-eigenschap — of sla het aanmaken/vrijgeven helemaal over met de statische Build-helper.

Componentklasse

TsgcHTMLComponent_Badge

Rendert

Een enkele Bootstrap 5 <span class="badge">

Familie

Content en layout

Talen

Delphi, C++ Builder, .NET

QuickStart

Bouw het in één regel, of configureer het volledig

Roep de statische Build(text, color, pill) aan voor een snelle inline badge, of maak het component aan om ook Icon en Positioned in te stellen, en lees dan 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);

Referentie

Belangrijkste eigenschappen en methoden

De members die je het vaakst gebruikt.

Tekst en kleur

Text is het label; Color (TsgcHTMLBadgeStyle: bgPrimary, bgSecondary, bgSuccess, bgDanger, bgWarning, bgInfo, bgLight, bgDark) stelt de Bootstrap-variant in.

Pill

Pill schakelt de badge naar de volledig afgeronde rounded-pill-vorm.

Icon

Icon rendert een <i>-element (bijvoorbeeld een Bootstrap Icons-klasse) vóór de tekst.

Positioned

Positioned voegt position-absolute top-0 start-100 translate-middle toe, waardoor de badge een meldingsstip wordt die verankerd is aan een position-relative-ouder.

Statische helper

Build(aText, aColor, aPill) retourneert de badge-HTML rechtstreeks, zonder een instantie aan te maken of vrij te geven.

Uitvoer

HTML retourneert één <span class="badge bg-...">-element, klaar om inline in te sluiten.

Bronnen

Blijf ontdekken

	Online helpVolledige API-referentie en gebruikshandleiding voor dit onderdeel.	Open
	Alle sgcHTML-componentenBlader door de volledige functiematrix van 80+ componenten.	Openen
	Download gratis proefversieDe proefversie van 30 dagen bevat de 60.HTML-demoprojecten.	Openen
	PrijzenSingle-, Team- en Site-licenties met volledige broncode.	Openen