web-dev-qa-db-fra.com

Vuetify.js: comment placer les actions des boutons dans la v-card à gauche et à droite?

Dans v-card-actions composant de v-card, Je veux placer un bouton à gauche et l'autre à droite en utilisant mr-0 (margin-right = 0), mais les 2 boutons restent toujours proches les uns des autres.

Ce que j'ai essayé:

  • Prop left et right pour les boutons
  • v-spacer composant entre les boutons

Code:

<v-card>
  <v-card-title primary-title>
    <div>
      <h3 class="headline mb-0">Ttile</h3>
      <div>Located two hours south of Sydney in the <br>Southern Highlands of New South </div>
    </div>
  </v-card-title>

  <v-card-actions>
    <v-btn left>Share</v-btn>
    <v-spacer />
    <v-btn right>Explore</v-btn>
  </v-card-actions>
</v-card>

Codepen .

Comment résoudre ça?

javascriptvue.jsvuetify.js
9
Billal Begueradj

Votre code est correct. Utilisez simplement ceci:

      <v-card-actions>
        <v-btn>Share</v-btn>
        <v-spacer></v-spacer>
        <v-btn>Explore</v-btn>
      </v-card-actions>

Il suffit donc de changer le v-spacer ne doit pas être une balise à entourage automatique.

12
roli roli

Il suffit de les envelopper dans v-flex et ajouter text-xs-right classe au second, pour tirer à droite le deuxième bouton.

<v-card-actions>
    <v-flex>
      <v-btn>Share</v-btn>
    </v-flex>
    <v-flex class="text-xs-right">
      <v-btn>Explore</v-btn>
    </v-flex>
</v-card-actions>

CodePen

10
Toodoo