¿Cómo usar widgets en Bubble.io?

Usar widgets, como Group Focus, en Bubble.io puede mejorar la interactividad y usabilidad de tus aplicaciones web. A continuación, te presentamos una guía simple, paso a paso, sobre cómo usar el widget Group Focus en Bubble.io para crear componentes de IU atractivos como menús desplegables, tooltips y más.

Paso 1: Arrastra un elemento Group Focus a tu página. Puedes encontrarlo en la sección de elemento visual del editor de Bubble.

Paso 2: Establece un elemento de referencia para tu Group Focus. El elemento de referencia determinará dónde aparecerá el Group Focus en la página. Por ejemplo, si estás creando un menú desplegable, establecerías el icono que, al hacer clic, mostrará el menú desplegable como el elemento de referencia.

Paso 3: Ajusta la posición del Group Focus en relación con el elemento de referencia. Esto se hace generalmente especificando un desplazamiento en píxeles. Por ejemplo, podrías querer un desplazamiento de -150 píxeles para alinear el Group Focus con el lado izquierdo de un icono si el icono es tu punto de referencia.

Paso 4: Configura las condiciones bajo las cuales el Group Focus permanecerá visible. Group Focus generalmente se configura para permanecer visible mientras esté en foco. Esto significa que se mantendrá en la pantalla hasta que el usuario haga clic en otro lugar de la página.

Paso 5: Incorpora animaciones para mostrar y ocultar el Group Focus. Puedes usar acciones como "Animar un elemento" para hacer que el menú aparezca suavemente cuando se haga clic en el elemento de referencia (como un icono). Para el ejemplo del menú desplegable, puedes elegir la animación SlideDownIn para dar una sensación natural a la aparición del menú.

Paso 6: Si estás usando Group Focus dentro de un grupo repetitivo, necesitarás una solución ya que Bubble no permite referencias directas a elementos dentro de las celdas del grupo repetitivo. Coloca el Group Focus y su elemento de referencia dentro de un Elemento Reutilizable y luego coloca ese Elemento Reutilizable dentro del Grupo Repetitivo. Configura el "Tipo de contenido" y la "Fuente de datos" del Elemento Reutilizable para asegurarte de que funciona en el contexto de cada celda del grupo repetitivo.

Paso 7: Prueba tu Group Focus previsualizando tu aplicación. Haz clic en el elemento de referencia y verifica si el Group Focus aparece correctamente, se mantiene en foco como se esperaba, y responde a los clics fuera de él desapareciendo.

Paso 8: Optimiza tu diseño y animaciones según sea necesario para la estética y la experiencia del usuario. Puedes ajustar los desplazamientos de posición, las duraciones de las animaciones y otros ajustes para que coincidan con el aspecto y la sensación deseados.

Siguiendo estos pasos, deberías poder implementar y usar widgets como Group Focus de manera efectiva en tus aplicaciones de Bubble.io, creando interfaces intuitivas y fáciles de usar.