Table of Contents
¿Qué es?
El Container es un componente de tipo Layout (estructura). Funciona como una caja flexible para agrupar otros componentes dentro del lienzo. Al arrastrarlo, aparece como un bloque vacío con el mensaje “Drop components here”, listo para recibir otros elementos en su interior.
Propiedades
Al seleccionar el Container en el lienzo, el panel derecho muestra “Properties of Container” con las siguientes opciones:
- Component ID: identificador único del componente, autogenerado (ej.
cnt_a36b5eba). Se usa para referenciarlo desde otras partes de la app (queries, acciones, scripts). - Visibility → Hidden on load: casilla para que el Container esté oculto al cargar la pantalla. Puede mostrarse luego en tiempo de ejecución mediante una acción de tipo Show (ver sección Events & Actions).
- Direction: define la orientación en que se acomodan los componentes puestos dentro del Container. Opciones confirmadas: Vertical y Horizontal.
- Gap (px): espacio entre los elementos internos del contenedor, en píxeles (valor por defecto: 16).
- Padding (px): espacio interno entre el borde del contenedor y su contenido, en píxeles (valor por defecto: 16).
- Background Color: color de fondo del contenedor.
- Style → Custom Class: campo para asignar una clase CSS personalizada al componente.
- Style → Custom Style: campo de texto para escribir CSS personalizado aplicado directamente a este componente.
- Delete Component: botón para eliminar el Container del lienzo.
- Events & Actions: sistema para definir comportamientos interactivos (qué pasa cuando ocurre determinado evento sobre el componente). Ver documentación aparte: Nexus – Events & Actions
Ejemplo de uso
Al colocar varios componentes dentro del Container (por ejemplo, textos, botones u otros elementos), estos quedan agrupados como una unidad dentro del lienzo. El panel de propiedades sigue mostrando las mismas opciones del Container aunque tenga contenido adentro.
Las propiedades Gap y Padding son las que permiten controlar visualmente el espaciado del grupo:
- Aumentar el Gap separa más los componentes entre sí.
- Aumentar el Padding agranda el espacio entre el borde del Container y los componentes de adentro, empujándolos hacia el centro.
