Table of Contents
¿Qué es?
Spinner es un componente de tipo Display. Muestra un indicador de carga animado, útil para representar visualmente que un proceso está en curso. Al arrastrarlo al lienzo viene con un texto de ejemplo precargado (“Loading…”).
Propiedades
Al seleccionar Spinner en el lienzo, el panel derecho muestra “Properties of Spinner” con las siguientes opciones:
- Component ID: identificador único del componente, autogenerado (ej.
spn_8580de85). - 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).
- Show: casilla que controla si el spinner se muestra o no.
- Label: texto que acompaña a la animación de carga (ej. “Loading…”).
- Size: menú desplegable que define el tamaño de la animación. Opciones: Small, Medium, Large.
- 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
El Spinner suele usarse en combinación con Events & Actions para mostrarse mientras se ejecuta un proceso (por ejemplo, mientras se espera la respuesta de una API o query) y ocultarse una vez que ese proceso termina, usando acciones de tipo Show Components / Hide Components sobre otros componentes. Con Label se puede personalizar el texto que acompaña la animación (ej. “Cargando datos…”, “Procesando…”).
