Badge Bileşeni — sgcHTML | eSeGeCe

Badge

TsgcHTMLComponent_Badge — Delphi, C++ Builder ve .NET'te renk, hap şekli, satır içi bir simge ve konumlandırılmış bir bildirim noktası modu içeren tekil bir Bootstrap 5 rozeti işleyin.

TsgcHTMLComponent_Badge

Metni ve rengi ayarlayın, ardından HTML özelliğini okuyun — ya da statik Build yardımcısıyla oluşturma/serbest bırakma adımını tamamen atlayın.

Bileşen sınıfı

TsgcHTMLComponent_Badge

İşler

Tekil bir Bootstrap 5 <span class="badge">

Diller

Delphi, C++ Builder, .NET

Tek satırda oluşturun ya da tam olarak yapılandırın

Hızlı bir satır içi rozet için statik Build(text, color, pill)'i çağırın, ya da Icon ve Positioned'ı da ayarlamak için bileşeni oluşturun, ardından HTML'i okuyun.

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);

Temel özellikler & yöntemler

En sık başvurduğunuz üyeler.

Metin & renk

Text, etikettir; Color (TsgcHTMLBadgeStyle: bgPrimary, bgSecondary, bgSuccess, bgDanger, bgWarning, bgInfo, bgLight, bgDark), Bootstrap varyantını ayarlar.

Hap

Pill, rozeti tamamen yuvarlatılmış rounded-pill şekline geçirir.

Simge

Icon, metinden önce bir <i> öğesi (örn. bir Bootstrap Icons sınıfı) işler.

Konumlandırılmış

Positioned, position-absolute top-0 start-100 translate-middle ekler ve rozeti bir position-relative üst öğeye çapalanmış bir bildirim noktasına dönüştürür.

Statik yardımcı

Build(aText, aColor, aPill), oluşturulacak ya da serbest bırakılacak bir örnek olmadan rozet HTML'ini doğrudan döndürür.

Çıktı

HTML, satır içi olarak gömülmeye hazır tekil bir <span class="badge bg-..."> öğesi döndürür.

Keşfetmeye devam edin

Çevrimiçi yardımBu bileşen için tam API referansı ve kullanım kılavuzu.
Tüm sgcHTML Bileşenleri80'den fazla bileşenin tam özellik matrisine göz atın.
Ücretsiz Deneme Sürümünü İndirin30 günlük deneme, 60.HTML demo projeleriyle birlikte gelir.
FiyatlandırmaTam kaynak kodlu Single, Team ve Site lisansları.

Başlamaya Hazır mısınız?

Ücretsiz deneme sürümünü indirin ve Delphi, C++ Builder ve .NET'te web arayüzleri oluşturmaya başlayın.