StatCard

TsgcHTMLComponent_StatCard — 渲染一个仪表板 KPI/统计卡片,带有图标、趋势箭头和可选的渐变背景,适用于 Delphi、C++ Builder 和 .NET。

TsgcHTMLComponent_StatCard

一个基于 Bootstrap card 构建的指标磁贴。设置标题和数值,添加图标和趋势,可选地应用渐变,然后读取 HTML 属性。

组件类

TsgcHTMLComponent_StatCard

渲染为

Bootstrap 5 card 标记

语言

Delphi, C++ Builder, .NET

创建它、设置指标、渲染它

赋值 TitleValue,选择 ColorTrend,可选地选择 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 在角落渲染一个内联图标。

趋势

TrendTsgcHTMLStatTrendstUpstDownstNeutral)绘制一个彩色箭头,TrendValue 设置变化量文本。

颜色

ColorTsgcHTMLStatColor)用 Bootstrap 上下文颜色为边框、数值和图标设置主题。

渐变

GradientTsgcHTMLStatGradient)应用预设渐变;GradientStartColorGradientEndColorGradientAngle 定义自定义渐变。

附加功能

FooterText 添加一个标题行,CardID 设置 DOM id,CSSClass 追加额外的类。

一行构建

Build(aTitle, aValue, aColor, aTrend, aTrendValue, aCardID, aGradient) 通过单个静态调用返回卡片 HTML。

继续探索

所有 sgcHTML 组件浏览 60 多个组件的完整功能矩阵。
下载免费试用版30 天试用版附带 60.HTML 演示项目。
价格Single、Team 和 Site 授权,均含完整源代码。

准备好开始了吗?

下载免费试用版,开始在 Delphi、C++ Builder 和 .NET 中构建 Web 界面。