Nexus – Elemento: Stat Card

image_pdfimage_print

¿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.