Как установить V-BTN в нижнем левом и нижнем правом углу vue js Vutify? - PullRequest
Новая
       9

Как установить V-BTN в нижнем левом и нижнем правом углу vue js Vutify?

0 голосов
/ 06 апреля 2020

Я пытаюсь сделать это, но не могу установить две кнопки в двух нижнем углу. Следующий код держит две кнопки рядом. Но мне нужна одна кнопка слева, а другая справа. 

<v-card-actions>
 <v-spacer />
  <v-btn color="primary" v-on:click="gotosignup">SignUp</v-btn>
  <v-btn color="primary" v-on:click="gotohome">Login</v-btn>
</v-card-actions>

enter image description here]

Ответы [ 2 ]

1 голос
/ 06 апреля 2020

v-card-actions являются flexbox . Просто используйте ml-auto для 2-го бат ... 

    <v-card>
        <v-card-actions>
            <v-btn color="primary">SignUp</v-btn>
            <v-btn color="primary" class="ml-auto">Login</v-btn>
        </v-card-actions>
    </v-card>

ИЛИ justify-space-between для контейнера ... 

    <v-card>
        <v-card-actions class="justify-space-between">
            <v-btn color="primary">SignUp</v-btn>
            <v-btn color="primary">Login</v-btn>
        </v-card-actions>
    </v-card>

https://codeply.com/p/fhnhCdH1aj

0 голосов
/ 06 апреля 2020

Этого легко добиться, используя отзывчивые утилиты flexbox , например: 

<v-card-actions>
    <v-spacer class="d-flex justify-space-between align-end" />
    <v-btn color="primary">SignUp</v-btn>
    <v-btn color="primary">Login</v-btn>
</v-card-actions>

DEMO: 

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})
.spacer{height:90vh}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-card-actions>
      <v-spacer class="d-flex justify-space-between align-end" />
      <v-btn color="primary">SignUp</v-btn>
      <v-btn color="primary">Login</v-btn>
    </v-card-actions>
  </v-app>
</div>
...