Nexus – Elemento: Activity Feed

image_pdfimage_print

¿Qué es?

Activity Feed es un componente de tipo Data. Muestra un listado cronológico de eventos o notificaciones, cada uno con un ícono de estado, título, descripción y una marca de tiempo. Al arrastrarlo al lienzo viene con un ejemplo precargado (“Recent Activity”, con 4 eventos de muestra: nuevo pedido, usuario registrado, pago fallido y reporte generado).

Propiedades

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

  • Component ID: identificador único del componente, autogenerado (ej. act_c5b67137).
  • 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.
  • Selector S / M / L: ajusta el tamaño de visualización del panel de propiedades (no afecta al componente en sí).
  • Ícono de IA (círculo rojo con destello, arriba a la derecha): abre el asistente de inteligencia artificial de Nexus para ayudar en la edición.

Pestaña Content:

  • Title: título del listado (ej. “Recent Activity”).
  • Data (array of events): campo de código donde se definen los eventos en formato JSON. Cada evento se compone de:
    • title: título del evento (ej. “New order received”).description: texto secundario debajo del título (ej. “Order #1042 — $320.00”).time: texto de tiempo relativo (ej. “2 min ago”).type: determina el ícono y color asociado. Valores vistos: "success" (✓ verde), "info" (ⓘ azul), "danger" (✕ rojo), "default" (guion gris). Este campo es de texto libre: se puede modificar sin restricción a esos cuatro valores.
    Ejemplo de estructura:
  [
    {
      "title": "New order received",
      "description": "Order #1042 — $320.00",
      "time": "2 min ago",
      "type": "success"
    },
    {
      "title": "User signed up",
      "description": "maria@example.com joined",
      "time": "15 min ago",
      "type": "info"
    }
  ]

Cuenta con el editor de código expandido para más comodidad, con pestañas HTML/CSS/JS/JSON y botones Format y Copy. El editor valida el JSON en tiempo real (marca “✓ valid”).

  • Max Items: cantidad máxima de eventos que se muestran (valor por defecto: 10).
  • Show Time: casilla que muestra u oculta la marca de tiempo de cada evento.
  • Empty State Text: texto que se muestra cuando no hay eventos (ej. “No recent activity”).

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 evento al listado, hay que ubicarse dentro del array en Data, agregar una coma después del último objeto de cierre }, y pegar el nuevo bloque a continuación:

[
  {
  "title": "New comment",
  "description": "Juan replied to your ticket",
  "time": "5 min ago",
  "type": "info"
  }
]

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

Con type se indica visualmente la naturaleza del evento (éxito, información, error o neutro) mediante un ícono y color diferenciado, aunque al ser un campo libre también se pueden usar otros valores según la necesidad. Con Show Time se puede optar por ocultar la marca de tiempo si no es relevante para el caso de uso.