Button: Size & Icon

Lo que haremos a continuación, es mejorar un poco el diseño que tenemos para los productos que están agregados al carrito. Nosotros habíamos definido un botón de más y un botón de menos, además de un botón de eliminar. Este botón de más y este botón de menos son muy grandes para el propósito que cumplen. Por lo tanto, para empezar vamos a modificar el tamaño de los botones. Lo normal se conoce como regular button, pero tenemos small button, extra small button, tenemos large button y extra large button. En nuestro caso, vamos a reducir sólo un poco el tamaño. Por lo tanto vamos a declarar un small button. Para esto sólo hay que agregar una propiedad size a nuestro v-button. Nos dirigimos por lo tanto a nuestro componente cart y para cada v-button le vamos a agregar esta propiedad size. Tras guardar, vemos que estos dos botones han reducido su tamaño, Sin embargo el símbolo de más y de menos no se ve muy bien, ya que se trata sólo de un character. Vamos a reemplazar los caracteres por íconos en este caso. Tenemos un ícono que se llama plus y tenemos un ícono que se llama minus. Entonces aquí vamos a dar un enter primero para organizar mejor las propiedades del botón. Bien. Y ahora vamos a eliminar el character que está dentro y como no hay nada dentro de la etiqueta podemos quitar la etiqueta y cerrar de esta manera. Tras hacer ello vamos a agregar un icon en este caso mdi minus para el botón decrement y vamos a agregar un icono mdi plus para el botón de increment. Esta configuración de icon hace que el v-button no contenga nada en su interior, sino que se represente más bien por un solo icono. Al actualizar nos encontramos con este resultado. Tenemos un botón de más y un botón de menos, que continúa funcionando. El único detalle es que parece que está ocupando más espacio. Entonces vamos a actualizar el tamaño por extra small en ambos casos. Ahí está. Siguiendo la misma idea vamos a reemplazar el botón de eliminar por un icono. En este caso vamos a usar un icono de un tacho de basura. Por ejemplo este icono de delete. La idea es la misma, eliminamos el contenido del v-button. Y simplificamos su declaración de esta manera. El v-button tendrá un size que será extra small y estará representado por un icon que será mdi -guión- delete. Así conseguimos este resultado. Sin embargo, a este v-button debemos dar una clase de margin left, o sea hacia la izquierda, para que no esté tan pegado a los botones que aumentan y disminuyen la cantidad. Ya que estamos aquí, también vamos a actualizar el texto que estamos mostrando. Vamos a poner aquí el texto cantidad. Y al v-button de lado izquierdo, es decir al que tiene el icono de menos, le vamos a dar una clase, margin left, guión 2. Ahí está, para que se separe un poco del nombre del producto. Ya que estamos hablando de iconos, es importante mencionar que cuando creamos el proyecto, este incluía una carpeta icons dentro de la carpeta de components. Aquí hay algunos archivos que representan a iconos. Si abrimos estos archivos, vamos a ver que los iconos se encuentran en formato svg. Esta es otra forma de agregar iconos a un proyecto. En nuestro caso, los iconos los vamos a trabajar a través de fuentes, como la fuente mdi que hemos agregado. Por lo tanto, como no necesitamos esta carpeta, la vamos a eliminar.

Crea una cuenta y continúa aprendiendo 🚀

Button: Size & Icon