Nexus – Elemento: Stat Card

¿Qué es?

Stat Card es un componente de tipo Data. Muestra una tarjeta de estadística con un valor destacado, ícono, y una tendencia opcional respecto a un período anterior. Al arrastrarlo al lienzo viene con un ejemplo precargado (“Finished”, valor 18, con tendencia “+12.4% vs previous period”).

Propiedades

Al seleccionar Stat Card en el lienzo, el panel derecho muestra “Properties of StatCard”, organizado en tres pestañas: Content, Style y Behavior.

• Component ID: identificador único del componente, autogenerado (ej. stc_e770fe3f).
• Visibility → Hidden on load: casilla para que el componente esté oculto al cargar la pantalla. Puede mostrarse luego mediante una acción de tipo Show (ver Events & Actions).

Pestaña Content:

• Theme: menú desplegable que define el estilo visual completo de la tarjeta. Opciones:

  • Classic (Minimal)
  • Modern (Gradient)
  • Split (Accent Strip)
  • Glass (Frosted)
  • Metric (KPI)
  • Promo (Banner)

• Title: título de la tarjeta (ej. “Finished”).
• Value: valor principal destacado (ej. “18”). Cuenta con el editor de código expandido para más comodidad.
• Subtitle: texto secundario debajo del valor (ej. “+8 tasks”).
• Show Trend: casilla que muestra u oculta el bloque de tendencia.
• Trend Value: valor de la tendencia (ej. “+12.4%”).
• Trend Direction: menú desplegable que define la flecha/ícono de tendencia. Opciones: Up, Down, Neutral.
• Trend Label: texto que acompaña a la tendencia (ej. “vs previous period”).
• Icon (SVG/HTML): campo de código donde se pega un ícono en formato SVG (por ejemplo, íconos de la librería Lucide). Cuenta con el editor de código expandido.
• Background Image URL: URL de una imagen de fondo para la tarjeta.
• HTML Content (Promo): campo de código HTML adicional, pensado para el Theme “Promo (Banner)”.
• Background Color (Override): color de fondo que sobrescribe el definido por el Theme elegido.
• Text Color (Override): color de texto que sobrescribe el del Theme.
• Icon BG Color (Override): color de fondo del ícono que sobrescribe el del Theme.

Pestaña Style:

• Custom Class: clase CSS personalizada.
• Custom Style: CSS personalizado aplicado directamente a este componente.

Pestaña Behavior:

• Events & Actions: sistema para definir comportamientos interactivos. Ver documentación aparte: Nexus – Events & Actions .
• Delete Component (ícono de papelera, arriba): elimina el componente del lienzo.

Ejemplo de uso

Con Theme se elige la presentación general de la tarjeta según el contexto: por ejemplo, Classic (Minimal) para un dashboard sobrio, o Promo (Banner) cuando se necesita destacar una tarjeta con contenido promocional (usando HTML Content). Con Trend Direction se comunica visualmente si un valor mejoró (Up), empeoró (Down) o se mantuvo estable (Neutral), acompañado del texto de Trend Value y Trend Label. Los campos “Override” (Background Color, Text Color, Icon BG Color) permiten ajustar puntualmente los colores de una tarjeta sin perder la estructura general del Theme elegido.