Badge 컴포넌트 — sgcHTML | eSeGeCe

Badge

TsgcHTMLComponent_Badge — Delphi, C++ Builder 및 .NET에서 색상, 필 모양, 인라인 아이콘 및 위치 지정된 알림 점 모드를 갖춘 단일 Bootstrap 5 배지를 렌더링합니다.

TsgcHTMLComponent_Badge

텍스트와 색상을 설정한 다음, HTML 속성을 읽습니다 — 또는 정적 Build 헬퍼로 생성/해제 과정을 완전히 건너뛸 수 있습니다.

컴포넌트 클래스

TsgcHTMLComponent_Badge

렌더링

단일 Bootstrap 5 <span class="badge">

언어

Delphi, C++ Builder, .NET

한 줄로 만들거나, 완전히 구성하기

빠른 인라인 배지를 위해 정적 Build(text, color, pill)을 호출하거나, IconPositioned도 설정하려면 컴포넌트를 생성한 다음, 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);

주요 속성 및 메서드

가장 자주 사용하게 되는 멤버.

텍스트 및 색상

Text는 레이블입니다. Color(TsgcHTMLBadgeStyle: bgPrimary, bgSecondary, bgSuccess, bgDanger, bgWarning, bgInfo, bgLight, bgDark)는 Bootstrap 변형을 설정합니다.

Pill은 배지를 완전히 둥근 rounded-pill 모양으로 전환합니다.

아이콘

Icon은 텍스트 앞에 <i> 요소(예: Bootstrap Icons 클래스)를 렌더링합니다.

위치 지정

Positionedposition-absolute top-0 start-100 translate-middle을 추가하여, 배지를 position-relative 부모에 고정된 알림 점으로 전환합니다.

정적 헬퍼

Build(aText, aColor, aPill)은 생성하거나 해제할 인스턴스 없이 배지 HTML을 직접 반환합니다.

출력

HTML은 인라인으로 바로 삽입할 수 있는 단일 <span class="badge bg-..."> 요소를 반환합니다.

계속 살펴보기

온라인 도움말이 찱포넌트의 전체 API 참조 및 사용 가이드입니다.
모든 sgcHTML 컴포넌트80개 이상의 컴포넌트 전체 기능 매트릭스를 둘러보십시오.
무료 체험판 다운로드30일 체험판에는 60.HTML 데모 프로젝트가 포함됩니다.
가격전체 소스 코드가 포함된 Single, Team 및 Site 라이선스.

시작할 준비가 되셨습니까?

무료 체험판을 다운로드하고 Delphi, C++ Builder 및 .NET에서 웹 UI를 구축하기 시작하십시오.