StatCard

TsgcHTMLComponent_StatCard — renderize um card de KPI/estatística de dashboard com um ícone, seta de tendência e um fundo gradiente opcional, em Delphi, C++ Builder e .NET.

Visão geral

TsgcHTMLComponent_StatCard

Um bloco de métrica construído sobre o card do Bootstrap. Defina um título e um valor, adicione um ícone e uma tendência, opcionalmente aplique um gradiente e então leia a propriedade HTML.

Classe do componente

TsgcHTMLComponent_StatCard

Renderiza

Markup card do Bootstrap 5

Família

Conteúdo & Layout

Linguagens

Delphi, C++ Builder, .NET

QuickStart

Crie, defina a métrica, renderize

Atribua Title e Value, escolha uma Color e uma Trend, opcionalmente um Gradient, e então leia HTML — ou use o helper estático de uma linha Build.

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

Referência

Principais propriedades & métodos

Os membros que você usa com mais frequência.

Métrica

Title rotula o card, Value mostra o número principal e Icon renderiza um glifo de ícone inline no canto.

Tendência

Trend (TsgcHTMLStatTrend: stUp, stDown, stNeutral) desenha uma seta colorida e TrendValue define o texto do delta.

Cor

Color (TsgcHTMLStatColor) aplica tema à borda, ao valor e ao ícone com uma cor contextual do Bootstrap.

Gradiente

Gradient (TsgcHTMLStatGradient) aplica um gradiente predefinido; GradientStartColor, GradientEndColor e GradientAngle definem um personalizado.

Extras

FooterText adiciona uma linha de legenda, CardID define o id no DOM e CSSClass adiciona classes extras.

Construção em uma linha

Build(aTitle, aValue, aColor, aTrend, aTrendValue, aCardID, aGradient) retorna o HTML do card em uma única chamada estática.

Recursos

Continue explorando

	Todos os Componentes sgcHTMLExplore a matriz completa de recursos com mais de 60 componentes.	Abrir
	Baixar Versão de Avaliação GratuitaA avaliação de 30 dias inclui os projetos de demonstração 60.HTML.	Abrir
	PreçosLicenças Single, Team e Site com código-fonte completo.	Abrir