StatCard
TsgcHTMLComponent_StatCard — renderizza una card KPI/statistica per dashboard con un’icona, una freccia di tendenza e uno sfondo a gradiente opzionale, in Delphi, C++ Builder e .NET.
TsgcHTMLComponent_StatCard — renderizza una card KPI/statistica per dashboard con un’icona, una freccia di tendenza e uno sfondo a gradiente opzionale, in Delphi, C++ Builder e .NET.
Un riquadro metrico costruito sulla card Bootstrap. Imposta un titolo e un valore, aggiungi un’icona e una tendenza, applica facoltativamente un gradiente, quindi leggi la proprietà HTML.
TsgcHTMLComponent_StatCard
Bootstrap 5 card markup
Delphi, C++ Builder, .NET
Assegna Title e Value, scegli un Color e una Trend, facoltativamente un Gradient, quindi leggi HTML — oppure usa l’helper statico Build a riga singola.
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);I membri che utilizzerai più spesso.
Title etichetta la card, Value mostra il valore principale e Icon renderizza un glifo icona inline nell’angolo.
Trend (TsgcHTMLStatTrend: stUp, stDown, stNeutral) disegna una freccia colorata e TrendValue imposta il testo della variazione.
Color (TsgcHTMLStatColor) applica il tema a bordo, valore e icona con un colore contestuale Bootstrap.
Gradient (TsgcHTMLStatGradient) applica un gradiente predefinito; GradientStartColor, GradientEndColor e GradientAngle ne definiscono uno personalizzato.
FooterText aggiunge una riga di didascalia, CardID imposta l’id DOM e CSSClass aggiunge classi extra.
Build(aTitle, aValue, aColor, aTrend, aTrendValue, aCardID, aGradient) restituisce l’HTML della card con una singola chiamata statica.