StatCard 组件 — sgcHTML | eSeGeCe

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。

继续探索

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

准备好开始了吗?

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