StatCard

TsgcHTMLComponent_StatCard — affichez une carte d'indicateur / de statistique de tableau de bord avec une icône, une flèche de tendance et un arrière-plan en dégradé optionnel, en Delphi, C++ Builder et .NET.

En bref

TsgcHTMLComponent_StatCard

Une tuile de métrique basée sur la card de Bootstrap. Définissez un titre et une valeur, ajoutez une icône et une tendance, appliquez éventuellement un dégradé, puis lisez la propriété HTML.

Classe du composant

TsgcHTMLComponent_StatCard

Produit

Du balisage card Bootstrap 5

Famille

Contenu & Mise en page

Langages

Delphi, C++ Builder, .NET

QuickStart

Créez-la, définissez la métrique, affichez-la

Affectez Title et Value, choisissez une Color et une Trend, éventuellement un Gradient, puis lisez HTML — ou utilisez l'assistant statique Build en une ligne.

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

Référence

Propriétés & méthodes clés

Les membres que vous utilisez le plus souvent.

Métrique

Title étiquette la carte, Value affiche le chiffre principal et Icon rend un glyphe d'icône en ligne dans le coin.

Tendance

Trend (TsgcHTMLStatTrend : stUp, stDown, stNeutral) dessine une flèche colorée et TrendValue définit le texte de variation.

Couleur

Color (TsgcHTMLStatColor) thématise la bordure, la valeur et l'icône avec une couleur contextuelle Bootstrap.

Dégradé

Gradient (TsgcHTMLStatGradient) applique un dégradé prédéfini ; GradientStartColor, GradientEndColor et GradientAngle en définissent un personnalisé.

Extras

FooterText ajoute une ligne de légende, CardID définit l'identifiant DOM et CSSClass ajoute des classes supplémentaires.

Construction en une ligne

Build(aTitle, aValue, aColor, aTrend, aTrendValue, aCardID, aGradient) renvoie le HTML de la carte en un seul appel statique.

Ressources

Continuez l'exploration

	Tous les composants sgcHTMLParcourez la matrice complète des fonctionnalités de plus de 60 composants.	Ouvrir
	Télécharger la version d'essai gratuiteLa version d'essai de 30 jours fournit les projets de démonstration 60.HTML.	Ouvrir
	TarifsLicences Single, Team et Site avec code source complet.	Ouvrir