Herramientas de usuario

Herramientas del sitio


propiedades:awidth

Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

Ambos lados, revisión anterior Revisión previa
Próxima revisión
Revisión previa
propiedades:awidth [04/12/2019 21:35]
pedro
propiedades:awidth [21/07/2020 10:50] (actual)
Línea 1: Línea 1:
-===== aWidth =====+====== aWidth ​======
  
-https://​materializecss.com/grid.html#​grid-responsive+Esta propiedad nos permite definir el ancho que ocupan 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 (ver [[propiedades:​aOffset]]) y la cantidad de columnas que va ha ocupar, 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.
  
-Estas propiedades nos permite "​ubicar"​ los controles dentro ​de la página web. +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 cada uno de los tamaños ​de pantallaincluso ​si queremos que no se vea.
-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 ​SM, L XL, pudiendo +Los valores son en cascada ​de S a XL de manera que si no damos valor a M, L 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 M.
-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 +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
-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 ([[controles:​wbevel|wBevel]], [[controles:​wpanel|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. proporcionales en tamaño al tamaño de contenedor.
  
-Para poder lidiar con esta manera de distribuir los controles hemos creado las propiedades +Para poder lidiar con esta manera de distribuir los controles hemos creado las propiedades aWidth y [[propiedades:​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. 
-aWidth y aOffset y las constantes xc_S, xc_M, xc_L y xc_XL.+ 
 +aWidth 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. Pero también podemos acceder directamente a las 4 medidas, aWidth := {12,10,8,6}
  
-Es un array de 4 elementos que corresponden a las 4 medidas de pantalla {S,M,L,XL}, para +Por defecto casi todos los controles vienen con el valor S a 12 y el resto sin definir, algunos controles tienen por defecto S a 11 para que queden bien ajustados.
-facilitar su uso tenemos las constantes indicadas anteriormente,​ de forma que podemos hacer +
-aWidth[xc_M] := 4 para definir qué tamaño de pantalla M 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 alguno de los elementos del array querrá decir que no queremos que se vea en esa medida de pantalla, si no asignamos ​valor para las medidas superiores tampoco aparecerá, recuerden que se asignan en cascada ​S, M, L y XL.
  
-Si ponemos a 0 algúno de los elementos del array querrá decir que no queremos que se vea en +~~DISCUSSION|Comentarios aWidth~~
-esa medida de pantalla.+
propiedades/awidth.1575495349.txt.gz · Última modificación: 21/07/2020 10:50 (editor externo)