Volver a Components

Stats Card

<sg-stats-card> v0.1.1

Tarjeta especializada para mostrar estad铆sticas y m茅tricas. Soporta indicadores de tendencia, iconos decorativos y animaciones escalonadas.

Ejemplos

B谩sico

example.html 
<sg-stats-card
  value="1,234"
  label="Total Users"
  icon="user">
</sg-stats-card>

Colores

example.html 
<sg-stats-card color="primary" value="2.4k" label="Views" icon="eye"></sg-stats-card>
<sg-stats-card color="success" value="$12.8k" label="Revenue" icon="dollar-sign"></sg-stats-card>
<sg-stats-card color="warning" value="89" label="Pending" icon="clock"></sg-stats-card>
<sg-stats-card color="error" value="5" label="Issues" icon="exclamation-triangle"></sg-stats-card>

M谩s colores

example.html 
<sg-stats-card color="info" value="47" label="Messages" icon="envelope"></sg-stats-card>
<sg-stats-card color="purple" value="12" label="Projects" icon="folder"></sg-stats-card>
<sg-stats-card color="cyan" value="99%" label="Uptime" icon="server"></sg-stats-card>

Con tendencia

example.html 
<sg-stats-card
  value="8,249"
  label="Sales"
  trend="up"
  trend-value="+12.5%">
</sg-stats-card>
<sg-stats-card
  value="342"
  label="Returns"
  trend="down"
  trend-value="-5.2%">
</sg-stats-card>

Con watermark icon

example.html 
<sg-stats-card
  value="$45,231"
  label="Total Revenue"
  watermark-icon="dollar-sign"
  color="success">
</sg-stats-card>

Animaciones escalonadas

example.html 
<sg-stats-card animated animation-delay="0" ...></sg-stats-card>
<sg-stats-card animated animation-delay="100" ...></sg-stats-card>
<sg-stats-card animated animation-delay="200" ...></sg-stats-card>

Estado de carga

example.html 
<sg-stats-card loading></sg-stats-card>

Playground

Edita el c贸digo y ve los cambios en tiempo real:

HTML

API Reference

Propiedades

11
Prop Tipo Default Descripci贸n
card-title string undefined T铆tulo/etiqueta de la tarjeta
value string | number undefined Valor principal de la estad铆stica
unit string undefined Sufijo de unidad para el valor
description string undefined Texto descriptivo debajo del valor
icon string undefined Nombre del icono (usa sg-icon)
color 'primary' | 'success' | 'warning' | 'error' | 'info' | 'purple' | 'cyan' 'primary' Esquema de color
trend string undefined Indicador de tendencia: up, down o valor como +12%
trend-positive boolean true Si la tendencia es positiva (verde) o negativa (roja)
stats string | StatItem[] undefined Breakdown de estad铆sticas adicionales (JSON)
loading boolean false Muestra skeleton de carga
animation-delay number 0 Delay de animaci贸n en ms (para animaciones escalonadas)

Eventos

1
Evento Tipo Descripci贸n
sgClick CustomEvent<void> Emitido cuando se hace click en la tarjeta

Slots

2
Slot Descripci贸n
(default) Contenido adicional
stats Breakdown de estad铆sticas adicionales

C贸mo usar

Dashboard de m茅tricas

dashboard.html 
<div class="hl-keyword">class="stats-grid">
  <sg-stats-card
    value="12,847"
    label="Total Users"
    icon="users"
    color="primary"
    watermark-icon="user"
    trend="up"
    trend-value="+5.2%"
    animated
    animation-delay="0">
  </sg-stats-card>

  <sg-stats-card
    value="$89,420"
    label="Revenue"
    icon="dollar-sign"
    color="success"
    trend="up"
    trend-value="+12.8%"
    animated
    animation-delay="100">
  </sg-stats-card>

  <sg-stats-card
    value="1,234"
    label="Orders"
    icon="shopping-cart"
    color="info"
    trend="down"
    trend-value="-2.1%"
    animated
    animation-delay="200">
  </sg-stats-card>
</div>

<style>
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}
</style>

Escuchar eventos

events.js 
const statsCard = document.querySelector('sg-stats-card');

statsCard.addEventListener('sgClick', () => {
  // Navigate to detailed stats view
  router.push('/analytics/details');
});

Uso con slot stats

Usa el slot stats para agregar un breakdown adicional:

with-breakdown.html 
<sg-stats-card value="1,847" label="New Users" color="primary">
  <div slot="stats" class="hl-keyword">class="breakdown">
    <span>Desktop: 1,200</span>
    <span>Mobile: 647</span>
  </div>
</sg-stats-card>