Muestra las diferencias entre dos versiones de la página.
Próxima revisión | Revisión previa | ||
propiedades:aoffset [08/12/2019 14:02] pedro creado |
propiedades:aoffset [21/07/2020 10:50] (actual) |
||
---|---|---|---|
Línea 1: | Línea 1: | ||
- | ===== aOffset ===== | + | ====== aOffset ====== |
- | Esta propiedad nos permite definir el desplazamiento horizontal desde la izquierda de los controles dentro de la página web, o dentro de un control contenedor ([[controles:wbevel|wBevel]], [[controles:wpanel|wPanel]], [[controles:witemparallax|wItemParallax]], etc..). | + | Esta propiedad nos permite definir el desplazamiento horizontal desde la izquierda de los controles dentro de la página web, o dentro de un control contenedor ([[controles:wBevel]], [[controles:wPanel]], [[controles:wItemParallax]], etc..). |
- | Materialize divide los contenedores en 12 columnas para distribuir los elementos, nosotros podemos indicar a partir de qué columna lo colocamos y la cantidad de columnas que va ha ocupar (ver [[propiedades:awidth|aWidth]]), de esta manera el navegador irá renderizando la página y si hay espacio colocará juntos en la misma fila varios controles y si no los pasará a la siguiente. | + | Materialize divide los contenedores en 12 columnas para distribuir los elementos, nosotros podemos indicar a partir de qué columna lo colocamos y la cantidad de columnas que va ha ocupar (ver [[propiedades:aWidth]]), de esta manera el navegador irá renderizando la página y si hay espacio colocará juntos en la misma fila varios controles y si no los pasará a la siguiente. |
También hay que saber que Materialize distingue 4 tamaños de pantalla S, M, L y XL (https://materializecss.com/grid.html#grid-responsive) 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. | También hay que saber que Materialize distingue 4 tamaños de pantalla S, M, L y XL (https://materializecss.com/grid.html#grid-responsive) 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. | ||
Línea 9: | Línea 9: | ||
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 medidas de pantalla, si le damos valor a M, en tamaño S tendrá su valor y en el resto el de M. | 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 medidas de pantalla, si le damos valor a M, en tamaño S tendrá su valor y en el resto el de M. | ||
- | Si un control estuviera dentro de un contenedor ([[controles:wbevel|wBevel]], [[controles:wpanel|wPanel]], wItemParallax, etc...), tendríamos también 12 columnas dentro del contenedor, pero lógicamente serían | + | Si un control estuviera dentro de un contenedor ([[controles:wBevel]], [[controles:wPanel]], [[controles: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. | proporcionales en tamaño al tamaño de contenedor. | ||
- | Para poder lidiar con esta manera de distribuir los controles hemos creado las propiedades [[propiedades:awidth|aWidth]] y aOffset y las constantes xc_S, xc_M, xc_L y xc_XL. Para hacer el uso más "amigable" también se han creado las constantes _movil, _tablet, _monitor y _grande. | + | Para poder lidiar con esta manera de distribuir los controles hemos creado las propiedades [[propiedades:aWidth]] y aOffset y las [[nefele:constantes#Indices de aWidth y aOffset|constantes]] xc_S, xc_M, xc_L y xc_XL. Para hacer el uso más "amigable" también se han creado las [[nefele:constantes#Indices de aWidth y aOffset|constantes]] _movil, _tablet, _monitor y _grande. |
aOffset 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 aOffset[xc_M] := 2 para definir qué a tamaño de pantalla M y superior ( si no definimos nada el L y XL ) queremos que nuestro control se coloque dejando libre 2 columnas a su izquierda. Pero también podemos acceder directamente a las 4 medidas, aOffset := {0,2,4,6}. | aOffset 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 aOffset[xc_M] := 2 para definir qué a tamaño de pantalla M y superior ( si no definimos nada el L y XL ) queremos que nuestro control se coloque dejando libre 2 columnas a su izquierda. Pero también podemos acceder directamente a las 4 medidas, aOffset := {0,2,4,6}. | ||
Línea 19: | Línea 19: | ||
Para aOffset es lo mismo tener una valor a 0 que a Nil, ambos equivalen a no tener desplazamiento en esa medida de pantalla. | Para aOffset es lo mismo tener una valor a 0 que a Nil, ambos equivalen a no tener desplazamiento en esa medida de pantalla. | ||
+ | |||
+ | ~~DISCUSSION|Comentarios aOffset~~ |