Komponent Badge — sgcHTML | eSeGeCe

Badge

TsgcHTMLComponent_Badge — renderuje pojedynczą plakietkę Bootstrap 5 z kolorem, kształtem pigułki, ikoną w linii i trybem pozycjonowanej kropki powiadomienia, w Delphi, C++ Builder i .NET.

W skrócie

TsgcHTMLComponent_Badge

Ustaw tekst i kolor, a następnie odczytaj właściwość HTML — lub całkowicie pomiń tworzenie/zwalnianie obiektu dzięki statycznej metodzie pomocniczej Build.

Klasa komponentu

TsgcHTMLComponent_Badge

Renderuje

Pojedynczy element Bootstrap 5 <span class="badge">

Rodzina

Treść i układ

Języki

Delphi, C++ Builder, .NET

Szybki start

Zbuduj w jednej linii lub skonfiguruj w pełni

Wywołaj statyczną metodę Build(text, color, pill), aby szybko utworzyć plakietkę w linii, albo utwórz komponent, aby dodatkowo ustawić Icon i Positioned, a następnie odczytaj 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);

Dokumentacja

Kluczowe właściwości i metody

Składniki, po które sięgasz najczęściej.

Tekst i kolor

Text to etykieta; Color (TsgcHTMLBadgeStyle: bgPrimary, bgSecondary, bgSuccess, bgDanger, bgWarning, bgInfo, bgLight, bgDark) ustawia wariant Bootstrap.

Pigułka

Pill przełącza plakietkę na w pełni zaokrąglony kształt rounded-pill.

Ikona

Icon renderuje element <i> (np. klasę Bootstrap Icons) przed tekstem.

Pozycjonowanie

Positioned dodaje klasy position-absolute top-0 start-100 translate-middle, zamieniając plakietkę w kropkę powiadomienia zakotwiczoną w elemencie nadrzędnym position-relative.

Metoda statyczna

Build(aText, aColor, aPill) zwraca kod HTML plakietki bezpośrednio, bez potrzeby tworzenia ani zwalniania instancji.

Wynik

HTML zwraca pojedynczy element <span class="badge bg-...">, gotowy do osadzenia w linii.

Zasoby

Poznawaj dalej

	Pomoc onlinePełna dokumentacja API i przewodnik użytkowania tego komponentu.	Otwórz
	Wszystkie komponenty sgcHTMLPrzejrzyj pełną matrycę funkcji 80+ komponentów.	Otwórz
	Pobierz bezpłatną wersję próbną30-dniowa wersja próbna zawiera projekty demonstracyjne 60.HTML.	Otwórz
	CennikLicencje Single, Team i Site z pełnym kodem źródłowym.	Otwórz