Nexus – Elemento: List Card

¿Qué es?

List Card es un componente de tipo Data. Muestra una lista de ítems tipo ranking, cada uno con nombre, subtítulo, valor y una tendencia (flecha de subida, bajada o neutra). Al arrastrarlo al lienzo viene con un ejemplo precargado (“Top Performers”, 5 vendedores con sus ventas).

Propiedades

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

• Component ID: identificador único del componente, autogenerado (ej. lst_420dde73).
• 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:

• Title: título de la lista (ej. “Top Performers”).
• Data (array of items): campo de código donde se definen los ítems en formato JSON. Cada ítem se compone de:
  • label: nombre del ítem (ej. “Ana López”).
  • sublabel: texto secundario debajo del nombre (ej. “Sales”).
  • value: valor numérico asociado (ej. 45200).
  • trend: dirección de la tendencia. Valores vistos: "up", "down", "neutral".

  Cuenta con el editor de código expandido para más comodidad. El editor valida el JSON en tiempo real (marca “✓ valid” cuando el formato es correcto).

• Show Rank: casilla que muestra u oculta el número de posición/ranking junto a cada ítem.
• Value Prefix: texto que se antepone al valor mostrado (ej. $).
• Value Suffix: texto que se agrega después del valor mostrado.
• Max Items: cantidad máxima de ítems que se muestran en la lista (valor por defecto: 10).

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

Para agregar un nuevo ítem a la lista, hay que ubicarse dentro del array en Data, agregar una coma después del último objeto }, y pegar el nuevo bloque a continuación:

[{"label":"Pedro Fernández","sublabel":"Sales","value":15300,"trend":"up"}]

⚠️ Importante: la coma va pegada a la llave } del ítem anterior, no al principio del bloque nuevo.

Con trend se indica visualmente si ese valor mejoró (up), empeoró (down) o se mantuvo estable (neutral) respecto a un período anterior. Con Value Prefix y Value Suffix se da formato al valor sin modificar el JSON (por ejemplo, $ como prefijo para montos en dólares). Con Show Rank se puede optar por mostrar u ocultar la numeración de posición, útil si la lista no representa necesariamente un ranking sino solo un listado de ítems con valores.