web-dev-qa-db-ja.com

Vuetify.js：左右のvカードにボタンアクションを配置する方法？

v-card-actionsのv-cardコンポーネントでは、mr-0（margin-right = 0）を使用して1つのボタンを左側に配置し、もう1つのボタンを右側に配置しますが、2つのボタンは常に近くに配置しますお互いに。

私が試したもの：

  • ボタンのプロップleftおよびright
  • v-spacerボタン間のコンポーネント

コード：

<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 .

これを解決するには？

javascriptvue.jsvuetify.js
9
Billal Begueradj

あなたのコードは正しいです。これを使用するだけです：

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

したがって、v-spacer自己包含タグではない。

12
roli roli

それらをv-flexでラップし、2番目にtext-xs-rightクラスを追加して、2番目のボタンを右に引っ張るだけです。

<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