StatCard
TsgcHTMLComponent_StatCard — 渲染一个仪表板 KPI/统计卡片,带有图标、趋势箭头和可选的渐变背景,适用于 Delphi、C++ Builder 和 .NET。
TsgcHTMLComponent_StatCard — 渲染一个仪表板 KPI/统计卡片,带有图标、趋势箭头和可选的渐变背景,适用于 Delphi、C++ Builder 和 .NET。
一个基于 Bootstrap card 构建的指标磁贴。设置标题和数值,添加图标和趋势,可选地应用渐变,然后读取 HTML 属性。
赋值 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。