In één oogopslag

TsgcHTMLComponent_StatCard

Een metriektegel gebouwd op de Bootstrap-card. Stel een titel en waarde in, voeg een icoon en een trend toe, pas optioneel een verloop toe en lees dan de HTML-eigenschap.

Componentklasse

TsgcHTMLComponent_StatCard

Rendert

Bootstrap 5 card-markup

Familie

Content en layout

Talen

Delphi, C++ Builder, .NET

QuickStart

Maak hem aan, stel de metriek in, render hem

Wijs Title en Value toe, kies een Color en een Trend, optioneel een Gradient, en lees dan HTML — of gebruik de statische 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);

Referentie

Belangrijkste eigenschappen en methoden

De members die je het vaakst gebruikt.

Metriek

Title labelt de kaart, Value toont het kerncijfer en Icon rendert een inline icoonglyph in de hoek.

Trend

Trend (TsgcHTMLStatTrend: stUp, stDown, stNeutral) tekent een gekleurde pijl en TrendValue stelt de delta-tekst in.

Kleur

Color (TsgcHTMLStatColor) kleurt de rand, waarde en het icoon met een contextuele Bootstrap-kleur.

Verloop

Gradient (TsgcHTMLStatGradient) past een vooraf ingesteld verloop toe; GradientStartColor, GradientEndColor en GradientAngle definiëren een aangepast verloop.

Extra's

FooterText voegt een bijschriftrij toe, CardID stelt de DOM-id in en CSSClass voegt extra classes toe.

One-line build

Build(aTitle, aValue, aColor, aTrend, aTrendValue, aCardID, aGradient) retourneert de kaart-HTML in één statische aanroep.

Bronnen

Blijf ontdekken

	Alle sgcHTML-componentenBlader door de volledige functiematrix van 60+ componenten.	Openen
	Download gratis proefversieDe proefversie van 30 dagen bevat de 60.HTML-demoprojecten.	Openen
	PrijzenSingle-, Team- en Site-licenties met volledige broncode.	Openen

StatCard