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
Props, Slots & Markup
Veamos las 3 alternativas que tenemos para definir el contenido de un componente. En este caso, mejoramos la apariencia de nuestras cards, agregando una imagen y posicionando correctamente su contenido.
Introducción
En la lección anterior hemos puesto un title a nuestros cards, y hemos conseguido este resultado. Sin embargo, el precio todavía sigue muy pegado al borde del card.
Razón del problema
¿A qué se debe esto? Lo que pasa es que nosotros podemos enviar la información a través de props, o a través de slots.
-
Propsson atributos al nivel de la etiqueta de apertura. -
titlees unprop,textes unproppara el componenteVCard. - Sin embargo, esta sección de
card actionsse está pasando como unmarkup, es decir, entre la etiqueta de apertura y la de cierre.
Anatomía de un Card
Según la documentación, la anatomía de un card es esta:
-
Title -
Subtitle -
Text -
Actions
De hecho, tenemos tres maneras de usar cards:
-
Props -
Slots -
Markup
Uso de Props
¿De qué manera se usan los props? Ya lo hemos visto:
- Tenemos una etiqueta de apertura.
- Esta etiqueta de apertura tiene propiedades.
- Así se puede definir el
title, elsubtitley el contenido.
Uso de Slots
Si usamos slots, podemos usar esta sintaxis:
<template v-slot:title></template>
<template v-slot:subtitle></template>
<template v-slot:text></template>
La etiqueta template permite definir valores para los slots que el componente card acepta.
Esto funciona bien. Sin embargo, esta sintaxis con markup es más clara:
<VCard>
<VCardItem>
<title></title>
<subtitle></subtitle>
</VCardItem>
<VCardText>
Contenido del card
</VCardText>
</VCard>
Aplicación en el proyecto
Nosotros vamos a pasar el title y el subtitle como props. Pero vamos a pasar el contenido a través de la etiqueta VCardText.
- Pegamos el código.
- Agregamos la etiqueta
VueCardText. - Ponemos el precio dentro de esta etiqueta.
- Guardamos.
El resultado:
<Titulo>
Contenido del card
Más adelante, aquí puede haber más información y nuestras acciones: "Agregar al carrito".
Agregar una imagen al Card
En la documentación encontrarás más ejemplos para adaptar el diseño a tus necesidades.
Por ejemplo, un card con una imagen:
- Agregamos la etiqueta dentro del componente
VueCard. - Ponemos un color al botón.
- Resultado esperado: El
titleaparece sobre la imagen.
Sin embargo, queremos que el title esté debajo de la imagen. Esto no se puede lograr con props, porque no permite controlar la ubicación del title.
Solución
- Agregamos una etiqueta
card title. - Ahora el
titlese muestra debajo de la imagen. - Resultado final obtenido.
Por cierto, se ve de esta manera porque al inicio del curso había aplicado un zoom. Voy a regresar esto a su tamaño normal.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
En la lección anterior hemos puesto un title a nuestros cards, y hemos conseguido este resultado. Sin embargo, el precio todavía sigue muy pegado al borde del card. ¿A qué se debe esto? Lo que pasa es que nosotros podemos enviar la información a través de props, o a través de slots. Props son atributos al nivel de la etiqueta de apertura. Title es un prop, text es un prop para el componente VCard. Sin embargo esta sección de card actions se está pasando como un markup. Es decir, entre la etiqueta de apertura y la de cierre, ¿sí? Según la documentación, la anatomía de un card es esta. Aquí tenemos un título, un subtítulo, un texto, y unas acciones, ¿sí? De hecho tenemos tres maneras, de cómo podemos usar cards. Podemos usar props, podemos usar slots y podemos usar markup. Entonces, ¿de qué manera se usan los props?, ya lo hemos visto. Tenemos una etiqueta de apertura y esta etiqueta de apertura tiene propiedades. Así se puede definir el título, el subtítulo, y el contenido. Si usamos slots podemos usar estas sintaxis. Template, v-slot title. Template, v-slot subtitle. Template, v-slot text. La etiqueta template permite definir valores para los slots que el componente card acepta. ¿Sí? Esto funciona bien. Sin embargo, creo que esta sintaxis de acá está un poco más clara, con markups. Tenemos un VCard que contiene un VCardItem. Este VCardItem contiene un title y un subtitle. Y luego tenemos un VCardText con el contenido del cart. Nosotros vamos a pasar el título y el subtítulo como props. Pero vamos a pasar el contenido a través de esta otra etiqueta VCardText. Entonces estamos aquí, vamos a pegar esto. Aquí tenemos nuestra etiqueta Vue card text, y vamos a poner el precio, dentro de este etiqueta, ¿sí? Guardamos, y aquí lo tenemos: título, contenido del card. Más adelante aquí puede haber más información y nuestras acciones: agregar al carrito. En la documentación vas a encontrar más ejemplos, que te permitirán adaptar el diseño a tus necesidades. Por ejemplo aquí tenemos un card que contiene una imagen. ¿Cómo podemos agregar una imagen a nuestro card? Simplemente agregamos este etiqueta dentro de el componente Vue card. Vamos a poner esto por aquí. Vamos a ponerle también un color al botón, y el resultado es este de aquí. El título está apareciendo por sobre la imagen. Nosotros queremos conseguir este mismo resultado y que el título esté por debajo de la imagen. Eso es algo que no podemos lograr con props. Porque si pasamos por props, no estamos teniendo control de dónde queremos que aparezca el título. Por eso es que podemos reemplazar esto. Vamos a agregar una etiqueta card title, y de esta manera conseguir que el título se muestre debajo de la imagen. Consiguiendo finalmente este resultado. Por cierto, se ve de esta manera porque al inicio del curso yo había aplicado un zoom. Voy a regresar esto a su tamaño normal.
¿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