Crea una cuenta y continúa aprendiendo 🚀

Regístrate o inicia sesión para continuar aprendiendo:

Frontend Aprendiz

Responsive Visibility & Spacing

Veamos cómo el sistema de breakpoints no se limita a la distribución de componentes en grillas, sino que también puede aplicarse para modificar la visibilidad y el espaciado para nuestros elementos, según los distintos tamaños de pantalla.

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

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.

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

Vamos a hacer que, para tamaños de pantalla muy pequeños, el texto desaparezca y nos quedemos solo con los iconos.
En Vuetify vamos a buscar algo llamado “visibility”.

Uso de display helpers

Tenemos algunos display helpers que permiten ocultar elementos según el tamaño de pantalla.

  • La clase d-none oculta el elemento para todos los tamaños de pantalla.
  • Para ocultar solo en pantallas extra small, usamos clases específicas.

Implementación en el componente TopBar

Nos dirigimos al componente TopBar y añadimos una etiqueta span con estas clases.

  • Borramos los puntos.
  • Encerramos Home con un span.
  • Aplicamos lo mismo a cart y a about.

Prueba de funcionamiento

Actualizamos y tenemos:

  • 4 cart
  • Luego 3 en tamaño de pantalla más pequeño
  • Luego 2
  • Luego 1

En tamaño extra small, los iconos se muestran, pero no están alineados correctamente.

Problema con la alineación de iconos

Los iconos están más a la izquierda que a la derecha.
Esto se debe a que se muestran con prepend-icon.

Solución: mostrar iconos dentro de v-btn

Vamos a cambiar la forma en que mostramos los iconos.

  • Presionamos Ctrl+D.
  • Borramos lo anterior.
  • Mostramos iconos al interior de v-btn.

Mostrar iconos con etiquetas Vuetify

Consultamos la documentación de Vuetify.

  • Usamos la etiqueta v-icon.
  • Indicamos el valor en la propiedad icon.

Guardamos, actualizamos y los iconos aparecen centrados.

Agregar margen derecho opcional

Los iconos están pegados al texto.

  • Se puede agregar un margin-right para separarlos.
  • Este margen puede estar condicionado al tamaño de pantalla.

Yo personalmente creo que no es necesario.

Cómo agregar el margen

  • Simplificamos la etiqueta si no tiene contenido.
  • Agregamos una clase mr-2 a cada v-icon.
  • Logramos la separación como con prepend-icon.

Ajustar alineación con breakpoints

Presionamos F12 y el icono no está alineado.
Con acceso a la clase podemos manipularlo.

  • Queremos margen solo para tamaños que no sean extra small.

Uso de spacing y breakpoints en Vuetify

Consultamos la página de Spacing.

Formato:

  • propertymargin o padding
  • directionleft o right
  • size → cantidad de margen

También vemos los breakpoints:

  • Sintaxis: property-direction-breakpoint-size
  • XS equivale a no escribir el breakpoint

Implementación del margen condicionado

Aplicamos:

  • mr-0 para tamaños extra small
  • mr-sm-2 desde tamaño small en adelante

Guardamos, actualizamos y:

  • Hay espaciado entre icono y texto
  • mr-0 toma precedencia en XS
  • Iconos se ven centrados adecuadamente
  • mr-2 se aplica desde SM
  • mr-0 permite mostrar iconos correctamente en tramos

Esta lección no cuenta con recursos adicionales.

Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.

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.

¿Tienes dudas?

Publicar pregunta

¡Comparte conocimiento!

X

Volver al índice

Regístrate

Inicia sesión para llevar un control de tu progreso.

Capítulos


























































































































122

Responsive Visibility & Spacing


Espera un momento 🎁 ...

¿Te gustaría aprender a programar, gratis?

Mago de Programación y más

Sólo debes registrarte 😉.