web-dev-qa-db-fra.com

Comment spécifier une marge différente pour différentes tailles d'écran à l'aide du point d'arrêt dans Vuetify

Question:

J'ai une boucle affichant le nombre spécifié de cartes.

Le problème est avec ma-5 attribut dans <v-flex>. Sur xs taille d'écran, cette marge est trop grande. Puis-je spécifier une marge différente pour différentes tailles d'écran?

Code:

   <v-container>
      <v-layout row wrap>
        <v-flex xs12 sm6 md4 ma-5 v-for="card in filteredCards" :key="card.id">
          <v-card flat class="elevation-20 test">
            <v-card-media :src="card.image" height="200px">
            </v-card-media>
            <v-card-title primary-title class="pa-4">
               <div>
                  <h3 class="headline mb-0">{{card.title}}</h3>
                  <div style="min-height:50px;">{{card.description}}</div>
               </div>
            </v-card-title>
          </v-card>
        </v-flex>
      </v-layout>
   </v-container>

A tenté:

J'ai essayé d'ajouter ce code ci-dessous (copié à partir de this page)

<v-flex xs12 sm6 md4 v-for="card in filteredCards" :key="card.id"
   :class="{'ma-0': $breakpoint.smAndDown, 'ma-5': $breakpoint.mdAndUp}">

et j'obtiens ces erreurs:

  • [Vue warn]: Property or method "$breakpoint" is not defined on the instance but referenced during render

  • [Vue warn]: Error in render: "TypeError: Cannot read property 'smAndDown' of undefined"

  • TypeError: Cannot read property 'smAndDown' of undefined

vuetify.js
19
Un1

$vuetify.breakpoint.smAndDown

Remarquer $vuetify

Dans ton cas:

<v-flex 
    v-for="card in filteredCards"
    :key="card.id"
    :class="{'ma-0': $vuetify.breakpoint.smAndDown, 'ma-5': $vuetify.breakpoint.mdAndUp}"
    xs12 sm6 md4  
>

Vérifier docs (objet de point d'arrêt)

42
Traxo