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
Card: Title & Actions
De pronto nuestro elemento button no luce correctamente. Veamos cómo reemplazarlo por un componente de Vuetify equivalente, y así mismo cómo definir un título para nuestros cards.
Problema con los Botones en Cards
Cuando empezamos a usar los cards, el diseño de nuestros botones desaparece. Siguen siendo botones, pero no lucen como tal. Esto sucede porque están dentro de un card, y este tiene su propia forma de mostrar los botones.
Actions en Cards
En Vuetify, cuando trabajamos con cards, no hablamos de botones, sino de actions. Para mostrar actions dentro de un card, usamos la etiqueta v-card-actions. Dentro de esta, utilizamos un componente llamado VButton.
Implementación en Product Card
Vamos a copiar este código y dirigirnos a nuestro product card. Anteriormente, usamos un botón nativo de HTML. Ahora, lo reemplazamos por v-card-actions. Dentro de v-card-actions, podemos agregar varias acciones. Una de ellas es un botón VButton.
El texto "Agregar al carrito" se coloca dentro del botón. Para mejorar la legibilidad, agregamos saltos de línea. Luego, definimos el evento click en el componente VButton. Funciona igual que un botón nativo, con la diferencia de que es un componente de Vuetify y puede personalizarse según los estilos de la biblioteca.
Agregando un Título al Card
Según la documentación, los cards también pueden llevar títulos. Para agregar un título al card, utilizamos la propiedad title.
Ahora, si escribimos product.name de forma directa, se interpretará como un valor literal. Esto hará que se muestre el texto "product.name" en pantalla en lugar del nombre del producto. Para que se interprete correctamente, debemos anteponer dos puntos (:). Esto le indica a Vue que el contenido es código JavaScript.
Tras guardar los cambios, veremos el título del card y el botón "Agregar al carrito" funcionando correctamente.
Subtítulos en Cards
También es posible agregar un subtítulo usando la propiedad subtitle. Sin embargo, en este caso solo utilizaremos title y actions por ahora.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
Luego que hemos empezado a usar los cards, vemos que el diseño de nuestros botones ha desaparecido y siguen siendo botones, pero no lucen como botones. Lo que pasa es que están dentro de un card, y un card tiene su propia forma de mostrar a los botones. Veamos cómo funcionan los componentes cards cuando tienen botones. Cuando trabajamos con cards, no hablamos de botones. En el caso de Vuetify, hablamos de acciones, actions. Para mostrar actions, acciones posibles desde un card, tenemos que usar este etiqueta, v guión card, guión actions. Y dentro vamos a usar un componente llamado Vue Button. Vamos a copiarnos esto entonces y vamos a dirigirnos a nuestro product card. Este botón que usamos anteriormente es un botón nativo de html. Ahora vamos a usar v-card actions, y dentro de Vue card actions podemos tener varias acciones. Una acción posible es usar un botón de VButton, ¿sí? Entonces el texto de agregar al carrito lo vamos a poner aquí. Le damos unos "enter" para que se vea mejor, y el evento de click lo vamos a definir entonces sobre este componente VButton. Funciona de la misma manera. La única diferencia es que es un componente de Vuetify y que por lo tanto puede personalizarse según los estilos de Vuetify. Al actualizar tenemos este resultado. Podemos dar click, y esto funciona como un botón. Como vemos aquí en la documentación, los cards también pueden llevar títulos. Para llevar un título al componente card hay que agregarle un title, de esta manera. Entonces vamos a hacer ello. A este componente card le vamos a poner un título que será en este caso el nombre del producto. Y aquí quiero que veas, quiero que prestes atención, y veas qué ocurre. Si yo lo escribo de esta manera se está interpretando como que "product.name" es un valor literal. Por lo tanto cuando yo vengo acá esto dice product name, y ¡oh vaya! No está imprimiendo el nombre del producto. Si yo quiero que imprima el nombre del producto, tengo que poner aquí unos dos puntos. Esto le dice a Vue que lo que está aquí dentro, debe interpretarse como código JavaScript, y no como un código literal. Por lo tanto, como es JavaScript, "product.name" se va a resolver con el nombre del producto. Tras guarda,r aquí tenemos el título del card, y el botón agregar al carrito. También podemos poner un subtítulo, usando la propiedad subtitle. Sin embargo en nuestro caso, solo usaremos title y actions por ahora.
¿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