-
Componentes
-
Módulos
Mover Elemento Responsivo
El propósito de este componente es controlar la visibilidad y posición de elementos en diferentes breakpoints. Permite mover un elemento dentro de un contenedor específico en dispositivos móviles mediante clases CSS responsivas.
FRG_MoverElementoResponsivo
Fragmento > Componentes > FRG_MoverElementoResponsivo
Componente wrapper que reordena elementos en el DOM mediante CSS Grid según el breakpoint. Permite mostrar elementos en diferentes posiciones o contenedores dependiendo del dispositivo, facilitando layouts complejos y responsivos sin duplicar contenido.
- Clase de contenedor móvil (mobileContainer) - Nombre de la clase CSS que identifica el contenedor donde se moverá el elemento en dispositivos móviles. Ejemplo: "contenedor-movil". Default: "contenedor-movil"
- Punto de ruptura escritorio (breakpointDesktop) - Define a partir de qué breakpoint se aplica el reordenamiento:
- xs: Extra small (< 576px)
- sm: Small (≥ 576px)
- md: Medium (≥ 768px)
- lg: Large (≥ 992px) - Default
- xl: Extra large (≥ 1200px)
- Cómo usarlo:
- Envuelve el elemento que quieres mover con este fragmento
- Dentro coloca una zona de colocación (fragmentDropZone)
- En el contenedor padre, añade un elemento con la clase especificada en "mobileContainer"
- El elemento se moverá automáticamente al cambiar el breakpoint
Casos de uso
Este componente es ideal para:
- Cambiar la posición de botones de acción en móvil
- Reordenar llamadas a la acción (CTA) según el dispositivo
- Mostrar elementos en diferentes áreas del layout dependiendo del breakpoint
- Optimizar la experiencia móvil sin duplicar código HTML
- Implementar diseños complejos que requieren reordenamiento responsive
Ejemplo
Para este ejemplo hemos realizado las siguientes acciones:
- Se han añadido un par de contenedores con diferentes colores de fondo para diferenciar
- En el primer contenedor se ha agregado el fragmento "FRG_MoverElementoResponsivo" a su vez dentro de un párrafo de ejemplo
- FRG_MoverElementoResponsivo tiene como configuración Clase de contenedor móvil: contenedor-movil
- En el segundo (es el contenedor en el que queremos que se desplace el elemento en móvil), hemos añadido la clase "contenedor-movil" para que funcione
- En el primer contenedor se ha agregado el fragmento "FRG_MoverElementoResponsivo" a su vez dentro de un párrafo de ejemplo
- Podemos comprobar, si hacemos pequeña nuestra ventana de navegador, que el fragmento y los elementos que tiene dentro se pueden mover de un contenedor a otro. Es lo que harían dispositivos mas pequeños como los móviles.
Contenedor donde originalmente está el fragmento
خطأ في الأداء الوظيفي - لضمان العمل بشكل صحيح، يجب استخدام الفئة "contenedor-movil" المخصصة لحاوية الهاتف المحمول مرة واحدة فقط في هذه الصفحة.
مكوّن بلا وظيفة - أضف إلى هذه المنطقة أي عنصر تريد نقله إلى مكان آخر في عرض الهاتف المحمول.