StatCard コンポーネント — sgcHTML

概要

TsgcHTMLComponent_StatCard

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);

リファレンス

主なプロパティとメソッド

最もよく使うメンバーです。

Metric

Title はカードのラベルを付け、Value は主要な数値を表示し、Icon は隅にインラインのアイコングリフをレンダリングします。

Trend

Trend（TsgcHTMLStatTrend: stUp、stDown、stNeutral）は色付きの矢印を描画し、TrendValue は差分テキストを設定します。

Color

Color（TsgcHTMLStatColor）は、Bootstrap のコンテキストカラーで枠線、値、アイコンのテーマを設定します。

Gradient

Gradient（TsgcHTMLStatGradient）はプリセットのグラデーションを適用します。GradientStartColor、GradientEndColor、GradientAngle はカスタムのものを定義します。

Extras

FooterText はキャプションの行を追加し、CardID は DOM の id を設定し、CSSClass は追加のクラスを付加します。

One-line build

Build(aTitle, aValue, aColor, aTrend, aTrendValue, aCardID, aGradient) は、カードの HTML を 1 回の静的呼び出しで返します。

リソース

さらに詳しく

	すべての sgcHTML コンポーネント60 以上のコンポーネントの全機能マトリックスを閲覧できます。	開く
	無料体験版のダウンロード30 日間の体験版には 60.HTML デモプロジェクトが付属します。	開く
	価格完全なソースコード付きの Single、Team、Site ライセンス。	開く

StatCard