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
Chip & Spacing
Veamos cómo trabajar con margins y paddings cuando usamos Vuetify. Así mismo cómo agregar un componente chip para el precio.
Uso de Markups en Vuetify
Hemos visto en la lección anterior que podemos usar markups. Por ejemplo, dentro de v-card tenemos markups como v-card-title, v-card-text y v-card-actions.
El hecho de que estos componentes lleven este prefijo nos ayuda a recordar que son componentes que deben usarse dentro de este principal.
Sin embargo, nosotros podemos usar otros componentes también dentro de los cards.
Por ejemplo, aquí tenemos algunos badges, que es un componente de entre los muchos que proporciona Vuetify.
Uso de v-chip en Vuetify
Si vamos a ver el código de ejemplo, nos vamos a encontrar con este componente llamado v-chip.
En el caso de Vuetify, el componente se llama chip en vez de badge.
Entonces, vamos a copiar esto y vamos a poner el precio dentro de un chip.
En vez de llamar a esto "precio", simplemente pondremos un símbolo de moneda. Esto dependerá de tu país o de la moneda que quieras usar.
Por ejemplo, en Perú, el símbolo de los nuevos soles es de esta manera. Sin embargo, como probablemente no estés familiarizado con ese símbolo, pondremos el símbolo de un dólar.
Además, agregaremos una descripción de ejemplo.
Lo hacemos de esta manera porque nuestros productos todavía no tienen una descripción.
Al actualizar, conseguimos este resultado. Sin embargo, no hay una separación entre este texto y el chip.
Creación de Separación con v-card-text
Para conseguir esto, crearemos otro elemento llamado v-card-text.
Si creamos otro elemento v-card-text y ponemos el chip dentro de este text, por separado de la descripción, el resultado será este de aquí.
Sin embargo, la separación entre un text y el otro es muy exagerada.
Por lo tanto, en este caso no nos conviene separar en dos card-text distintos.
Vamos a seguir usando un solo card-text.
Aquí tendremos el párrafo y el chip.
Si queremos crear una pequeña separación entre uno y el otro, podemos usar márgenes.
Uso de Márgenes y Padding en Vuetify
Los márgenes también están disponibles en Vuetify. Podemos ir a la documentación, usar el buscador y escribir "margin". Aquí encontraremos algunos ejemplos.
Formato de Márgenes y Padding
La estructura es la siguiente:
- Property, seguido de la dirección, guión y el tamaño.
-
Property:
mpara márgenes yppara agregar padding. -
Dirección:
-
t: top (arriba) -
b: bottom (abajo) -
l: left (izquierda) -
r: right (derecha) -
x: Aplica en el eje X (izquierda y derecha) -
y: Aplica en el eje Y (arriba y abajo) -
a: Aplica en todas las direcciones
-
-
Tamaño:
-
0: Elimina todo margen o padding. -
1: Equivale a 4 píxeles. -
2: Equivale a 8 píxeles. - Y así sucesivamente hasta
16.
-
También existen márgenes negativos. Ellos llevan una n de prefijo. Es decir, van a restar.
Prueba con Márgenes
A este párrafo le agregaremos una clase para que tenga un margen con relación al chip.
Entonces, usaremos margin-bottom-1.
Guardamos y aquí vemos que hay un pequeño espaciado. Si usamos, por ejemplo, margin-bottom-2, el espacio aumenta un poco más.
Podemos seguir probando con margin-bottom-3, margin-bottom-4 y aumentar hasta margin-bottom-16, según la documentación.
También podemos poner un margen negativo si anteponemos el prefijo n al tamaño.
Por ejemplo, el precio en vez de estar debajo del párrafo terminó estando por arriba porque le hemos puesto un margen negativo.
Resultado Final
En nuestro caso, pondremos margin-bottom-4, y conseguiremos este resultado.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
Hemos visto en la lección anterior que podemos usar markups. Por ejemplo dentro de v-card tenemos markups como v-card, guión title, guión text, guión actions. El hecho de que estos componentes lleven este prefijo nos ayuda a recordar que son componentes que deben usarse dentro de este principal. ¿Sí? Sin embargo nosotros podemos usar otros componentes también dentro de los cards. Por ejemplo aquí tenemos algunos badges que es un componente de entre los muchos que proporciona Vuetify. Si vamos a ver el código de ejemplo, nos vamos a encontrar con este componente llamado v-chip. ¿Si? En el caso de Vuetify el componente se llama chip en vez de badge. Entonces vamos a copiar esto, y vamos a poner el precio dentro de un chip. ¿Sí? Y en vez de llamar a esto precio vamos simplemente a poner un símbolo de moneda. Esto va a depender de tu país o de la moneda que quieras usar. Por ejemplo en Perú, el símbolo de los nuevos soles es de esta manera. Sin embargo como probablemente no estés familiarizado con ese símbolo voy a poner el símbolo de un dólar. Y voy a agregar una descripción. Esta es una descripción de ejemplo. Lo pongo de esta manera porque nuestros productos todavía no tienen una descripción. Al actualizar conseguimos este resultado. Sin embargo no hay una separación entre este texto y el chip. Para conseguir ello voy a crear otro elemento llamado v-card-text. Si creamos otro elemento Vue card text, y ponemos el chip dentro de este text, por separado de esta descripción, el resultado será este de aquí. Sin embargo, la separación entre un text y el otro es muy exagerada. Por lo tanto, en este caso no nos conviene separar en dos card text distintos. Vamos a seguir usando un solo card text. Vamos a tener aquí el párrafo y el chip. Si queremos crear una pequeña separación entre uno y el otro, podemos usar márgenes. Los márgenes también están disponibles en Vuetify. Podemos ir a la documentación, usar el buscador y escribir, por ejemplo, margin. Aquí nos vamos a encontrar algunos ejemplos. ¿De qué manera funcionan los márgenes y los padding en Vuetify? Tenemos que usar este formato. Property, seguido de la dirección, guión, seguido de, el tamaño. Por ejemplo, respecto a property, tenemos m para los márgenes y tenemos p para agregar padding. Un margen es una separación externa entre dos elementos y un padding es un espaciado interno. Entonces vamos a poner m o p según queramos. Seguido de la dirección. En el caso de t, t significa top. Entonces si usamos mt significará margin top. Siguiendo la misma idea tenemos botón left right y también tenemos x que aplica en el eje X (tanto para izquierda como para derecha), y tenemos Y que aplica en el eje Y, tanto para top como para bottom, o sea hacia arriba y hacia abajo. También tenemos a que significa "all", que aplica para todos los lados, todas las direcciones. ¿Sí? Esto es con relación a la propiedad y la dirección. Luego de ello vamos a poner un guión y vamos a poner el tamaño. ¿Qué tanto queremos aplicar de margen o de padding? Si usamos el valor cero, esto va a eliminar todo margen o bien todo padding, según estemos asignando al elemento. Si usamos el valor 1 esto equivaldrá a 4 píxeles, 2 a 8, y así sucesivamente. ¿Sí? También tenemos margenes negativos. Ellos llevan una n de prefijo, ¿sí? Es decir van a restar. Hagamos una prueba. A este párrafo vamos a agregarle una clase. Queremos que tenga un margen con relación al chip. Entonces vamos a poner margin bottom, guión uno. Guardamos. Y aquí vemos que hay un pequeño espaciado. Si usamos por ejemplo margin bottom guión 2, el espacio aumenta un poco más, guión 3, guión 4, y vamos a exagerar un poco más, para que se note más la diferencia. Guión 6. Tenemos hasta guión 16, según la documentación, ¿sí? Tenemos hasta guión 16. Inclusive podemos poner un margen negativo si es que anteponemos el prefijo n luego del guión, si es que anteponemos el prefijo n al tamaño. Por ejemplo aquí, el precio en vez de estar debajo del párrafo terminó estando por arriba, porque le hemos puesto un margen negativo. Bien. En nuestro caso vamos a ponerle un margin bottom guión 4, y conseguimos este resultado
¿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