Aprenda Vuetify en 5 minutos

Bienvenido a un recorrido sin interrupciones por Vuetify, una biblioteca de componentes popular para Vue.js. Le permite crear aplicaciones atractivas y accesibles con 80 elementos listos para usar desde el primer momento, además le brinda la opción de personalizar elementos para un diseño a medida.

En los próximos cinco minutos, te mostraré los siguientes elementos calientes de Vuetify:

  • Tipografía
  • Espaciado
  • Botones
  • Navegación
  • Cuadrícula
  • Tarjeta

Y al final de este artículo, se sentirá seguro de crear aplicaciones impresionantes con solo unas pocas líneas de código.

Mientras lee, diríjase al curso Vuetify de 2 horas de Scrimba para obtener más información y explorar el código en el área de juegos interactiva de la plataforma. Además, puede probar sus nuevas habilidades con algunos desafíos de codificación interactiva. ¡Empecemos!

Creando un objeto Vuetify

Para usar Vuetify, primero extraemos Vue y Vuetify de su CDNS.

Esto nos permite crear una instancia de una aplicación Vue con una propiedad Vuetify y crear un nuevo objeto Vuetify:

new Vue({ el: '#app', vuetify: new Vuetify({}), data: { message: 'Using Single File Components' } }); 

Haga clic para ver esto en detalle.

Tipografía

Tipografía Vuetify

Haga clic en la imagen para ir al elenco.

Vuetify ofrece muchas opciones para crear una tipografía impresionante, desde títulos de varios tamaños hasta títulos, subtítulos y texto del cuerpo:

Heading 1

Heading 2

Heading 3

Title

Subtitle

Body

Cambiar el color del texto y el color de fondo también es fácil con Vuetify. Para el color de fondo, simplemente agregue el nombre del color requerido a la clase del elemento. Para el color del texto, simplemente agregue el nombre del color seguido de --text.

Esto funciona para alrededor de 20 colores estándar y se puede personalizar usando clases complementarias como lighteny darken.

Heading 1

Vuetify también ofrece clases para cambiar el peso y estilo de la fuente, así como truncar y transformar texto. Dirígete al elenco para obtener más información.

Espaciado

Cualquiera que haya usado CSS sabe que los márgenes y el relleno pueden ser complicados. ¡No con Vuetify! Para agregar y ajustar el espacio entre elementos, simplemente use clases con las siguientes abreviaturas:

m = margen

p = relleno

t = arriba

r = correcto

b = fondo

l = izquierda

x = derecha + izquierda

y = arriba + abajo

a = todo

El tamaño del espaciado se ajusta utilizando los números del 1 al 12, que corresponden a incrementos de cuatro píxeles. Por ejemplo, ml-5denota un margen izquierdo de 20 píxeles.

Spacing

Centrar elementos también es fácil con Vuetify. Simplemente envuelva el elemento en un contenedor que abarque la página, luego dele un margen derecho e izquierdo de auto:

Spacing

Ese no es el final de los prácticos consejos y trucos de Vuetify para el espaciado de elementos. ¡Haz clic en el elenco para ver más!

Botones

Vuetify ofrece docenas de opciones para diseñar botones, incluidos botones en los que se puede hacer clic habitualmente, botones de contorno con iconos ya posicionados y botones solo con iconos.

Siga leyendo para ver algunas de las opciones disponibles directamente o haga clic para ver cómo personalizar los botones.

Botón de contorno grande:

Botón de contorno grande

Submit 

Botón con icono:

Botón con icono

 mdi-pencil Edit  

Botón de icono de acción flotante:

Botón de acción flotante con icono

 mdi-plus  

Navegación

Barra de navegación de Vuetify

Haga clic en la imagen para ir al elenco.

Las dos opciones de navegación principales disponibles en Vuetify son y .

Aunque los dos elementos son intercambiables hasta cierto punto, está diseñado para usarse como la navegación principal de un sitio e incluye características como animaciones de desplazamiento y una variedad de accesorios y opciones.

es un componente más pequeño y versátil que está diseñado para brindar funcionalidad a otras áreas de una aplicación. Por ejemplo, podría usarse para las funciones básicas de edición en un pequeño editor de texto.

Ambos elementos de navegación manejan listas desplegables y cambian automáticamente el tamaño de los iconos y botones de navegación.

Cuadrícula

Vuetify tiene un sistema de cuadrícula incorporado que hace que el tamaño y el posicionamiento de los elementos en una aplicación sean más simples que nunca. La cuadrícula se divide en 12 columnas y tiene cinco puntos de interrupción de medios para manejar una variedad de tamaños de pantalla.

Si bien el ancho predeterminado de un elemento es de 12 columnas, es fácil ajustarlo cambiando el valor de la columna. Por ejemplo, un elemento con un valor de columna de 6 ocupa la mitad del ancho de la página. Los elementos se pueden colocar utilizando la offsetpropiedad.

  Column   

Las columnas en Vuetify vienen con espacios preestablecidos. Haga clic en la malla para ver cómo afecta esto al elemento y cómo personalizarlo.

Tarjeta

Tarjeta Vuetify personalizada

Haga clic en la tarjeta para acceder a la malla.

Adición de tarjetas a su aplicación es sencilla, con Vuetify del elemento, que es fácilmente adaptable con sus cuatro elementos anidados opcionales: , , y .

He jugado con la tarjeta proporcionada en el elenco para hacer mi propia tarjeta de café. ¿Por qué no te acercas y ves a dónde te lleva tu imaginación también?

    mdi-coffee Coffee Card  "Coffee Rocks!"    Miss C Bean      

Eso es todo por nuestro recorrido a alta velocidad por las funciones básicas de Vuetify. Para explorar más, diríjase al curso y consulte el archivo Playground.vue, donde puede probar el código y ver más de lo que puede hacer.

El curso también incluye una serie de desafíos interactivos para poner a prueba tus nuevos conocimientos y ponerte en camino de convertirte en un profesional de Vuetify. Cuando haya terminado, ¿por qué no echa un vistazo a la amplia gama de otros temas de Scrimba para continuar su viaje de aprendizaje?

Sea lo que sea que elija hacer a continuación, codificación feliz :)