StatCard
TsgcHTMLComponent_StatCard — Delphi, C++ Builder 및 .NET에서 아이콘, 추세 화살표 및 선택적 그라데이션 배경을 갖춘 대시보드 KPI/통계 카드를 렌더링합니다.
TsgcHTMLComponent_StatCard — Delphi, C++ Builder 및 .NET에서 아이콘, 추세 화살표 및 선택적 그라데이션 배경을 갖춘 대시보드 KPI/통계 카드를 렌더링합니다.
Bootstrap card 위에 구축된 측정 타일입니다. 제목과 값을 설정하고, 아이콘과 추세를 추가하고, 선택적으로 그라데이션을 적용한 다음, HTML 속성을 읽습니다.
TsgcHTMLComponent_StatCard
Bootstrap 5 card 마크업
Delphi, C++ Builder, .NET
Title과 Value를 할당하고, Color와 Trend를 선택하고, 선택적으로 Gradient를 선택한 다음, HTML을 읽습니다 — 또는 정적 한 줄 Build 헬퍼를 사용하십시오.
uses
sgcHTML_Component_StatCard;
var
oStat: TsgcHTMLComponent_StatCard;
begin
oStat := TsgcHTMLComponent_StatCard.Create(nil);
try
oStat.Title := 'Monthly Revenue';
oStat.Value := '$48,200';
oStat.Icon := '●';
oStat.Color := scSuccess;
oStat.Trend := stUp;
oStat.TrendValue := '12.5%';
WebModule.Response := oStat.HTML; // Bootstrap card
finally
oStat.Free;
end;
end;
// Or in a single line with the static helper:
Result := TsgcHTMLComponent_StatCard.Build('Monthly Revenue', '$48,200',
scSuccess, stUp, '12.5%', 'kpiRevenue', sgBlueViolet);// includes: sgcHTML_Component_StatCard.hpp
TsgcHTMLComponent_StatCard *oStat = new TsgcHTMLComponent_StatCard(NULL);
try
{
oStat->Title = "Monthly Revenue";
oStat->Value = "$48,200";
oStat->Icon = "●";
oStat->Color = scSuccess;
oStat->Trend = stUp;
oStat->TrendValue = "12.5%";
String html = oStat->HTML; // Bootstrap card
}
__finally
{
delete oStat;
}
// Or in a single line with the static helper:
String html = TsgcHTMLComponent_StatCard::Build("Monthly Revenue", "$48,200",
scSuccess, stUp, "12.5%", "kpiRevenue", sgBlueViolet);using esegece.sgcWebSockets;
var stat = new TsgcHTMLComponent_StatCard();
stat.Title = "Monthly Revenue";
stat.Value = "$48,200";
stat.Icon = "●";
stat.Color = TsgcHTMLStatColor.scSuccess;
stat.Trend = TsgcHTMLStatTrend.stUp;
stat.TrendValue = "12.5%";
string html = stat.HTML; // Bootstrap card
// Or in a single line with the static helper:
string oneLine = TsgcHTMLComponent_StatCard.Build("Monthly Revenue", "$48,200",
TsgcHTMLStatColor.scSuccess, TsgcHTMLStatTrend.stUp, "12.5%", "kpiRevenue",
TsgcHTMLStatGradient.sgBlueViolet);가장 자주 사용하게 되는 멤버.
Title은 카드에 레이블을 지정하고, Value는 주요 수치를 표시하며, Icon은 모서리에 인라인 아이콘 글리프를 렌더링합니다.
Trend(TsgcHTMLStatTrend: stUp, stDown, stNeutral)는 색상 화살표를 그리고 TrendValue는 변화량 텍스트를 설정합니다.
Color(TsgcHTMLStatColor)는 Bootstrap 컨텍스트 색상으로 테두리, 값 및 아이콘에 테마를 적용합니다.
Gradient(TsgcHTMLStatGradient)는 사전 설정 그라데이션을 적용합니다. GradientStartColor, GradientEndColor 및 GradientAngle은 사용자 지정 그라데이션을 정의합니다.
FooterText는 캡션 행을 추가하고, CardID는 DOM id를 설정하며, CSSClass는 추가 클래스를 덧붙입니다.
Build(aTitle, aValue, aColor, aTrend, aTrendValue, aCardID, aGradient)는 단일 정적 호출로 카드 HTML을 반환합니다.