StatCard

TsgcHTMLComponent_StatCard — erzeugen Sie eine Dashboard-KPI-/Statistik-Karte mit einem Icon, Trendpfeil und einem optionalen Verlaufshintergrund, in Delphi, C++ Builder und .NET.

Auf einen Blick

TsgcHTMLComponent_StatCard

Eine Kennzahlen-Kachel, aufgebaut auf der Bootstrap-card. Setzen Sie Titel und Wert, fügen Sie ein Icon und einen Trend hinzu, wenden Sie optional einen Verlauf an und lesen Sie dann die HTML-Eigenschaft.

Komponentenklasse

TsgcHTMLComponent_StatCard

Rendert

Bootstrap-5-card-Markup

Familie

Inhalt & Layout

Sprachen

Delphi, C++ Builder, .NET

QuickStart

Erstellen, Kennzahl festlegen, rendern

Weisen Sie Title und Value zu, wählen Sie eine Color und einen Trend, optional einen Gradient, und lesen Sie dann HTML — oder verwenden Sie den statischen einzeiligen Build-Helfer.

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

Referenz

Wichtige Eigenschaften & Methoden

Die Member, die Sie am häufigsten verwenden.

Kennzahl

Title beschriftet die Karte, Value zeigt die Hauptzahl und Icon rendert eine Inline-Icon-Glyphe in der Ecke.

Trend

Trend (TsgcHTMLStatTrend: stUp, stDown, stNeutral) zeichnet einen farbigen Pfeil und TrendValue setzt den Delta-Text.

Farbe

Color (TsgcHTMLStatColor) gibt Rahmen, Wert und Icon mit einer kontextbezogenen Bootstrap-Farbe ein Thema.

Verlauf

Gradient (TsgcHTMLStatGradient) wendet einen voreingestellten Verlauf an; GradientStartColor, GradientEndColor und GradientAngle definieren einen benutzerdefinierten.

Extras

FooterText fügt eine Beschriftungszeile hinzu, CardID setzt die DOM-id und CSSClass hängt zusätzliche Klassen an.

Einzeiliger Build

Build(aTitle, aValue, aColor, aTrend, aTrendValue, aCardID, aGradient) gibt das Karten-HTML in einem einzigen statischen Aufruf zurück.

Ressourcen

Weiter entdecken

	Alle sgcHTML-KomponentenDurchsuchen Sie die vollständige Funktionsmatrix von über 60 Komponenten.	Öffnen
	Kostenlose Testversion herunterladenDie 30-Tage-Testversion enthält die 60.HTML-Demoprojekte.	Öffnen
	PreiseSingle-, Team- und Site-Lizenzen mit vollständigem Quellcode.	Öffnen