Ionic distribución de contenido responsive

A continuación vamos a ver cómo funciona un grid y para qué nos sirve cuando queremos desarrollar aplicaciones multi dispositivos. Para este tutorial recomendamos crear una aplicación totalmente distinta a cualquier otro proyecto en desarrollo/producción. Entonces, vamos a crear una nueva aplicación con el comando:

ionic start ejemplo blank --type=angular --capacitor --package-id=com.ejemplo.app

Este comando creará los recursos necesarios dentro de la carpeta ejemplo. Nos dirigimos a esta carpeta con el comando cd ejemplo, luego a la carpeta src/app y a home, dentro de home encontraremos home.page.html la abrimos con cualquier editor de codigo, recomendamos VSC con las extensiones de IONIC. Para efectos de entendimiento de este tutorial, abrimos y borramos todo lo que se nos creyó dentro de
predeterminadamente, al momento de usar el comando ionic start. A continuación, vamos a crear cuatro columnas dentro de una fila, de manera que existan cuatro dentro de uno de un ion, tal cual como lo haremos en la siguiente ilustración:

En el código anterior lo que hemos hecho es similar a los td, th y table en los antiguos «HTML» hemos usado los términos ionicos «grid» «row» y «col» así que de este modo estaríamos diciéndole a ionic que cree cuatro columnas con tamaños y anchos (autogenerados). Pero que sucede cuando quieres tomar el control de como mostrar la información en diferentes dispositivos, sin esperar que el framework lo renderice a su modo. Entonces podemos usar ciertas propiedades como el size=»1-12″ y los puntos de interrupción predeterminados. Recomendamos agregar estos estilos para que ion-col ion-col{ border: 1px solid grey; text-align:center; } a home.page.css y una vez colocado estos estilos al correr la aplicación con ionic serve veremos que aparecen cuatro cuadros color (gris) y dentro de ellos el número 1,2,3 y 4. Como en la siguiente ilustración. Una vez corramos la app con ionic serve tendremos algo como:

Como podemos ver, se han renderizado cuatro columnas con números que al parecer función bien en diferentes tamaños de pantalla para el contenido tipo texto con caracteres de entre 1 al 4, sin embargo, que sucede cuando tenemos un contenido tipo texto más largo o una imagen, icono o contenido audiovisual, lo que sucederá es que puede renderizarse de diferentes tamaños en relación con el contenido y el ancho y alto de la pantalla. Haremos lo mismo colocando esta vez dos con 12 columnas de dentro.

Como podemos ver se han impreso dos filas En la primera 12 columnas y en la segunda 12 columnas más, lo que nos demuestra que podremos crear hasta 12 columnas predeterminadamente sin especificar el ancho que deberia tener. Sin embargo, con estas «falta» de configuracion estamos permitiendo que nuestro codigo represente automaticamente el contenido según su tamaño o pantalla entocnes para tomar el control de la distibucion de contenido empezaremos aprendiendo a habilitar la propiedad «size».

La propiedad size define el ancho que debería tener nuestra columna dentro de una fila (row) para poder establecer nosotros mismos la distribución adecuada de nuestro contenido dentro. Esta propiedad size esta contemplada dentro de los valores enteros 1-12 siendo 12 el maximo valor maximo entero que puede tener (también puede emplear decimal ejemplo: (11.6 y 0.4 para dos columnas que sumen 12). En el siguiente paso para esta, guia usemos los que están en el primer row agregandoles esta vez a las columnas el atributo size dentro del elemento y dejaremos solo seis con size=»2″.

Como podemos ver, en la fila de arriba solo se han impreso 6 contenidos, mientras que en la fila de abajo se siguen imprimiendo las 12. Y aunque bajemos o aumentemos el ancho de la pantalla, el contenido interno deberá adaptarse al ancho de cada columna y sus límites de ancho son los establecidos dentro de la columna mediante la propiedad size.

Ahora que podemos establecer anchos específicos para cada columna, hagamos un ejercicio más complejo tomando el 12 como el máximo valor que debería tener la suma de todos los atributos size dentro de los elementos col de los row ionicos. a continuación haremos un ejercicio más avanzado. Coloquemos 4 columnas con las siguientes propiedades:
Como en la imagen a continuación:

Como podemos ver en la imagen anterior se han impreso las 4 columnas pero en diferentes dimensiones. Estas dimensiones son fijas y no cambiarán asi se redusca o se aumente el tamaño de la pantalla, siempre sus columnas dentro de ese row mediran las proporciones a lo establecido de cada «size» entonces. Como podras notar en la siguiente imagen, sin importar el tamaño de cada celular, «siempre» se imprimira con los tamaños de columnas fijos y toca preguntarnos que sucede cuando se desea que el «size» sea diferente de 1 a 12 pero según el tamaño de la pantalla para la impresion adecuada de la información para cada tamaño:

Si queremos lograr conseguir que estos anchos size se las cambien en relación al ancho de la pantalla será necesario utilizar los puntos de interrupción establecidos, y estos son: xs, sm, md, lg, xl cada uno tiene un punto de ruptura establecido en píxeles para el mínimo de acción o el máximo de impresión según las necesidades del programador.
Como podemos ver en el ejemplo anterior hemos complementado una suma de tamaños que dan igual a 12 sumándolos para cada punto de ruptura, ejemplo, si sumamos todos los size-xl de las 6 columnas notaremos que cada columna tiene un size-xl de 2 entonces serían 2+2+2+2+2+2 siendo igual a 12, sin embargo, para los size-lg se ha establecido que sean todos de 4, pero de los 6 si el tamaño de pantalla está contemplado dentro del punto de ruptura lg entonces solo se imprimen (3) columnas y de la misma forma sucede para md que imprime dos columnas y para sm y menor imprime una sola. A continuación veamos la siguiente animación donde podremos visualizar como usted podrá distribuir la información de su aplicación ionica responsive eficientemente.

Como podemos ver, en la ilustración de arriba hemos notado que sin importar el ancho de la pantalla, el contenido dinterno se mantiene y no es fijo. Es hora de aplicar las reglas de size-xs, size-sm, size-md, size-lg y size-xl. Para el siguiente ejemplo usemos 6 columnas con diferentes valores de puntos de ruptura donde la suma de todos los size para cada tamaño sean 12 recordando que para el xs es para pantallas menores a 576 y que sm es para mayores de 576, pero menores a 768 y que md es para mayores a 768, pero menores a 992 y que lg es para pantallas mayores a 992, pero menores a 1200 y que xl es para pantallas superiores a los 1200 Píxeles.

Esto es bastante útil sabiendo, pues, que creamos hacer una aplicación multiplataforma para cualquier dispositivo, incluso para web o para las tiendas de aplicaciones, siendo sus anchos de pantallas de diferentes píxeles. Lograremos distribuir la información interna deseada para cualquier pantalla correctamente, entonces estas conbinaciones de propiedades size para los atributos grid, row y col son bastante útiles y eso sería todo para este tutorial.

Otras propiedades de Grid:

en ocasiones esencial poder distribuir dos elementos en la misma columna dejando que se autodesplacen:

    <ion-grid>
      <ion-row>
        <ion-col class="ion-align-self-start">
          <div>
            <ion-item>
              asdfasdfsadf
            </ion-item>
          </div>
        </ion-col>
        <ion-col class="ion-align-self-end">
          <div>
            <ion-item> 
              fdjggjffdh
            </ion-item>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>

Esperamos que les haya servido. Y para cualquier información o consulta, pregunta sin compromiso recuerde contactarnos desde contacto y gustosamente podremos responder cualquier tema, consulta o relacionados. Gracias por leer.