Crear una tabla de fluidos
Una tabla fluida es una forma sencilla de añadir muchos elementos a la pantalla y distribuirlos de manera uniforme y con capacidad de respuesta.
He aquí cómo crear una:
- Arrastra un widget de Tabla al Lienzo.
- Cambia sus columnas y filas para reflejar los diferentes espacios donde te gustaría colocar elementos. En nuestro ejemplo, nuestra tabla actúa como pie de página, por lo que tenemos dos columnas y una fila.
- Como nuestra Tabla es un pie de página, fíjala a la parte inferior de la pantalla y establece su anchura al 100%.
- En la Celda 1, cambia su Disposición a vertical, y luego arrastra dos widgets de Texto a la celda. Uno se colocará automáticamente encima del otro.
- En la Celda 2, cambia su Disposición a horizontal y su Alineación a centrada. Cambia su espaciado horizontal a 30. Arrastra unos cuantos iconos y un widget Botón a esta celda. Se colocarán automáticamente uno al lado del otro con un espacio de 30px entre ellos.
- Selecciona el widget Botón y cambia su anchura al 37%. También puedes añadir un margen alrededor del Botón si quieres que tenga más separación con los iconos.
- Con el Botón aún seleccionado, crea un evento «Al cambiar el tamaño de la ventana» + «Ocultar», y selecciona el Botón como objetivo a ocultar.
- Crea una condición para esta acción, de forma que sólo oculte el botón cuando la Pantalla sea demasiado pequeña. Haz clic en el texto «Añadir condición». Aparecerá el constructor de Expresiones Condicionales.Sigue estos pasos para crear la condición:
1. Haz clic en la pestaña «Constantes». Arrastra el icono «Ancho de ventana» al espacio abierto en la expresión 2. Haz clic en la pestaña «Funciones» y busca la sección «Comparadores». Arrastra un icono ‘Menor que’ (‘<‘) junto al icono ‘Ancho de ventana’ 3. Por último, en el espacio abierto que aparece junto al icono ‘Menor que’ (‘<‘), haz doble clic y escribe 900 4. Haz clic en Aceptar para terminar de construir la condición
- Haz clic en el texto «Si no», que abrirá el cuadro de diálogo Eventos. Crea un evento «Al cambiar el tamaño de la ventana» + «Mostrar», y selecciona el Botón como objetivo a mostrar. Haz clic en Aceptar para terminar de crear el evento. No es necesario crear una condición para este evento.
Ya está. Haz clic en «Simular» y cambia la anchura de la ventana para ver cómo funciona tu tabla de fluidos.
Nota: La configuración de la simulación debe ajustarse para que se expanda a la anchura del navegador. Puedes especificarlo en los ajustes de simulación o en la ventana de simulación.
