Nexus – Elemento: Tabs - Rocketbot Docs

¿Qué es?

Tabs es un componente de tipo Layout (estructura). Organiza contenido en pestañas de navegación, mostrando una sección de contenido a la vez según la pestaña seleccionada. Al arrastrarlo al lienzo, viene con 3 pestañas de ejemplo precargadas (Overview, Details, Metrics).

Propiedades

Al seleccionar Tabs en el lienzo, el panel derecho muestra “Properties of Tabs” con las siguientes opciones:

Component ID: identificador único del componente, autogenerado (ej. tab_79660d88).
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).
Tabs (JSON): campo de código donde se define el contenido en formato JSON. Cada pestaña se compone de:
- label: texto visible de la pestaña.
- value: identificador interno de la pestaña.
- content: contenido que se muestra al seleccionar esa pestaña.
El editor valida el JSON en tiempo real (marca “✓ valid” cuando el formato es correcto).
Default Tab Value: define qué pestaña se muestra seleccionada por defecto al cargar la pantalla, referenciando el value de esa pestaña (ej. overview).
Style → Variant: menú desplegable que define el estilo visual de las pestañas. Opciones:
- Underline: las pestañas se muestran como texto simple, con la pestaña activa subrayada/resaltada en color.
- Pill: las pestañas se muestran como botones tipo “píldora”, con la pestaña activa marcada con fondo de color sólido.
Style → Custom Class: campo para asignar una clase CSS personalizada.
Style → Custom Style: campo de texto para CSS personalizado aplicado directamente a este componente.
Delete Component: elimina el componente del lienzo.
Events & Actions: sistema para definir comportamientos interactivos. Ver documentación aparte: Nexus – Events & Actions.

Ejemplo de uso

Para agregar una nueva pestaña, hay que ubicarse en la última llave } del bloque anterior dentro del JSON de Tabs, y agregarle una coma. Después, pegar el nuevo bloque a continuación. Quedaría así:

[
  {
    "label": "Metrics",
    "value": "metrics",
    "content": "Metrics tab content"
  },
  {
    "label": "Resumen",
    "value": "resumen",
    "content": "Contenido de la pestaña Resumen"
  }
]

⚠️ Importante: la coma va pegada a la llave } del bloque anterior (el último que ya existía en el JSON), no al principio del bloque nuevo. Si el bloque anterior era el último de la lista, hay que agregarle esa coma antes de pegar el nuevo bloque debajo.

Para que una pestaña específica aparezca seleccionada al abrir la pantalla, hay que colocar su value en el campo Default Tab Value (ej. resumen).