Componente StatCard — sgcHTML

De un vistazo

TsgcHTMLComponent_StatCard

Un mosaico de métrica construido sobre la card de Bootstrap. Asigna un título y un valor, añade un icono y una tendencia, aplica opcionalmente un degradado y luego lee la propiedad HTML.

Clase del componente

TsgcHTMLComponent_StatCard

Genera

Marcado card de Bootstrap 5

Familia

Contenido y Diseño

Lenguajes

Delphi, C++ Builder, .NET

Inicio rápido

Créalo, define la métrica y genéralo

Asigna Title y Value, elige un Color y una Trend, opcionalmente un Gradient, y luego lee HTML — o usa el método auxiliar estático Build de una sola línea.

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

Referencia

Propiedades y métodos clave

Los miembros que más utilizarás.

Métrica

Title etiqueta la tarjeta, Value muestra la cifra principal e Icon genera un glifo de icono en línea en la esquina.

Tendencia

Trend (TsgcHTMLStatTrend: stUp, stDown, stNeutral) dibuja una flecha de color y TrendValue define el texto del delta.

Color

Color (TsgcHTMLStatColor) aplica un tema al borde, al valor y al icono con un color contextual de Bootstrap.

Degradado

Gradient (TsgcHTMLStatGradient) aplica un degradado predefinido; GradientStartColor, GradientEndColor y GradientAngle definen uno personalizado.

Extras

FooterText añade una fila de leyenda, CardID define el id de DOM y CSSClass añade clases adicionales.

Construcción de una línea

Build(aTitle, aValue, aColor, aTrend, aTrendValue, aCardID, aGradient) devuelve el HTML de la tarjeta en una única llamada estática.

Recursos

Sigue explorando

	Todos los componentes de sgcHTMLExplora la matriz de características completa de más de 60 componentes.	Abrir
	Descargar prueba gratuitaLa prueba de 30 días incluye los proyectos de demostración 60.HTML.	Abrir
	PreciosLicencias Single, Team y Site con todo el código fuente.	Abrir

StatCard