Vuetify es una biblioteca de componentes concisa y con todas las funciones, pero muchas partes de la documentación oficial son vagas y me llevó mucho tiempo comprender el uso básico del sistema de cuadrícula de Vuetify. Por lo tanto, presentaré varias características básicas de su sistema de cuadrícula en este artículo, con la esperanza de ayudar a los usuarios a comenzar rápidamente.
¿Para qué sirve el sistema de rejilla?
Teniendo en cuenta que Xiaobai es completamente inexperto, las dos primeras secciones de este artículo se utilizan para presentar brevemente la idea del sistema de cuadrícula. Si cree que es demasiado largo, pase directamente a la sección de código a continuación.
El mayor uso del sistema de cuadrícula es proporcionar un medio para convertir rápidamente los diseños en código . Por ejemplo, ahora hemos recibido la tarea de escribir la página de inicio y necesitamos implementar dicho código en la interfaz:
Si alguien que no tiene experiencia en CSS lo escribe, probablemente se verá así:
¿En qué se diferencia este diseño del diseño que primero concebimos? Vamos a analizarlos uno por uno:
- Esperamos que el "Título" pueda cubrir las dos piezas de contenido a continuación, pero ahora el ancho de la barra de título es incorrecto;
- Queremos que la "barra lateral" sea tan alta como el "contenido principal", pero el contenido de la barra lateral suele ser menor que el texto principal, lo que da como resultado una altura inconsistente;
- Queremos que el botón inferior esté justo debajo del contenido principal, pero está demasiado a la derecha.
¿Qué hacer con esto? Para describir tales reglas de diseño, además de CSS escrito a mano, usar un sistema de cuadrícula también es una buena opción.
Sistema de cuadrícula: "filas" y "columnas"
Para facilitar la escritura de dicho diseño, el sistema de cuadrícula introduce los conceptos de "filas" y "columnas".
Al usar el sistema de cuadrícula para implementar un diseño, en primer lugar, podemos imaginar que tenemos un cuchillo en la mano y cortamos el diseño de la página web horizontalmente y lo cortamos en filas; en el diseño de cuadrícula, cada fila es monoespaciada . A continuación, sujetamos con cuidado el cuchillo, cortamos verticalmente el diseño ya cortado y dividimos cada fila en varias columnas. No importa cómo se corte, la altura de cada columna es la misma , por lo que podemos describir el diseño que queremos.
Por ejemplo, el diseño de la página de inicio que mencionamos anteriormente se puede dividir en algo como esto:
De esta manera, se cumplen todos los requisitos que mencionamos anteriormente:
- Debido a que cada fila de la cuadrícula tiene el mismo ancho, el ancho de "Título" es exactamente igual al ancho de "Barra lateral" + "Contenido principal";
- Debido a que cada columna tiene la misma altura, la altura de la "barra lateral" también es consistente con el "contenido principal";
- Después de dividir el diseño en varias líneas, el "botón inferior" naturalmente no flotará a la derecha del "contenido principal".
Sistema de red usando Vuetify
1. Escribe la línea
Después de comprender el concepto de "fila" y "columna", el siguiente paso es implementarlo con código. De hecho, el sistema de cuadrícula de Vuetify es mucho más simple que el código de muestra del documento oficial. No necesitas escribir v-container, y mucho menos v-appy v-main, solo escribir v-rowes suficiente :
<v-row>
<v-btn block color="primary">Hello</v-btn>
</v-row>
<v-row>
<v-btn block color="success">Hello</v-btn>
</v-row>
El efecto de este código se muestra en la figura:
Como puede ver, dado que el botón Hola y el botón Mundo están en dos líneas diferentes, los botones Hola y Mundo tienen el mismo ancho.
2. Escribir columnas monoespaciadas
Si desea dividir una fila en varias columnas, utilícelo <v-col>. Cabe señalar que <v-col>debe escribirse directamente <v-row>debajo , y no debe <v-col>envolverse en un recipiente exterior:
<v-row>
<v-col>
<v-btn block color="primary">Hello</v-btn>
</v-col>
</v-row>
<v-row>
<v-col>
<v-btn block color="success">World</v-btn>
</v-col>
<v-col>
<v-btn block color="success">World</v-btn>
</v-col>
<v-col>
<v-btn block color="success">World</v-btn>
</v-col>
</v-row>
En comparación con el código anterior, también colocamos el botón Hola <v-col>en el , de lo contrario, el espaciado de los elementos sería inconsistente. El efecto de este código se muestra en la figura:
Al escribir tres <v-col>, dividimos la fila de botones Mundo en tres columnas, y cada columna tiene el mismo ancho . Esta es una de las características del sistema de cuadrícula de Vuetify: sin ninguna configuración, puede dividir automáticamente una línea en varias partes de igual ancho.
3. Establecer la relación de ancho de cada columna
En el artículo anterior, presentamos un "diseño de página de inicio simple", en el que el ancho de la "barra lateral" y el "contenido principal" no son iguales. Para lograr tal diseño, necesitamos <v-col>establecer colsla propiedad de:
<v-row>
<v-col>
<v-btn block color="primary">Hello</v-btn>
</v-col>
</v-row>
<v-row>
<v-col cols="8">
<v-btn block color="success">World 1</v-btn>
</v-col>
<v-col cols="4">
<v-btn block color="success">World 2</v-btn>
</v-col>
</v-row>
El efecto del código se muestra en la figura:
El sistema de cuadrícula de Vuetify divide una fila en 12 cuadrículas , y se puede pasar un número del 1 al 12 en el atributo cols, lo que significa ** "el número de cuadrículas ocupadas por esta columna" . En otras palabras, a través del atributo cols, podemos especificar la relación del ancho de cada columna**. En la figura anterior, el número de cuadrículas en la columna World 1 es 8 y su ancho es exactamente el doble que el de la columna World 2.
4. Diseño receptivo
Tome el botón Hello World en la imagen de arriba como ejemplo. En un dispositivo de pantalla grande como una computadora, queremos que el Mundo 1 sea un poco más ancho que el Mundo 2, pero en un teléfono móvil, queremos que los botones estén ordenados. en tres filas, y los botones en cada fila tienen el mismo ancho. En otras palabras, necesitamos escribir diferentes diseños para diferentes dispositivos . La función de "punto de interrupción" de Vuetify se utiliza para realizar esta tarea.
La descripción del documento oficial " Responsive Breakpoint " es la siguiente:
Queremos programar diferentes diseños para diferentes puntos de interrupción. En este ejemplo, queremos escribir dos conjuntos de diseños para dispositivos por encima de "teléfono móvil (xs)" y "tableta (sm)". Para hacer esto, solo necesitamos pasar el nombre del punto de interrupción <v-col>a
<v-row>
<v-col>
<v-btn block color="primary">Hello</v-btn>
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="8">
<v-btn block color="success">World 1</v-btn>
</v-col>
<v-col cols="12" sm="4">
<v-btn block color="success">World 2</v-btn>
</v-col>
</v-row>
cols="12"Indica que el número de cuadrículas ocupadas por esta columna es 12 por defecto. sm="8"significa que en smlos dispositivos anteriores , el ancho de esta columna es 8 . Podemos resumir las reglas, asumiendo que el parámetro que pasamos es 断点名字="属性值", luego modificamos la configuración de todos los dispositivos que son mayores o iguales que el "nombre del punto de interrupción" .
El comportamiento del código en el teléfono móvil es el siguiente:
En un dispositivo de pantalla ancha se ve así:
Si desea escribir diferentes diseños para varios dispositivos, solo necesita escribir algunos nombres de puntos de interrupción más.
Escribí este artículo solo porque no leí la documentación oficial detenidamente y pensé erróneamente que el uso de Grid era muy complicado y perdí mucho tiempo. Muchas de las funciones restantes se pueden aprender consultando la documentación oficial (sistema de cuadrícula) , por lo que no entraré en detalles en este artículo. Además, Vuetify es realmente una biblioteca de front-end amigable para los desarrolladores, que es mucho mejor que muchos marcos de interfaz de usuario domésticos en términos de diseño receptivo y completitud de componentes. Próximamente este año se lanzará una versión basada en Vue 3, ¡todo el mundo está invitado a probarla!