Los elementos de diseño agrupan otros elementos y controlan cómo se distribuyen en la pantalla.

El Flow Builder incluye cuatro tipos de elementos de diseño:

• Stacks: organiza los elementos hijos a lo largo de un eje — vertical u horizontalmente
• Carousel: un contenedor deslizable que muestra una diapositiva a la vez
• Bottom Sheet: un panel que se desliza desde la parte inferior de la pantalla y se renderiza sobre el contenido subyacente
• Dividers: líneas finas que separan filas o columnas

Stacks

Los stacks agrupan elementos vertical u horizontalmente. El Vertical Stack organiza los elementos en filas; el Horizontal Stack los organiza en columnas.

Cambiar la dirección del stack

La dirección de un stack no es fija. Cambia entre Vertical, Horizontal y Free en la sección Layout del panel derecho en cualquier momento, sin necesidad de eliminar y volver a crear el contenedor.

Configura el espaciado, la alineación y la distribución en la misma sección Layout. Los elementos secundarios se renderizan en el orden en que aparecen en el panel Layers; arrástralos para reordenarlos.

Envolver y desenvolver

Para convertir un elemento existente en un stack, selecciónalo y usa la acción de capa Wrap acción de capa. Arrastra elementos adicionales al nuevo stack desde el panel Layers. Para eliminar un stack y promover sus hijos un nivel arriba, usa Unwrap.

Carrusel

Un Carrusel es un contenedor deslizable que muestra una diapositiva a la vez. El usuario desliza horizontalmente para ver la siguiente diapositiva, o el carrusel avanza automáticamente según un temporizador.

Un Carrusel contiene un conjunto de capas de tipo Diapositiva. Cuando una diapositiva está activa, los elementos de esa capa aparecen en pantalla. A diferencia de las pestañas, la diapositiva activa del carrusel no está disponible como grupo seleccionable — las diapositivas no se pueden referenciar en condiciones ni en texto dinámico. Usa un Carousel para rotación visual, no para ramificaciones controladas por el usuario.

Cambiar la diapositiva activa

Al seleccionar el carrusel, el builder muestra una barra de control emergente con un desplegable Slide y un botón + Add Slide.

• Haz clic en + Add Slide para añadir una nueva diapositiva vacía.
• Usa el desplegable Slide para cambiar qué diapositiva está activa en el lienzo, o haz clic en la capa Slide correspondiente en el panel Layers.

Para reordenar las diapositivas, arrástralas dentro del Carrusel en el panel Layers.

Propiedades

Auto-scroll

El auto-scroll hace que las diapositivas avancen automáticamente, sin que el usuario tenga que deslizar para ver todo el contenido.

Dos controles de tiempo determinan su comportamiento:

• Delay — cuánto tiempo permanece visible cada diapositiva (ms).
• Duration — cuánto dura la transición entre diapositivas (ms).

Tamaño del carrusel

Los controles dedicados determinan el tamaño del carrusel y el espaciado entre diapositivas adyacentes. Establece Height en Fixed para que el diseño no cambie al deslizarse entre diapositivas de diferente longitud de contenido.

Tamaño de diapositiva

Width y Height por diapositiva. El valor predeterminado es Fill para que cada diapositiva siga las dimensiones del carrusel. Establece un ancho fijo para crear un efecto de vista parcial donde las diapositivas adyacentes sean parcialmente visibles.

Puntos

El indicador de página en la parte inferior del carrusel. Muestra al usuario cuántas diapositivas hay y cuál está activa.

Desactiva el toggle Show dots para ocultar el indicador de diapositivas. Cuando los puntos son visibles, las siguientes propiedades controlan su apariencia:

• Color — color de relleno de un punto inactivo.
• Active Color — color de relleno del punto correspondiente a la diapositiva visible en ese momento.
• Size — diámetro de cada punto, en píxeles.
• Gap — espacio entre puntos adyacentes.
• Padding — espacio entre la fila de puntos y el contenido del carrusel situado encima.

Hoja inferior

Una hoja inferior es un panel de diseño que se desliza hacia arriba desde la parte inferior de la pantalla, por encima del contenido subyacente.

La hoja siempre desenfoca todo lo que hay detrás; ese desenfoque no se puede desactivar. Actívala al tocar — por ejemplo, detrás de un enlace Mostrar todos los planes — en lugar de al cargar la pantalla.

Estructura

Un Bottom Sheet incluye dos capas principales:

• Heading — una pila en la parte superior del sheet, con una capa de texto Title y un botón Close Close ya incluidos. Edítalos o elimínalos según necesites.
• Content — el contenedor principal. Añade productos, botones, enlaces o cualquier otro elemento dentro de él.

Visibilidad inicial

Por defecto, una bottom sheet aparece en cuanto se renderiza la pantalla. Para abrirla bajo demanda:

1. Primero termina el contenido de la sheet — las capas ocultas no se pueden editar, así que la sheet debe permanecer visible hasta que hayas terminado de rellenarla.
2. En el panel Layers, selecciona la bottom sheet.
3. Establece Visibility en Hide Hide.

La sheet permanece en el árbol de capas pero deja de renderizarse en la pantalla.

Activar el panel inferior

Para abrir un panel inferior oculto, añade una acción Show a otro elemento:

1. Selecciona el elemento que actuará como disparador (por ejemplo, un botón o un enlace de texto).
2. Abre la pestaña Interactions en el panel derecho.
3. Haz clic en Add trigger > On tap y luego en Add action.
4. Establece Action en Show y elige el panel inferior en el desplegable.

Divisores

El Horizontal Divider y el Vertical Divider son líneas delgadas que separan contenido. Usa el Horizontal Divider para dividir filas y el Vertical Divider para dividir columnas dentro de una pila horizontal. Ajusta el grosor, el color y la longitud desde el panel derecho.