Komponent StatCard — sgcHTML

W skrócie

TsgcHTMLComponent_StatCard

A metric tile built on the Bootstrap card. Set a title and value, add an icon and a trend, optionally apply a gradient, then read the HTML property.

Klasa komponentu

TsgcHTMLComponent_StatCard

Renderuje

Bootstrap 5 card markup

Rodzina

Treść i układ

Języki

Delphi, C++ Builder, .NET

Szybki start

Create it, set the metric, render it

Assign Title and Value, pick a Color and a Trend, optionally a Gradient, then read HTML — or use the static one-line Build helper.

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

Dokumentacja

Kluczowe właściwości i metody

Składniki, po które sięgasz najczęściej.

Metric

Title labels the card, Value shows the headline figure and Icon renders an inline icon glyph in the corner.

Trend

Trend (TsgcHTMLStatTrend: stUp, stDown, stNeutral) draws a colored arrow and TrendValue sets the delta text.

Color

Color (TsgcHTMLStatColor) themes the border, value and icon with a Bootstrap contextual color.

Gradient

Gradient (TsgcHTMLStatGradient) applies a preset gradient; GradientStartColor, GradientEndColor and GradientAngle define a custom one.

Extras

FooterText adds a caption row, CardID sets the DOM id and CSSClass appends extra classes.

One-line build

Build(aTitle, aValue, aColor, aTrend, aTrendValue, aCardID, aGradient) returns the card HTML in a single static call.

Zasoby

Poznawaj dalej

	Wszystkie komponenty sgcHTMLPrzejrzyj pełną matrycę funkcji 60+ komponentów.	Otwórz
	Pobierz bezpłatną wersję próbną30-dniowa wersja próbna zawiera projekty demonstracyjne 60.HTML.	Otwórz
	CennikLicencje Single, Team i Site z pełnym kodem źródłowym.	Otwórz

StatCard