Выровнять элемент на том же уровне, что и v-card-title в vuetify - PullRequest
Новая
       3

Выровнять элемент на том же уровне, что и v-card-title в vuetify

0 голосов
/ 20 февраля 2020

Можно ли выровнять элемент на той же высоте, что и v-card-title в компоненте карты vuetify? Currentl при использовании class="float-right" элемент идет вправо, но это строка под заголовком. Я бы хотел, чтобы это было на одном уровне. Вот кодекс : 

new Vue({
  el: '#app',
  vuetify: new Vuetify(),

})
<div id="app">
  <v-app id="inspire">
    <v-card
      class="mx-auto"
    width="400"
    >
<!--  Top row -->
    <v-card-title>Cafe Badilico</v-card-title>
      <button class="float-right">click me</button>
<!--     End of top row -->

<!-- Put components here -->
  
     
  
        
    <v-card-title >
     News 
    </v-card-title>
   
<v-list-item dense
        >
  
          <v-list-item-avatar>
             <v-avatar color="indigo" size="36">
      <span class="white--text headline">36</span>
    </v-avatar>
          </v-list-item-avatar>
          <v-list-item-content>
            <v-list-item-title>Header</v-list-item-title>
            <v-list-item-subtitle>Subheader</v-list-item-subtitle>
            <v-list-item-subtitle>2019-05-31</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
   <v-divider></v-divider>
   <v-card-title >
     News 
   </v-card-title>
   
<v-list-item dense>
  
          <v-list-item-avatar>
             <v-avatar color="indigo" size="36">
      <span class="white--text headline">36</span>
    </v-avatar>
          </v-list-item-avatar>
          <v-list-item-content>
            <v-list-item-title ><a href="">Header</a></v-list-item-title>
           
            <v-list-item-subtitle >Subheader</v-list-item-subtitle>
            <v-list-item-subtitle >2019-05-31</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      
  

    </v-card>
  </v-app>
</div>

1 Ответ

2 голосов
/ 20 февраля 2020

Вы можете переместить кнопку в заголовок и использовать компонент v-spacer: 

<v-card-title>
  Cafe Badilico
  <v-spacer></v-spacer>
  <button>click me</button>
</v-card-title>

https://codepen.io/El_Matella/pen/mdJrKNE

Если вы этого не хотите чтобы быть частью титровального компонента, вы также можете использовать гибкий контейнер: 

<div class="d-flex align-center justify-space-between">
  <v-card-title>
    Cafe Badilico
  </v-card-title>
  <button>click me</button>
</div>

https://codepen.io/El_Matella/pen/ZEGpjEq

...