Props, Slots & Markup

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.

Crea una cuenta y continúa aprendiendo 🚀

Props, Slots & Markup