Card: Title & Actions

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.

Crea una cuenta y continúa aprendiendo 🚀

Card: Title & Actions