web-dev-qa-db-fra.com

Comment afficher les composants de la carte en boucle avec le système de grille Vuetify?

Remarque: Utilisation de Vue.js et Vuetify.js pour la fonctionnalité et le style

J'ai des composants de carte générés dynamiquement avec v-for, et je souhaite les afficher en 1/3/4 carte (s) d'affilée en fonction de la taille de l'écran (sm/md/lg). Quand je les place dans le système de grille de Vuetify, avec v-flex et v-layout éléments, les cartes sont minimisées, au lieu de passer à la deuxième ligne.

Y a-t-il une autre façon de procéder? 

<v-content>
  <v-card class="d-inline-flex" v-for="company of companies" :key="company.name">
    <v-layout >
      <v-flex md6 lg6>
        <img class="company-logo" src="../assets/img/example-logo.png" alt="company logo">
      </v-flex>
      <v-flex md6 lg6>
        <v-card-title class="headline pl-0">{{company.name}}</v-card-title>
        <article class="text-md-left text-lg-left">
          <v-btn @click="selectDashboard(href('stats', company.name))" :value="company.name"><v-icon>local_offer</v-icon></v-btn>
          <v-btn @click="selectDashboard(href('process', company.name))" :value="company.name"><v-icon>notifications</v-icon></v-btn>
          <v-btn @click="selectDashboard(href('example', company.name))" :value="company.name"><v-icon>rate_review</v-icon></v-btn>
          <v-btn @click="selectDashboard(href('alerts', company.name))" :value="company.name"><v-icon>explore</v-icon></v-btn>
          <v-btn @click="selectDashboard(href('profile', company.name))" :value="company.name"><v-icon>room</v-icon></v-btn>
        </article>
      </v-flex>
    </v-layout>
  </v-card>
</v-content>

Pour un visuel, ce codepen montre que la taille de la largeur des images diminue (mais la taille de la hauteur reste la même) - https://codepen.io/johnjleider/pen/aLXBez?editors=1111

vue.jsgrid-systemvuetify.js
6
stormynpip

Le <v-flex> la grille ne dépasse pas 12. Donc, si vous définissez xs12 (très petit point d'arrêt) sur le <v-flex xs12> il occupera toute la largeur de la grille jusqu'à ce qu'il atteigne le prochain point d'arrêt (si vous ne définissez pas un autre point d'arrêt, le plus bas sera appliqué à toutes les largeurs d'écran). Alors, définissez <v-flex xs12 md6>, maintenant, lorsque vous atteignez le point d'arrêt moyen, chaque carte occupera 6 espaces de grille, ce qui vous permettra d'avoir 2 cartes côte à côte. Réglage lg3, vous permettra de placer 4 cartes dans le même espace.

Vous pouvez le voir fonctionner dans cette modification de votre exemple https://codepen.io/twandy/pen/JrxamB?editors=1001

5
jordanw

La réponse acceptée n'a pas fonctionné pour moi avec la v2 de Vuetify.

Maintenant, nous pouvons utiliser <v-col> et vous feriez quelque chose comme ci-dessous.

<v-row>
    <v-col cols="12" sm="3" md="4" v-for="(something, index) in somethingsArray" :key="index" >
        <my-component :my-data="something" />
    </v-col>
</v-row>

Où cols="12" est le même que xs="12" et la colonne occuperait les 12 espaces complets.

Le dimensionnement évolue en commençant par les plus petits écrans. Ensuite, sur les petits écrans, chaque colonne occuperait 4 espaces, ce qui donne 3 colonnes, puis pour les écrans moyens et plus grands, 3 espaces donnent 4 colonnes.

|__|__|__|__|__|__|__|__|__|__|__|__|  12 spaces in the grid
|-----------------------------------|  <-cols=12 (1 column)
|--------|--------|--------|--------|  <-sm=3 (4 columns)
|-----------|-----------|-----------|  <-md=4 and larger (3 columns)
1
Ju66ernaut