Responsive Visibility & Spacing

Hemos visto que, para tamaños de pantalla muy pequeños, el botón de "about" no llega a visualizarse. Está allí, pero no es accesible. O sea, sí es accesible, pero de una manera muy difícil. Entonces, lo que vamos a hacer ahora es que, para tamaños de pantalla muy pequeños, el texto lo vamos a desaparecer y nos vamos a quedar solo con los iconos. Entonces aquí en Vuetify vamos a buscar algo llamado “visibility”. Tenemos algunos display helpers que básicamente nos permiten ocultar elementos según los tamaños de pantalla. Por ejemplo, si usamos la clase de display non que se escribe como “d-none”, esto hará que el elemento se oculte, se oculte siempre para todos los tamaños de pantalla. Si queremos ocultar solo en tamaño de pantalla muy pequeños extra small, usaremos estas dos clases. Entonces, en nuestro caso, vamos a dirigirnos al componente “TopBar” y vamos a añadir aquí una etiqueta “span” con estas clases. Tenemos que borrar los puntos y entonces tenemos esto, tenemos un span encerrando a “Home”, vamos a aplicar lo mismo a “cart” y vamos a aplicar lo mismo a "about". Hagamos una prueba para ver si realmente funciona. Actualizamos y tenemos 4 carts. Luego tenemos 3 para un tamaño de pantalla más pequeño, luego 2, luego 1. Y como ya estamos en un tamaño de extra small, los iconos se muestran de esta manera. No se ve completamente alineado porque los iconos están más a la izquierda que a la derecha. Ello se debe a que los iconos los estamos mostrando con este “prepend-icon”. Vamos a cambiar la manera en que mostramos los iconos para que se puedan ver alineados correctamente, entonces vamos a presionar Ctrl+D. Vamos a borrar esto. Y la idea es que mostremos estos iconos al interior del “v-btn” de esta manera. ¿De qué manera podemos mostrar aquí un icon? Vemos en la documentación de Vuetify cómo mostrar iconos con etiquetas. De esta manera podemos mostrar un icono. Pulsamos la etiqueta “v-icon” e indicamos en esta propiedad icon el valor. De esta forma guardamos, actualizamos y ahora vemos que los iconos sí se encuentran centrados. Allí están. Los iconos están pegados al texto. Si queremos podemos agregar márgenes. Yo creo que no es necesario, pero puedes agregar un margin right Si quieres separar un poco el icono del texto y ese margin right también puede estar condicionado al tamaño de pantalla, de tal manera que cuando se reduzca el tamaño de pantalla, el margin right desaparezca y el icono se vea centrado. Yo personalmente creo que no es necesario agregar un margin right. Creo que se ve bien de esta forma. ¿Cómo sería esto de agregar el margin right? Simplemente hay que agregar una clase a los “v-icons”. Cuando una etiqueta no tiene nada en su interior, podemos simplificarla de esta forma. Bien. Y a cada “v-icon” vamos a agregarle una clase. Una clase “mr-2” por ejemplo, para aplicar un margen a la derecha. Y vemos que hay una separación tal como lo teníamos antes cuando usábamos prepent icon. Si el problema ahora es que si nosotros presionamos F12, el icono no está alineado, que era el problema justamente que existía con prepent icon, pero como ahora nosotros tenemos acceso a la clase, lo podemos manipular. Queremos aplicar un margen solo para tamaños que no son extra small. Vamos a dirigirnos entonces a la página de Spacing para ver cómo funciona el espaciado aquí. El formato es “property”, “direction” y “size”. “Property” es margin o padding. “Direction” es left o right y “size” es cuánto de margin, por ejemplo, queremos aplicar. Sin embargo, también tenemos una sección que habla acerca de Breakpoints. Los break points nos permiten aplicar este espaciado solo para ciertos tamaños de pantalla y entonces la sintaxis sería esta de aquí “property”, que sería margin o padding, “direction”, que sería right o left “-breakpoint-size”. También nos dice aquí que XS equivale a no escribirlo. Por defecto se aplica desde XS el margen que queramos. Entonces, en nuestro caso vamos a aplicar los dos desde SM. Desde un tamaño small vamos a aplicar dos de espaciado, pero por defecto para tamaños extra small vamos a aplicar un “mr-0”, o sea, no queremos ningún margen para tamaños extra small y desde SM en adelante un espaciado de dos. Guardamos, actualizamos y vemos que hay un espaciado entre el icono y el texto. Pero si presionamos F12, “mr-0” toma precedencia y el icono se muestra centrado adecuadamente. Si allí tenemos un “mr-2”, allí tenemos un “mr-0” que nos permite mostrar los iconos en tramos.

Crea una cuenta y continúa aprendiendo 🚀

Responsive Visibility & Spacing

Problema con el botón "about" en pantallas pequeñas

Solución propuesta: ocultar texto en pantallas pequeñas

Uso de display helpers

Implementación en el componente TopBar

Prueba de funcionamiento

Problema con la alineación de iconos

Solución: mostrar iconos dentro de `v-btn`

Mostrar iconos con etiquetas Vuetify

Agregar margen derecho opcional

Cómo agregar el margen

Ajustar alineación con breakpoints

Uso de spacing y breakpoints en Vuetify

Implementación del margen condicionado

Crea una cuenta y continúa aprendiendo 🚀

Responsive Visibility & Spacing

Problema con el botón "about" en pantallas pequeñas

Solución propuesta: ocultar texto en pantallas pequeñas

Uso de display helpers

Implementación en el componente TopBar

Prueba de funcionamiento

Problema con la alineación de iconos

Solución: mostrar iconos dentro de v-btn

Mostrar iconos con etiquetas Vuetify

Agregar margen derecho opcional

Cómo agregar el margen

Ajustar alineación con breakpoints

Uso de spacing y breakpoints en Vuetify

Implementación del margen condicionado

Solución: mostrar iconos dentro de `v-btn`