Chip & Spacing

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

Crea una cuenta y continúa aprendiendo 🚀

Chip & Spacing