Muestra las diferencias entre dos versiones de la página.
propiedades:awidth [04/12/2019 21:30] pedro |
propiedades:awidth [21/07/2020 10:50] |
||
---|---|---|---|
Línea 1: | Línea 1: | ||
- | ==== aWidth ==== | ||
- | https://materializecss.com/grid.html#grid-responsive | ||
- | |||
- | Estas propiedades nos permite "ubicar" los controles dentro de la página web. | ||
- | Materialize utiliza un contenedor de 12 columnas para distribuir los elementos, nosotros | ||
- | podemos indicar partir de qué columna lo colocamos y la cantidad de columnas va ha ocupar, | ||
- | de esta manera el navegador irá renderizado la página y si hay espacio colocará juntos en la | ||
- | misma fila varios controles y su no los pasará a la siguiente. | ||
- | |||
- | También hay que saber que materialize distingue 4 tamaños de pantalla S, M, L y XL, pudiendo | ||
- | decirle como queremos que se vea cada control en casa uno de los tamaños de pantalla, | ||
- | incluso si queremos que no se vea. | ||
- | |||
- | Los valores son en cascada de S a XL de manera que si no damos valor a M, L o XL el control | ||
- | aplicará el valor de S en cada una de las pedidas de pantalla, si le damos valor a M, en tamaño | ||
- | S tendrá su valor y en el resto el de Mi. | ||
- | |||
- | Si un control estuviera dentro de un contenedor (wBevel, wPanel, wItemParallax, etc...), | ||
- | Tendríamos también 12 columnas dentro del contenedor, pero lógicamente serían | ||
- | proporcionales en tamaño al tamaño de contenedor. | ||
- | |||
- | Para poder lidiar con esta manera de distribuir los controles hemos creado las propiedades | ||
- | aWidth y aOffset y las constantes xc_S, xc_M, xc_L y xc_XL. | ||
- | |||
- | Es un array de 4 elementos que corresponden a las 4 medidas de pantalla {S,M,L,XL}, para | ||
- | facilitar su uso tenemos las constantes indicadas anteriormente, de forma que podemos hacer | ||
- | aWidth[xc_M] := 4 para definir qué a tamaño de pantalla M y superior ( si no definimos nada el | ||
- | L y XL ) queremos que nuestro control ocupe 4 columnas. | ||
- | |||
- | Por defecto todos los controles vienen con el valor S a 12. | ||
- | |||
- | Si ponemos a 0 algúno de los elementos del array querrá decir que no queremos que se vea en | ||
- | esa medida de pantalla ( esto está sin implementar aún ). |