Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Crea una cuenta y continúa aprendiendo 🚀
Regístrate o inicia sesión para continuar aprendiendo:
Frontend
Aprendiz
Ocultar badge y asignar color
Veamos cómo ocultar el badge inicialmente y mostrarlo sólo cuando el carrito contiene productos. Así mismo, cómo modificar su color.
Revisando la documentación de Vuetify
Vemos que este componente v-badge tiene una propiedad llamada model-value.
Esta propiedad model-value recibe un valor booleano y por defecto tiene como valor true. Esto hace que siempre se muestre.
Si queremos que el badge no se muestre, debemos pasarle un valor false a esta propiedad.
Configuración de v-badge
En la etiqueta v-badge, además de pasar un content con la cantidad de ítems, pasamos también la propiedad model-value con una expresión:
- Si
items-countes mayor que0, el badge se mostrará. - De lo contrario, no lo hará.
Efecto logrado
- Si no hay ítems, no se muestra el badge.
- En el instante en que agregamos un producto, aparece el badge con la cantidad correspondiente.
Personalización del badge
Este componente también soporta una propiedad llamada color.
La propiedad color acepta:
-
Utility colors como
successopurple. -
Colores CSS en formato hexadecimal o
rgba.
Probando colores
Vamos a definir color: "teal". Si actualizamos, vemos que el badge se muestra con este color.
Probamos ahora con success, y el color cambia.
Es cuestión de elegir un color adecuado.
Podemos usar el mismo color del botón "Agregar al carrito" para mantener coherencia.
Consistencia con el botón
Nos dirigimos a ProductCart y verificamos que el botón usa el color Orange Lighten-2.
Aplicamos este mismo color al v-badge para mantener armonía en la interfaz.
Diferencia en la sintaxis de propiedades
Probablemente te preguntes por qué:
-
contentymodel-valuetienen:antes de su nombre. -
colorno tiene:antes de su nombre.
Uso de : en Vue
Los : se usan para evaluar expresiones de JavaScript:
- En
content, queremos evaluaritems-count, no mostrarlo literalmente. - Si quitamos
:, el texto "items-count" aparecería en pantalla en lugar del número de ítems.
En cambio, en color estamos proporcionando un valor directo sin necesidad de evaluación.
Por eso, color se usa sin : y su valor se pasa directamente.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
Revisando la documentación de Vuetify vemos que este componente v badge tiene una propiedad llamada model value. Esta propiedad model value recibe un valor booleano y por defecto tiene como valor true. Esto hace que siempre se muestre. Si nosotros queremos que el badge no se muestre tenemos que pasarle un valor false a esta propiedad. Entonces aquí a la etiqueta v badge así como pasamos un content con la cantidad de items, pasamos también una propiedad model value, y aquí ponemos una expresión. Si items count es mayor que 0, se mostrará. De caso contrario no lo hará. Y el efecto que conseguimos es este de acá. No hay ningún badge pero en el instante en que nosotros agregamos un producto, aparece el badge con la cantidad correspondiente, ¿sí? Hay más cosas que se pueden personalizar sobre este badge. Por ejemplo también soporta una propiedad llamada color y esta propiedad acepta utility colors. Por ejemplo success o purple, ¿sí? También acepta colores css, en este formato, en hexadecimal, y como rgba. Vamos a esta página de colores para ver qué opciones tenemos disponibles. Según nos dice podemos pasar estos valores y se mostrará de tal manera. Hagamos una prueba por ejemplo y pasemos "teal". Entonces vamos a definir por aquí color "teal". Si actualizamos vemos que se está usando ya dicho color, ¿sí? Vamos a probar ahora con success, y el color es de esta otra manera. Entonces es cuestión de encontrar alguno que queramos. Yo creo que podríamos usar el mismo que usamos para el botón que dice agregar al carrito, de tal manera que no introduzcamos muchos más colores. Entonces nos vamos a Product Cart y vemos que este botón de agregar al carrito está usando el color Orange Lighten 2. Es un anaranjado claro. Entonces ese mismo color le vamos a aplicar aquí al v-badge. Probablemente te estés preguntando, ¿por qué aquí hay unos dos puntos para content? Hay unos dos puntos para model value, pero no hay dos puntos para color. Como ya hemos mencionado en lecciones anteriore,s los dos puntos se usan para evaluar expresiones de JavaScript. Por ejemplo content. No queremos que el content diga "items count". Queremos que el content evalúe "items count". Por ejemplo, si nosotros quitamos los dos puntos, esto va a seguir funcionando, pero no se va a evaluar esta expresión, sino que se va a considerar como un valor literal. Y entonces se mostrará "items count" escrito. Como items count, para nosotros es una variable y queremos que se evalúe, ponemos los dos puntos. Esta es una expresión de JavaScript con una condición, queremos que se evalúe, por lo tanto ponemos los dos puntos. En cambio para el color, nosotros estamos proporcionando el valor directamente, no hay ninguna expresión JavaScript a evaluar. Por lo tanto ponemos "color", y directamente el valor que queremos, sin evaluar nada porque aquí no hay variables. Entonces esto es el resultado que conseguimos.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript